<template>
    <div class="un-done">
        <LayoutFilter>
            <FilterItem :label="filters.orderNo.label">
                <Input v-model.trim.number="filters.orderNo.model"
                       :placeholder="filters.orderNo.holder"></Input>
            </FilterItem>
            <FilterItem :label="filters.expressNo.label">
                <Input v-model.trim="filters.expressNo.model"
                       :placeholder="filters.expressNo.holder"></Input>
            </FilterItem>
            <FilterItem :label="filters.prodCode.label">
                <Input v-model.trim.number="filters.prodCode.model"
                       :placeholder="filters.prodCode.holder"></Input>
            </FilterItem>
            <FilterItem :label="filters.merChantCode.label">
                <Input v-model.trim="filters.merChantCode.model"
                       :placeholder="filters.merChantCode.holder"></Input>
            </FilterItem>
            <FilterItem :label="filters.prodBarCode.label">
                <Input v-model.trim="filters.prodBarCode.model"
                       :placeholder="filters.prodBarCode.holder"></Input>
            </FilterItem>
            <FilterItem :label="filters.orderTime.label">
                <Date-picker type="daterange"
                             placeholder="选择日期"
                             @on-change="dateChange"
                             :value="filters.orderTime.model"></Date-picker>
            </FilterItem>
            <FilterItem :label="filters.prodStatus.label">
                <Select v-model.trim="filters.prodStatus.model">
                    <Option v-for="option in filters.prodStatus.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </FilterItem>
            <FilterItem>
                <Button type="primary" @click="filterSearch">筛选</Button>
                <Button type="primary" @click="exportList">导出</Button>
                <Button @click="clearFilter">清空条件</Button>
            </FilterItem>
        </LayoutFilter>
        <LayoutList>
            <Table border :context="self" :columns="table.cols" :data="table.list"
                   :row-class-name="rowClassName"></Table>
            <Page :total="page.total" :current="page.current"
                  @on-change="pageChange" :page-size="20" show-total></Page>
        </LayoutList>
    </div>
</template>

<script>
    import _ from 'lodash';
    import moment from 'moment';
    import service from 'trade-service';
    import dataStore from '../store/done';
    import { CellPrdInfo, CellDispatch } from '../components';

    export default {
        name: 'TabDone',
        data() {
            return {
                self: this,
                filters: {},
                page: {},
                table: {},
                useFilterSign: false,
                showOutStock: true
            };
        },
        created() {
            const store = dataStore();

            this.filters = store.filters;
            this.page = store.page;
            this.table = store.table;

            const params = {
                pageNo: 1,
                pageSize: 20,
                statusList: [2, 3]
            };

            this.productList(params);
        },
        methods: {
            params() {
                let data = {
                    pageNo: 1,
                    pageSize: 20,
                    statusList: [2, 3]
                };

                if (!this.useFilterSign) {
                    return data;
                }

                _.assign(data, this.filterValues());
                data = _.pickBy(data, (v) => {
                    return (v + '').length;
                });

                return data;
            },
            filterValues() {
                let values = {};
                const keyMap = {
                    proRequisitionFormId: 'orderNo',
                    expressNumber: 'expressNo',
                    productSkn: 'prodCode',
                    sknFactoryCode: 'merChantCode',
                    skuFactoryCode: 'prodBarCode',
                    startTime: 'startTime',
                    endTime: 'endTime',
                    statusList: 'prodStatus',
                    isOvertime: 'prodStatus'
                };

                _.each(keyMap, (v, k) => {
                    values[k] = this.filters[v].model;
                });

                if (values.proRequisitionFormId !== 'undefined' &&
                    !_.isFinite(+values.proRequisitionFormId)) {
                    this.$Message.error('入库单号只能是数字', 3);
                    return;
                }

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

                const ot = values.isOvertime;
                const start = values.startTime;
                const end = values.endTime;
                const status = values.statusList;

                values.isOvertime = ot === -2 ? 'Y' : '';
                if (start && moment(start).isValid()) {
                    values.startTime = +moment(start).format('X');
                } else {
                    values.startTime = '';
                }

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

                if (status === -1) {
                    values.statusList = [2, 3];
                } else if (status === -2) {
                    values.statusList = [2];
                } else {
                    values.statusList = [+status];
                }

                return values;
            },
            productList(params) {
                service.allotPurchaseList(params)
                    .then(res => {
                        const fmt = 'YYYY-MM-DD HH:mm:ss';
                        const list = res.data.records;

                        _.each(list, i => {
                            i._colorName = i.factoryGoodsName || '';
                            i.createTime = moment.unix(i.createTime).format(fmt);
                        });

                        this.table.list = list;
                        this.page.total = res.data.totalCount;
                    });
            },
            filterSearch() {
                this.useFilterSign = true;
                this.productList(this.params());
                this.page.current = 1;
            },
            clearFilter() {
                this.filters = dataStore().filters;
                this.useFilterSign = false;
                this.productList(this.params());
                this.page.current = 1;
            },
            pageChange(page) {
                const params = this.params();
    
                this.page.current = page;
                params.pageNo = page;
                this.productList(params);
            },
            setModel(k, v) {
                this.filters[k].model = v;
            },
            dateChange(date) {
                this.setModel('startTime', date[0]);
                this.setModel('endTime', date[1]);
            },
            rowClassName(row) {
                if (row.isOvertime === 'Y') {
                    return 'over-time';
                }
                return '';
            },
            exportList() {
                let params = {};

                _.assign(params, this.filterValues());
                params = _.pickBy(params, (v) => {
                    return (v + '').length;
                });

                let temp = [];

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

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

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

<style lang="scss">
    .ivu-table .over-time td{
        background-color: #2db7f5;
        color: #fff;
    }

    .status-cell {
        .is-overtime {
            color: #ff0000;
            font-weight: bold;
        }
    }
</style>