<template>
    <div class="un-done">
        <LayoutFilter>
            <FilterItem :label="filters.orderNo.label">
                <Input v-model.trim="filters.orderNo.model"
                       :placeholder="filters.orderNo.holder"></Input>
            </FilterItem>
            <FilterItem :label="filters.prodCode.label">
                <Input v-model.trim="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="date" 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>

        <LayoutAction>
            <Button type="primary" @click="deliver">发货</Button>
        </LayoutAction>

        <LayoutList>
            <Table border :context="self" :columns="table.cols" :data="table.list"
                   :row-class-name="rowClassName" @on-selection-change="selectChange"></Table>
            <Page :total="page.total" :current="page.current"
                  @on-change="pageChange" :page-size="20" show-total></Page>
        </LayoutList>

        <ModalDeliver
            ref="deliverModal"
            :deliver-rows="deliverRows"
            @deliver-success="deliverSuccess">
        </ModalDeliver>
        <ModalStockOut
            ref="stockOutModal"
            @upload-success="uploadSuccess">
        </ModalStockOut>
    </div>
</template>

<script>
    import _ from 'lodash';
    import moment from 'moment';
    import service from 'trade-service';
    import Store from '../store/undone';
    import { ModalDeliver, ModalStockOut } from 'components/modal' ;
    import { CellPrdInfo, CellDispatch, CellDeliver, CellStockOut, CellSkuImage } from '../components';

    export default {
        name: 'TabUndone',
        data() {
            return {
                self: this,
                filters: {},
                page: {},
                table: {},
                useFilterSign: false,
                showOutStock: false,
                deliverRows: []
            };
        },
        created() {
            const store = Store();

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

            const params = {
                pageNo: 1
            };

            this.productList(params);
        },
        methods: {
            params() {
                let data = {
                    pageNo: 1
                };

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

                const mapKeys = {
                    proReqFormId: 'orderNo',
                    productSkn: 'prodCode',
                    sknFactoryCode: 'merChantCode',
                    skuFactoryCode: 'prodBarCode',
                    startTime: 'orderTime',
                    endTime: 'orderTime',
                    isOvertime: 'prodStatus'
                };

                let modelVal;
                _.each(mapKeys, (v, k) => {
                    modelVal = this.filters[v].model;
                    if ((modelVal+'').length) {
                        data[k] = this.filters[v].model;
                    }
                });

                const ot = data.isOvertime;
                const date = data.startTime;

                if (date && moment(date).isValid()) {
                    data.startTime = +moment(date).format('X');
                    data.endTime = +moment(date).add(1, 'days').format('X');
                } else {
                    data.endTime = '';
                    data.startTime = '';
                }
                data.isOvertime = ot === -1 ? '' : ( ot === 1 ? 'N' : 'Y');

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

                return data;
            },
            productList(params) {
                service.allotPurchaseList(
                    _.merge(params || {}, {
                        statusList: [1],
                        pageSize: 20
                    }))
                    .then(res => {
                        this.processData(res.data);
                    });
            },
            processData(data) {
                const fmt = 'YYYY-MM-DD HH:mm:ss';
                const list = data.records;

                _.each(list, (v, i) => {
                    v._rowIndex = i; // 当前行index
                    v._disabled = v.isOvertime === 'Y';
                    v.createTime = moment(v.createTime).format(fmt);
                    v._needDeliver = v.buyingNums - v.lackNum - v.shipmentsNums; // 当前需发数
                });

                this.table.list = list;
                this.page.total = data.totalCount;
            },
            filterSearch() {
                this.useFilterSign = true;
                const params = this.params();
                this.productList(params);
                this.page.current = 1;
            },
            clearFilter() {
                this.filters = Store().filters;
                this.useFilterSign = false;
                this.productList(this.params());
                this.page.current = 1;
            },
            pageChange(page) {
                let params = this.params();
                params.pageNo = page;
                this.productList(params);
                this.page.current = page;
            },
            selectChange(rows) {
                this.deliverRows = rows;
            },
            deliverChange(data) {
                const index = data.index;
                const value = data.value;
                this.table.list[index]._inputDeliverNum = +value;

                _.each(this.deliverRows, item => {
                    if (item._rowIndex === index) {
                        item._inputDeliverNum = value;
                    }
                });
            },
            deliver() {
                if (this.checkDeliver()) {
                    this.$refs.deliverModal.show();
                }
            },
            checkDeliver() {
                const rows = this.deliverRows;
                const len = rows.length;

                if (!len) {
                    this.$Message.error('请勾选要发货的订单');
                    return false;
                }

                let invalidRows = [];
                _.each(rows, (v) => {
                    if (!v._inputDeliverNum ||
                        !_.isFinite(+v._inputDeliverNum) ||
                        v._inputDeliverNum > v._needDeliver) {
                        invalidRows.push(i.productSku);
                    }
                });

                if (invalidRows.length) {
                    let sku = '';

                    _.each(invalidRows, (v) => {
                         sku += v;
                    });
                    this.$Message.error(`请输入大于0且不大于当前需发数的发货数字`, 5)
                    return false;
                }

                return true;
            },
            deliverSuccess() {
                this.$Message.success('发货成功');
                this.productList(this.params());
                this.page.current = 1;
            },
            setModel(k, v) {
                this.filters[k].model = v;
            },
            dateChange(date) {
                this.setModel('orderTime', date);
            },
            rowClassName(row) {
                if (row.isOvertime === 'Y') {
                    return 'over-time';
                }
                return '';
            },
            lackNumChange(data) {
                const i = data.index;
                const v = data.value;
                this.table.list[i].inputLackNum = +v;
            },
            showUploadModal(index) {
                const row = this.table.list[index];
                const inputLackNum = row.inputLackNum;
                const needDeliver = row._needDeliver;

                if (!inputLackNum || inputLackNum > needDeliver) {
                    this.$Message.error('请输入缺货数量,且缺货数量不能大于当前需发数', 3);
                    return;
                }
                this.$refs.stockOutModal.show(row);
            },
            uploadSuccess() {
                this.$Message.success('上传缺货成功');
                this.productList(this.params());
                this.page.current = 1;
            },
            exportList() {
                const href = "/Api/erp/allotExportForUnSend"
                window.open(href, '_blank');

            }
        },
        components: {
            CellPrdInfo,
            CellDispatch,
            CellDeliver,
            CellStockOut,
            CellSkuImage,
            ModalStockOut,
            ModalDeliver
        }
    };
</script>

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

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