<template>
    <layout-body>
        <layout-filter ref="filter" :model="query">
            <filter-item label="结算单ID">
                <Input v-model.trim="query.id"></Input>
            </filter-item>
            <filter-item label="SKU编码">
                <Input v-model.trim="query.productSku" :maxlength="9"></Input>
            </filter-item>
            <filter-item label="支付时间">
                <Date-picker v-model="query.createTime"
                             type="daterange" format="yyyy-MM-dd" placeholder="选择日期" clearable>
                </Date-picker>
            </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>
                <Tooltip class="help-tooltip" :content="helpTip" placement="top-start">
                    <span class="tip">帮助说明</span>
                </Tooltip>
            </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 moment from 'moment';
import _ from 'lodash';

export default {
    data() {
        return {
            query: {
                id: '',
                productSku: '',
                status: null,
                createTime: []
            },
            pageData: {
                total: 0,
                current: 1,
            },
            tableData: [],
            tableCols: [{
                title: '结算单ID',
                key: 'id',
                align: 'center'
            }, {
                title: '开始时间',
                key: 'startTime',
                width: 110,
                render: (h, params) => {
                    let time = moment.unix(params.row.createTime);

                    return (
                        <div>{time.format('YYYY/MM/DD')}</div>
                    );
                },
                align: 'center'
            }, {
                title: '结束时间',
                key: 'endTime',
                width: 110,
                render: (h, params) => {
                    let time = moment.unix(params.row.endTime);

                    return (
                        <div>{time.format('YYYY/MM/DD')}</div>
                    );
                },
                align: 'center'
            }, {
                title: '应付金额',
                key: 'amount',
                align: 'center'
            }, {
                title: '到票金额',
                key: 'invoiceAmount',
                align: 'center'
            }, {
                title: '实付金额',
                key: 'paymentAmount',
                align: 'center'
            }, {
                title: '状态',
                key: 'statusName',
                align: 'center'
            }, {
                title: '支付时间',
                key: 'paymentTime',
                width: 110,
                render: (h, params) => {
                    if (!params.row.paymentTime) {
                        return <span>暂无</span>;
                    } else {
                        let time = moment.unix(params.row.paymentTime);

                        return (
                            <div>{time.format('YYYY/MM/DD')}</div>
                        );
                    }
                },
                align: 'center'
            }, {
                title: '备注',
                key: 'remark',
                align: 'center'
            }, {
                title: '操作',
                align: 'center',
                width: 100,
                render: (h, params) => {
                    return (
                        <action-group>
                            <i-button type="primary" size="small" onClick={() => this.edit(params.row)}>查看详情</i-button>
                        </action-group>
                    );
                }
            }],
            helpTip: '结算单每月16号系统自动生成，用于与财务结算本月之前的所有已对账账单，未对账以及发生退货的账单不会出现在结算单中。系统生成结算单后，请尽快按照应付金额提供相应发票，进行结算。'
        };
    },
    computed: {
        startTime() {
            let createTime = this.query.createTime;

            if (_.isEmpty(createTime)) {
                return 0;
            } else {
                return createTime[0] ? createTime[0].getTime() / 1000 : 0;
            }
        },
        endTime() {
            let createTime = this.query.createTime;

            if (_.isEmpty(createTime)) {
                return 0;
            } else {
                return createTime[1] ? createTime[1].getTime() / 1000 : 0;
            }
        }
    },
    created() {
        this.candidateListService = new CandidateListService();
    },
    mounted() {
        this.search();
    },
    methods: {
        filterValues() {
            let params = {
                pageNo: this.pageData.current,
                pageSize: 10,
                id: +this.query.id,
                productSku: +this.query.productSku,
                status: +this.query.status,
                startTime: this.startTime,
                endTime: this.endTime
            };

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

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

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

            this.candidateListService.clearingList(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();
        },
        edit(row) {
            this.$router.push({
                name: 'kol.settlement.detail',
                params: {
                    id: row.id
                }
            });
        },
        exportData() {
            let params = {};
            let temp = [];

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

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

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

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

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

.help-tooltip {
    .ivu-tooltip-inner {
        max-width: 600px;
        white-space: normal;
    }

    .tip {
        margin-left: 10px;
        color: #00b0ff;
        cursor: pointer;
        text-decoration: underline;

        &:before {
            display: inline-block;
            content: "?";
            font-size: 12px;
            height: 12px;
            width: 12px;
            color: #fff;
            line-height: 12px;
            margin-right: 4px;
            background-color: #00b0ff;
            border-radius: 6px;
            text-align: center;
        }
    }
}
</style>