<template>
    <layout-body>
        <layout-filter>
            <filter-item :label="filters.orderNo.label">
                <Input v-model.trim="filters.orderNo.model"
                       :placeholder="filters.orderNo.holder" :maxlength="9"></Input>
            </filter-item>
            <filter-item :label="filters.orderTime.label">
                <Date-picker type="daterange"
                    placeholder="选择日期"
                    @on-change="dateChange"
                    v-model="filters.orderTime.model">
                </Date-picker>
            </filter-item>
            <filter-item>
                <Button type="primary" @click="filterSearch">筛选</Button>
                <Button @click="clearFilter">清空条件</Button>
            </filter-item>
        </layout-filter>
        <layout-list>
            <Table border :columns="columns" :data="dataList"></Table>
            <Page :total="page.total" :current="page.current"
                  @on-change="pageChange" :page-size="20" show-total></Page>
        </layout-list>
    </layout-body>
</template>
<script>
    import _ from 'lodash';
    import moment from 'moment';
    import allotStore from './store';
    import TradeService from 'services/trade/trade-service';

    export default {
        data() {
            return allotStore.apply(this);
        },
        created() {
            this.tradeService = new TradeService();
            this.allotList(this.filterValues());
        },
        methods: {
            filterValues() {
                const values = {
                    pageNo: 1,
                    pageSize: 20
                };
                const filters = this.filters;

                if (this.enableFilter) {
                    const keyMap = {
                        id: 'orderNo',
                        endTime: 'endTime',
                        startTime: 'startTime'
                    };

                    _.each(keyMap, (val, key) => {
                        values[key] = filters[val].model;
                    });

                    const sT = values.startTime;
                    const eT = values.endTime;

                    if (sT && moment(sT).isValid()) {
                        values.startTime = +moment(sT).format('X');
                    } else {
                        values.startTime = '';
                    }

                    if (eT && moment(eT).isValid()) {
                        values.endTime = +moment(eT).add(1, 'days').format('X');
                    } else {
                        values.endTime = '';
                    }
                }

                return values;
            },
            filterSearch() {
                this.page.current = 1;
                this.enableFilter = true;
                this.allotList(this.filterValues());
            },
            clearFilter() {
                this.page.current = 1;
                this.enableFilter = false;
                this.filters.orderNo.model = '';
                this.filters.orderTime.model = '';
                this.filters.startTime.model = '';
                this.filters.endTime.model = '';
                this.allotList(this.filterValues());
            },
            allotList(params) {
                if (typeof params.id !== 'undefined' && !_.isFinite(+params.id)) {
                    this.$Message.error('调拨单号只能是数字', 3);
                    return;
                }

                this.$Loading.start();
                this.tradeService.allotList(params)
                    .then(res => {
                        this.$Loading.finish();
                        this.resolveData(res.data);
                    });
            },
            reloadList() {
                let params = {};

                if (this.enableFilter) {
                    params = this.filterValues();
                }

                this.allotList(params);
                this.page.current = 1;
            },
            resolveData(data) {
                this.dataList = data.records;
                this.page.total = data.totalCount;
            },
            pageChange(page) {
                let params;

                params = this.filterValues();
                params.pageNo = page;
                this.page.current = page;
                this.allotList(params);
            },
            dateChange(date) {
                this.filters.startTime.model = date[0];
                this.filters.endTime.model = date[1];
            },
            goSend(no) {
                this.$router.push({
                    name: 'trade.allot.undone',
                    query: { no }
                });
            }
        },
        components: {}
    };
</script>

<style lang="scss">
    .lack-column,
    .cancel-column {
        .red-text {
            color: #f00;
        }
    }
</style>