<template>
    <layout-body>
        <layout-filter ref="filter" :model="query">
            <filter-item label="结算单号">
                <Input v-model.trim="query.id" :maxlength="9"></Input>
            </filter-item>
            <filter-item label="SKU编码">
                <Input v-model.trim="query.productSku" :maxlength="9"></Input>
            </filter-item>
            <filter-item label="商品名称">
                <Input v-model.trim="query.productName"></Input>
            </filter-item>
            <filter-item label="品牌">
                <select-brand v-model="query.brandId"></select-brand>
            </filter-item>
            <filter-item label="订单号">
                <Input v-model.trim="query.orderCode"></Input>
            </filter-item>
            <filter-item>
                <Button type="primary" @click="search">筛选</Button>
                <Button @click="reset">清空条件</Button>
                <Button @click="exportData" type="warning">导出</Button>
            </filter-item>
        </layout-filter>
        <layout-list>
            <Table border :columns="tableCols" :data="tableData"></Table>
            <Page :total="pageData.total" :current="pageData.current"
                        @on-change="pageChange" :page-size="10" show-total></Page>
        </layout-list>
    </layout-body>
</template>

<script>
import CandidateListService from 'services/kol/candidate-list-service';
import _ from 'lodash';

export default {
    data() {
        return {
            query: {
                id: '',
                productSku: '',
                productName: '',
                brandId: '',
                orderCode: ''
            },
            pageData: {
                total: 0,
                current: 1,
            },
            tableData: [],
            tableCols: [{
                title: '结算单号',
                key: 'favoriteClearingId',
                align: 'center'
            }, {
                title: '对账单号',
                key: 'favoriteBalanceId',
                align: 'center'
            }, {
                title: 'SKU',
                key: 'productSku',
                align: 'center'
            }, {
                title: '商品名称',
                key: 'productName',
                align: 'center'
            }, {
                title: '品牌',
                key: 'brandName',
                align: 'center'
            }, {
                title: '订单号',
                key: 'orderCode',
                align: 'center'
            }, {
                title: '业务类型',
                key: 'outInTypeName',
                align: 'center'
            }, {
                title: '吊牌价',
                key: 'retailPrice',
                align: 'center'
            }, {
                title: '支付金额',
                key: 'lastOrderAmount',
                align: 'center'
            }, {
                title: '结算比例',
                key: 'clearingPercent',
                align: 'center',
                render: (h, params) => {
                    return <span>{parseInt(params.row.clearingPercent * 100, 10) + '%'}</span>;
                }
            }, {
                title: '数量',
                key: 'num',
                align: 'center'
            }, {
                title: '佣金',
                align: 'center',
                key: 'commission'
            }]
        };
    },
    created() {
        this.candidateListService = new CandidateListService();
    },
    mounted() {
        this.search();
    },
    methods: {
        filterValues() {
            let params = {
                pageNo: this.pageData.current,
                pageSize: 10,
                favoriteClearingId: +this.query.id || +this.$router.history.current.params.id,
                productSku: +this.query.productSku,
                productName: this.query.productName,
                brandId: +this.query.brandId,
                orderCode: +this.query.orderCode
            };

            params = _.pickBy(params, val => val);

            return params;
        },
        search() {
            if (_.isObject(this.query) &&
                typeof this.query.id !== 'undefined' &&
                !_.isFinite(+this.query.id)) {
                this.$Message.error('结算单号只能是数字', 3);
                return;
            }

            if (_.isObject(this.query) &&
                typeof this.query.productSku !== 'undefined' &&
                !_.isFinite(+this.query.productSku)) {
                this.$Message.error('SKU编码只能是数字', 3);
                return;
            }

            if (_.isObject(this.query) &&
                typeof this.query.orderCode !== 'undefined' &&
                !_.isFinite(+this.query.orderCode)) {
                this.$Message.error('订单号只能是数字', 3);
                return;
            }

            this.candidateListService.clearingDetail(this.filterValues()).then(ret => {
                if (ret && ret.code === 200) {
                    this.tableData = _.get(ret, 'data.records', []);
                    this.pageData.total = _.get(ret, 'data.totalCount', 0);
                    this.pageData.current = _.get(ret, 'data.pageNo', 1);
                } else {
                    this.$Message.error(ret.message);
                }
            });
        },
        reset() {
            this.$refs.filter.reset();
            this.search();
        },
        pageChange(val) {
            this.pageData.current = val;
            this.search();
        },
        exportData() {
            let params = {};
            let temp = [];

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

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

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

            window.open(href, '_blank');
        }
    },
    components: {}
};
</script>

<style lang="scss">
</style>