<template>
    <layout-body class="supplement">
        <layout-filter ref="filter" :model="query">
            <filter-item label="SKN编码">
                <Input v-model.trim="query.productSkn" :maxlength="9"></Input>
            </filter-item>
            <filter-item label="商家编码">
                <Input v-model.trim="query.sknFactoryCode"></Input>
            </filter-item>
            <filter-item label="商品名称">
                <Input v-model.trim="query.productName"></Input>
            </filter-item>
            <filter-item label="商品条码">
                <Input v-model.trim="query.skuFactoryCode"></Input>
            </filter-item>
            <filter-item label="选择类目">
                <select-category v-model="category"></select-category>
            </filter-item>
            <filter-item label="选择品牌">
                <select-brand v-model="query.brandId"></select-brand>
            </filter-item>
            <filter-item label="库存情况">
                <select-stock-status v-model="query.stockStatus"></select-stock-status>
            </filter-item>
            <filter-item>
                <Button type="primary" @click="toSearch">筛选</Button>
                <Button @click="reset">清空条件</Button>
            </filter-item>
        </layout-filter>
        <layout-action>
            <Button type="primary" @click="openInvoice">添加到入库单</Button>
            <span class="brand-info" v-if="selectBrand.brandId">当前选择的品牌：{{selectBrand.brandName}}</span>
        </layout-action>
        <layout-list>
            <Table border
                ref="table"
                :columns="tableCols" 
                :data="tableData"
                @on-selection-change="selectChange"
                @on-select="selectSingle"></Table>
            <Page
                :total="pageData.total"
                :current="pageData.pageNo"
                @on-change="pageChange"
                :page-size="pageData.pageSize"
                show-total></Page>
        </layout-list>
        <modal-invoice ref="modalInvoice" @save="saveInvoice" :brand="selectBrand.brandId"></modal-invoice>
    </layout-body>
</template>

<script>
import _ from 'lodash';
import {SelectBrand, SelectCategory, SelectStockStatus} from 'components/select';
import {ModalInvoice} from './components';
import {InvoiceService} from 'services/repository';
import store from './store';

export default {
    data() {
        return store.apply(this);
    },
    created() {
        this.invoiceService = new InvoiceService();
        return this.toSearch();
    },
    methods: {
        toSearch() {
            this.pageData.pageNo = 1;
            return this.search();
        },
        search() {
            this.$Loading.start();
            this.resetSelectBrand();
            return this.invoiceService.supplementProductList(this.getParams()).then(res => {
                this.$Loading.finish();
                this.tableData = res.records;
                this.pageData.total = res.totalCount;
            }, () => {
                this.$Loading.finish();
            });
        },
        pageChange(page) {
            this.pageData.pageNo = page;
            return this.search();
        },
        getParams() {
            let params = Object.assign(this.query, {
                maxSortId: _.get(this.category, '[0].value'),
                middleSortId: _.get(this.category, '[1].value'),
                smallSortId: _.get(this.category, '[2].value')
            }, this.pageData);

            delete params.total;
            return _.pickBy(params, val => val);
        },
        reset() {
            this.category = [];
            this.$refs.filter.reset();
            this.toSearch();
        },
        resetSelectBrand() {
            this.selectBrand.brandId = 0;
            this.selectBrand.brandName = '';
        },
        selectChange(selection) {
            _.each(this.$refs.table.rebuildData, row => { // 更新rebuildData不会导致页面重新刷新
                if (_.some(selection, item => item.id === row.id)) {
                    if (row.num <= 0) {
                        row.num = 1;
                    }
                    row._checked = true;
                } else {
                    row.num = 0;
                    row._checked = false;
                }
            });
            this.checkBrand();
        },
        numChange(row, num) {
            if ((row.num > 0 && !row._checked) ||
                (row.num === 0 && row._checked)) {
                if (row.brandId !== this.selectBrand.brandId && this.selectBrand.brandId) { // 如果品牌不同就直接操作table的rebuilddata不会导致表格刷新
                    row.num = 0;
                    this.$Message.warning(`请选择品牌为：${this.selectBrand.brandName}的商品补货`);
                    return;
                }
                this.syncData();
                row._checked = num > 0;
                this.checkBrand();
            }
        },
        checkBrand() {
            let selection = _.filter(this.$refs.table.rebuildData, row => row._checked);

            if (selection.length > 0) {
                if (!this.selectBrand.brandId) {
                    this.selectBrand.brandId = _.head(selection).brandId;
                    this.selectBrand.brandName = _.head(selection).brandName;
                }
                let rmRows = _.remove(selection, row => row.brandId !== this.selectBrand.brandId);

                if (rmRows.length) {
                    this.syncData(); // 同步rebuildData和数据data，然后修改_checked重新渲染表格
                    _.each(this.tableData, row => {
                        if (_.some(rmRows, rmRow => rmRow.id === row.id)) {
                            row._checked = false;
                            row.num = 0;
                        }
                    });
                    this.$Message.warning(`请选择品牌为：${this.selectBrand.brandName}的商品补货`);
                }
            } else {
                this.resetSelectBrand();
            }
        },
        openInvoice() {
            if (!this.selectBrand.brandId) {
                this.$Message.warning('请先选择要补货的商品');
                return;
            }
            this.$refs.modalInvoice.show();
        },
        syncData() {
            this.tableData = this.$refs.table.rebuildData;
        },
        saveInvoice(invoiceId) {
            this.syncData();
            let goodsList = this.tableData.filter(row => row._checked).map(row => {
                return {
                    productSku: row.productSku,
                    num: row.num
                };
            });

            if (goodsList.length && invoiceId) {
                this.$Loading.start();
                return this.invoiceService.addGoods({
                    proRequisitionFormId: invoiceId,
                    goodsList
                }).then(res => {
                    this.$Loading.finish();
                    if (res.code === 200) {
                        this.$Notice.success({
                            title: '保存成功'
                        });
                        this.saveInvoiceAfter();
                    } else {
                        this.$Notice.error({
                            title: res.message
                        });
                    }
                }, () => {
                    this.$Loading.finish();
                });
            }
            this.$Message.warning('请选择商品和入库单');
        },
        saveInvoiceAfter() {
            this.resetSelectBrand();
            _.each(this.tableData, row => {
                row.num = 0;
                row._checked = false;
            });
        }
    },
    components: {
        SelectBrand,
        SelectCategory,
        SelectStockStatus,
        ModalInvoice
    }
};
</script>

<style lang="scss">
.supplement {
    .brand-info {
        color: #f90;
        font-size: 14px;
        margin-left: 20px;
    }
}
</style>