<template>
    <layout-body>
        <layout-filter>
            <filter-item :label="filters.orderCode.label">
                <Input v-model.trim="filters.orderCode.model"
                    :placeholder="filters.orderCode.holder"></Input>
            </filter-item>
            <filter-item :label="filters.balanceId.label">
                <Input v-model.trim="filters.balanceId.model"
                    :placeholder="filters.balanceId.holder"></Input>
            </filter-item>
            <filter-item :label="filters.sku.label">
                <Input v-model.trim="filters.sku.model"
                    :placeholder="filters.sku.holder"></Input>
            </filter-item>
            <filter-item :label="filters.brandId.label">
                <select-brand v-model="filters.brandId.model"></select-brand>
            </filter-item>
            <filter-item :label="filters.status.label">
                <Select v-model="filters.status.model">
                    <Option v-for="option in filters.status.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </filter-item>
            <filter-item>
                <Button @click="returnPage">返回对账单列表</Button>
                <Button type="primary" @click="search">筛选</Button>
                <Button @click="reset">清空条件</Button>
            </filter-item>
        </layout-filter>
        <layout-list>
            <Button type="warning" @click="exportData" class="table-btn">导出</Button>
            <Table border :columns="tableCols" :data="tableData"></Table>
            <Page :total="pageData.total" :current="pageData.pageNo"
                        @on-change="pageChange" :page-size="20" show-total></Page>
        </layout-list>
    </layout-body>
</template>

<script>
import detail from './store/detail';
import filter from './store/filter';
import FinanceService from 'services/finance/finance-service';

export default {
    data() {
        filter.filters = _.assign({
            orderCode: {
                label: '订单号',
                labelSpan: 6,
                model: '',
                holder: '',
                fieldSpan: 18
            },
            sku: {
                label: 'SKU',
                labelSpan: 6,
                model: '',
                holder: '',
                fieldSpan: 18
            }
        }, filter.filters);

        return _.assign(detail.call(this), filter);
    },
    created() {
        this.FinanceService = new FinanceService();
        this.search();
    },
    mounted() {
    },
    computed: {        
    },
    methods: {
        filterValues() {
            let params = {
                balanceId: +this.filters.balanceId.model,
                brandId: +this.filters.brandId.model,
                orderCode: +this.filters.orderCode.model,
                status: this.filters.status.model,
                productSku: +this.filters.sku.model,
                pageSize: this.pageData.pageSize,
                pageNo: this.pageData.pageNo
            };

            return _.pickBy(params, val => val);
        },
        search() {
            this.FinanceService.balanceDetail(this.filterValues()).then(ret => {
                this.tableData = _.get(ret, 'data.records', []);
                this.pageData.total = _.get(ret, 'data.totalCount', 0);
                this.pageData.pageNo = _.get(ret, 'data.pageNo', 1);
            });
        },
        reset() {
            this.filters.balanceId.model = null;
            this.filters.brandId.model = null;
            this.filters.status.model = null;
            this.filters.orderCode.model = null;
            this.filters.sku.model = null;
            this.pageData.pageNo = 1;
            this.pageData.total = 0;
            this.search();
        },
        pageChange(val) {
            this.pageData.pageNo = val;
            this.search();
        },
        exportData() {
            let params = {};
            let temp = [];

            _.assign(params, this.filterValues());

            _.each(params, (val, key) => {
                temp.push(`${key}=${val}`);
            });

            const href = `/Api/erp/exportBalanceDetail?${temp.join('&')}`;

            window.open(href, '_blank');
        },
        returnPage() {
            this.$router.push({
                name: 'finance.clearing'
            });
        }
    }
};
</script>

<style lang="scss">
.ivu-date-picker .ivu-select-dropdown {
    left: -284px !important;
}

.table-btn {
    margin-bottom: 20px;
}
</style>