<template>
    <layout-body>
        <Alert type="warning" show-icon class="warning-box">每个月16号生成本月之前的结算单，请大家务必在1号之前对账完毕。否则未对账的账单将移至下个月合并结算。若对账单存在疑问，可线下联系xx解决X</Alert>
        <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 label="业务类型">
                <Select v-model="query.outInType" clearable>
                    <Option value="30">订单妥投</Option>
                    <Option value="33">退货入库</Option>
                </Select>
            </filter-item>
            <filter-item label="对帐单状态">
                <Select v-model="query.status" clearable>
                    <Option value="10">未对帐</Option>
                    <Option value="20">待结算</Option>
                    <Option value="30">已结算</Option>
                </Select>
            </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="20" show-total></Page>
        </layout-list>

        <Confirm ref="confirm" :onOk="onOk"></Confirm>
    </layout-body>
</template>

<script>
import CandidateListService from 'services/kol/candidate-list-service';
import {Confirm} from './components';
import _ from 'lodash';
import moment from 'moment';

export default {
    data() {
        return {
            query: {
                id: '',
                productSku: '',
                productName: '',
                brandId: null,
                orderCode: null,
                outInType: null,
                status: null
            },
            pageData: {
                total: 0,
                current: 1,
            },
            tableData: [],
            tableCols: [{
                title: '订单号',
                key: 'orderCode',
                align: 'center',
                width: 80
            }, {
                title: '帐单生成时间',
                key: 'createTime',
                width: 110,
                align: 'center',
                render: (h, params) => {
                    if (params.row.createTime) {
                        let time = moment.unix(params.row.createTime);

                        return (
                            <div>
                                <div> {time.format('YYYY/MM/DD')} </div>
                                <div> {time.format('HH:mm:ss')} </div>
                            </div>
                        );
                    }
                }
            }, {
                title: '对帐单号',
                key: 'id',
                align: 'center',
                width: 90
            }, {
                title: '对帐时间',
                key: 'confirmTime',
                align: 'center',
                width: 90,
                render: (h, params) => {
                    if (params.row.confirmTime === 'default') {
                        return '';
                    }

                    if (params.row.confirmTime) {
                        let time = moment.unix(params.row.confirmTime);

                        return (
                            <div>
                                <div> {time.format('YYYY/MM/DD')} </div>
                                <div> {time.format('HH:mm:ss')} </div>
                            </div>
                        );
                    } else {
                        return '暂无';
                    }
                }
            }, {
                title: 'SKU',
                key: 'productSku',
                align: 'center',
                width: 85
            }, {
                title: '商品名称',
                key: 'productName',
                align: 'center',
                width: 90
            }, {
                title: '品牌',
                key: 'brandName',
                align: 'center',
                width: 100
            }, {
                title: '吊牌价',
                key: 'retailPrice',
                align: 'center',
                width: 85
            }, {
                title: '支付金额',
                key: 'lastPaymentAmount',
                align: 'center',
                width: 85
            }, {
                title: '结算比例',
                key: 'clearingPercent',
                align: 'center',
                width: 85,
                render: (h, params) => {
                    if (params.row.clearingPercent) {
                        return (
                            `${params.row.clearingPercent * 100}%`
                        );
                    }
                }
            }, {
                title: '业务类型',
                key: 'outInTypeName',
                align: 'center',
                width: 85
            }, {
                title: '数量',
                key: 'num',
                align: 'center',
                width: 70
            }, {
                title: '佣金',
                key: 'clearingAmount',
                align: 'center',
                width: 90
            }, {
                title: '状态',
                key: 'statusName',
                align: 'center',
                width: 110,
                render: (h, params) => {
                    if (params.row.status === 30) {
                        return (
                            <div>
                                <div>{params.row.statusName}</div>
                                <div>（结算单号：{params.row.favoriteClearingId}）</div>
                            </div>
                        );
                    } else {
                        return params.row.statusName;
                    }
                }
            }, {
                title: '操作',
                render: (h, params) => {
                    if (params.row.status !== 10) {
                        return (
                            <action-group>
                                <i-button type="primary" size="small" onClick={() => this.check(params.row)}>对帐</i-button>
                            </action-group>
                        );
                    }
                },
                width: 100,
                align: 'center'
            }]
        };
    },
    created() {
        this.candidateListService = new CandidateListService();
    },
    mounted() {
        this.search();
    },
    methods: {
        filterValues() {
            let params = {
                pageNo: this.pageData.current,
                pageSize: 10,
                needTotal: 1,
                id: +this.query.id,
                productSku: +this.query.productSku,
                productName: this.query.productName,
                brandId: +this.query.brandId,
                orderCode: +this.query.orderCode,
                outInType: +this.query.outInType,
                status: +this.query.status
            };

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

            return params;
        },
        search() {
            this.candidateListService.favoriteBalanceList(this.filterValues()).then(ret => {
                if (ret && ret.code === 200) {
                    this.tableData = _.get(ret, 'data.records', []);
                    if (this.tableData.length > 0) {
                        this.tableData.push({
                            confirmTime: 'default',
                            outInTypeName: '总计',
                            num: ret.data.totalNum,
                            clearingAmount: ret.data.totalClearingAmount
                        });
                    }
                    this.pageData.total = _.get(ret, 'data.totalPage', 0);
                } else {
                    this.$Message.error(ret.message);
                }
            });
        },
        reset() {
            this.$refs.filter.reset();
            this.search();
        },
        pageChange(val) {
            this.pageData.current = val;
            this.search();
        },
        check(row) {
            this.$refs.confirm.show(row);
        },
        onOk(data) {
            this.candidateListService.favoriteBalanceCheck({
                id: data.id,
                favoritePid: data.favoritePid
            }).then(ret => {
                if (ret && ret.data === 200) {
                    this.$Message.success('对账成功！');
                    this.$refs.confirm.hide();
                } else {
                    this.$Message.error(ret.message);
                }
            });
        },
        onCancel() {
            this.$refs.confirm.hide();
        },
        exportData() {

        }
    },
    components: {Confirm}
};
</script>

<style lang="scss">
.warning-box {
    width: 898px;
    display: inline-block;
    margin-bottom: 15px;
}
</style>