<template>
    <layout-body>
        <layout-filter>
            <filter-item :label="filters.sknCode.label">
                <Input v-model.trim.number="filters.sknCode.model"
                        :placeholder="filters.sknCode.holder" :maxlength="9"></Input>
            </filter-item>
            <filter-item :label="filters.prodCode.label">
                <Input v-model.trim="filters.prodCode.model"
                                :placeholder="filters.prodCode.holder"></Input>
            </filter-item>
            <filter-item :label="filters.prodBarCode.label">
                <Input v-model.trim="filters.prodBarCode.model"
                    :placeholder="filters.prodBarCode.holder"></Input>
            </filter-item>
            <filter-item :label="filters.priceStatus.label">
                <Select v-model.trim="filters.priceStatus.model" clearable>
                    <Option v-for="option in filters.priceStatus.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </filter-item>
            <filter-item :label="filters.saleStatus.label">
                <Select v-model.trim="filters.saleStatus.model" clearable>
                    <Option v-for="option in filters.saleStatus.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </filter-item>
            <filter-item :label="filters.stockStatus.label">
                <Select v-model.trim="filters.stockStatus.model" clearable>
                    <Option v-for="option in filters.stockStatus.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </filter-item>
            <filter-item label="选择类目">
                <select-category :value="categoryValue"
                    @select-change="sortChange"></select-category>
            </filter-item>
            <filter-item>
                <Button type="primary" @click="filterSearch">筛选</Button>
                <Button @click="clearFilter">清空条件</Button>
            </filter-item>
        </layout-filter>

        <layout-action>
            <Button type="primary" @click="batchSetVip(1)">启用</Button>
            <Button type="error" @click="batchSetVip(2)">禁用</Button>
        </layout-action>

        <layout-list>
            <Table border :columns="columns"
                   @on-selection-change="selectChange" :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 {ProductService} from 'services/product';
    import {SelectCategory} from 'components/select';
    import {CellImage, CellInfo, CellPrice} from 'components/cell';
    import vipStore from './store';

    export default {
        data() {
            return {
                columns: [],
                dataList: {},
                page: {},
                filters: {},
                batchRows: [],
                submitting: false,
                enableFilter: false,
                categoryValue: []
            };
        },
        created() {
            this.productService = new ProductService();
            const vip = vipStore.apply(this);
            const params = this.filterValues();

            this.productList(params);
            this.filters = vip.filterFields;
            this.columns = vip.tableCols;
            this.dataList = vip.tableData;
            this.page = vip.pageData;
        },
        methods: {
            filterValues() {
                const values = {
                    page: 1,
                    size: 20
                };
                const fields = this.filters;
                const keyMap = {
                    productSkn: 'sknCode',
                    sknFactoryCode: 'prodCode',
                    status: 'saleStatus',
                    productVipStatus: 'priceStatus',
                    skuFactoryCode: 'prodBarCode',
                    stock: 'stockStatus',
                    maxSortId: 'maxSort',
                    middleSortId: 'midSort',
                    smallSortId: 'minSort'
                };
                const selectKeys = ['status', 'stock', 'productVipStatus'];

                if (this.enableFilter) {
                    _.each(keyMap, (val, key) => {
                        values[key] = fields[val].model;
                    });

                    _.each(selectKeys, key => {
                        const val = values[key];

                        if (!(val + '').length || _.isNull(val)) {
                            values[key] = null;
                        }
                    });
                }
                return values;
            },
            filterSearch() {
                let params = {};

                this.enableFilter = true;
                params = this.filterValues();
                this.productList(params);
                this.page.current = 1;
            },
            clearFilter() {
                let params = {};
                const store = vipStore.apply(this);
    
                this.filters = store.filterFields;
                this.enableFilter = false;
                params = this.filterValues();
                this.productList(params);
                this.page.current = 1;
                this.categoryValue = [];
            },
            productList(params) {
                if (_.isObject(params) &&
                    typeof params.productSkn !== 'undefined' &&
                    !_.isFinite(+params.productSkn)) {
                    this.$Message.error('SKN编码只能是数字', 3);
                    return;
                }

                this.$Loading.start();
                this.productService.vipProductList(params)
                    .then(res => {
                        this.$Loading.finish();
                        if (res.code === 200) {
                            this.resolveData(res.data);
                        }
                    });
            },
            reloadList() {
                let params = {};

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

                _.merge(params, {
                    page: 1,
                    size: 20
                });

                this.productList(params);
                this.page.current = 1;
            },
            resolveData(data) {
                this.dataList = data.list;
                this.page.total = data.total;
            },
            enableVipPrice(row) {
                const skn = row.productSKN;
                const canOpen = row.canOpenFlag;

                if (canOpen) {
                    this.setPriceStatus([{
                        skn
                    }], 1);
                } else {
                    this.$Message
                        .error('与平台签订vip会员价格相关合同后，才能开启', 3);
                }
            },
            disableVipPrice(row) {
                const skn = row.productSKN;

                this.setPriceStatus([{
                    skn
                }], 2);
            },
            batchSetVip(status) {
                let list = [];
                const vsMap = {
                    1: '启用',
                    2: '禁用'
                };
                const len = this.batchRows.length;

                if (len) {
                    _.each(this.batchRows, item => {
                        list.push({
                            skn: item.productSKN,
                            status: item.productVipStatus
                        });
                    });
                    this.setPriceStatus(list, status);
                } else {
                    this.$Message.error(`请先勾选要${vsMap[status]}的商品`, 3);
                }
            },
            setPriceStatus(list, status) {
                let sknList = [];
                let params = {};
                const vsMap = {
                    1: '启用',
                    2: '禁用'
                };

                list = _.filter(list, item => {
                    return item.status !== status;
                });

                if (!list.length) {
                    this.$Message.error(`当前选中的商品中，不包含要${vsMap[status]}的商品`, 3);
                    return;
                }

                _.each(list, item => {
                    sknList.push(item.skn);
                });
                params.productSknList = sknList;
                params.productVipStatus = status;
                if (sknList.length) {
                    if (this.submitting) {
                        return;
                    }
                    this.submitting = true;
                    this.productService.setVipPriceStatus(params)
                        .then(() => {
                            this.reloadList();
                            this.submitting = false;
                            this.$Message.success('VIP价格状态变更成功');
                        });
                }
            },
            sortChange({max, mid, min}) {
                this.filters.maxSort.model = max || null;
                this.filters.midSort.model = mid || null;
                this.filters.minSort.model = min || null;
            },
            pageChange(page) {
                let params = this.filterValues();

                params.page = page;
                this.page.current = page;
                this.productList(params);
            },
            selectChange(rows) {
                this.batchRows = rows;
            }
        },
        components: {
            SelectCategory,
            CellImage,
            CellInfo,
            CellPrice
        }
    };
</script>

<style lang="scss">

</style>