<template>
    <div class="onsale-list">
        <Row :gutter="24" class-name="filter-row">
            <Col span="6">
            <Row>
                <Col :span="filters.sknCode.labelSpan">
                <label class="field-label">{{filters.sknCode.label}}：</label>
                </Col>
                <Col :span="filters.sknCode.fieldSpan">
                <Input v-model="filters.sknCode.model" :placeholder="filters.sknCode.holder"></Input>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            <Row>
                <Col :span="filters.prodCode.labelSpan">
                <label class="field-label">{{filters.prodCode.label}}：</label>
                </Col>
                <Col :span="filters.prodCode.fieldSpan">
                <Input v-model="filters.prodCode.model" :placeholder="filters.prodCode.holder"></Input>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            <Row>
                <Col :span="filters.prodName.labelSpan">
                <label class="field-label">{{filters.prodName.label}}：</label>
                </Col>
                <Col :span="filters.prodName.fieldSpan">
                <Input v-model="filters.prodName.model" :placeholder="filters.prodName.holder"></Input>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            <Row>
                <Col :span="filters.prodBarCode.labelSpan">
                <label class="field-label">{{filters.prodBarCode.label}}：</label>
                </Col>
                <Col :span="filters.prodBarCode.fieldSpan">
                <Input v-model="filters.prodBarCode.model" :placeholder="filters.prodBarCode.holder"></Input>
                </Col>
            </Row>
            </Col>
        </Row>
        <Row :gutter="24" class-name="filter-row">
            <Col span="6">
            <SelectBrand @on-change="brandChange"
                   :field-label="filters.brand.label"
                   :field-model="filters.brand.model"
                   :label-span="filters.brand.labelSpan"
                   :field-span="filters.brand.fieldSpan"
                   :option-list="filters.brand.options">
            </SelectBrand>
            </Col>
            <Col span="6">
            <Row>
                <Col :span="filters.verifyStatus.labelSpan">
                <label class="field-label">{{filters.verifyStatus.label}}：</label>
                </Col>
                <Col :span="filters.verifyStatus.fieldSpan">
                <Select v-model="filters.verifyStatus.model" clearable>
                    <Option v-for="option in filters.verifyStatus.options" :value="option.value" :key="option.value">{{option.label}}</Option>
                </Select>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            <Row>
                <Col :span="filters.stockStatus.labelSpan">
                <label class="field-label">{{filters.stockStatus.label}}：</label>
                </Col>
                <Col :span="filters.stockStatus.fieldSpan">
                <Select v-model="filters.stockStatus.model" clearable>
                    <Option v-for="option in filters.stockStatus.options" :value="option.value" :key="option.value">{{option.label}}</Option>
                </Select>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            <Row>
                <Col :span="filters.publishStatus.labelSpan">
                <label class="field-label">{{filters.publishStatus.label}}：</label>
                </Col>
                <Col :span="filters.publishStatus.fieldSpan">
                <Select v-model="filters.publishStatus.model" clearable>
                    <Option v-for="option in filters.publishStatus.options" :value="option.value" :key="option.value">{{option.label}}</Option>
                </Select>
                </Col>
            </Row>
            </Col>
        </Row>
        <div class="filter-row">
            <SelectCategory :field-sort="filters.sort" @on-change="sortChange"></SelectCategory>
        </div>
        <Row class-name="filter-row">
            <Button type="primary" @click="filterSearch">筛选</Button>
            <Button @click="clearFilter">清空条件</Button>
        </Row>
        <div class="hr"></div>
        <div class="batch-row">
            <Button type="primary" @click="batchSetOnSale">启用</Button>
            <Button type="error" @click="batchSetOnSale">禁用</Button>
        </div>
        <Table border :context="self" :columns="tableCols" :data="tableData" @on-selection-change="selectChange"></Table>
        <div class="list-page">
            <Page :total="pageData.total" :current="pageData.current" @on-change="pageChange" :page-size="20" show-total></Page>
        </div>
        <SizeEdit></SizeEdit>
    </div>
</template>

<script>
    import _ from 'lodash';
    import service from 'product-service';
    import {SizeEdit} from 'product/size-edit';
    import {SelectBrand, SelectCategory} from 'product/filter-select';
    import {filterFields, initialFields, tableCols, tableData, pageData} from './store';

    export default {
        data() {
            return {
                self: this,
                tableCols,
                tableData,
                pageData,
                filters: filterFields,
                initialFilters: '',
                batchOffSale: [],
                useFilterSign: false
            }
        },
        created() {
            this.productList();
            this.initialFilters = JSON.stringify(filterFields);
        },
        methods: {
            filterParams() {
                const fts = this.filters;
                const data = {
                    productSkn: fts.sknCode.model,
                    factoryCode: fts.prodCode.model,
                    skuFactoryCode: fts.prodBarCode.model,
                    maxSortId: fts.sort.first.model,
                    middleSortId: fts.sort.second.model,
                    smallSortId: fts.sort.third.model,
                    isPublished: fts.publishStatus.model,
                    brandId: fts.brand.model != -1 ? fts.brand.model : null,
                    auditStatus: fts.verifyStatus.model != -1 ? fts.verifyStatus.model : null,
                    stock: fts.stockStatus.model != -1 ? this.filters.stockStatus.model : null
                };

                return data;
            },
            filterSearch() {
                const params = this.filterParams();

                this.useFilterSign = true;
                this.productList(params);
            },
            clearFilter() {
                this.filters = JSON.parse(this.initialFilters);
                this.productList();
                this.useFilterSign = false;
            },
            productList(params) {
                service.productList(
                    _.merge(params || {}, {
                        shelfStatus: 0,
                        size: 20
                    }))
                    .then(res => {
                    let code = _.get(res, 'data.code');

                if(code === 200) {
                    this.updateStore(res.data.data);
                }
            });
            },
            updateStore(data) {
                _.each(data.list, (item) => {
                    item.changePrice = false;
            });

                this.tableData = data.list;
                this.pageData.total = data.total;
                this.pageData.current = 1;
            },
            sortChange(sort) {
                this.filters.sort.first.model = sort.first;
                this.filters.sort.second.model = sort.second;
                this.filters.sort.third.model = sort.third;
            },
            brandChange(val) {
                _.set(this.filters, 'brand.model', val);
            },
            pageChange(page) {
                let params = {};

                if(this.useFilterSign) {
                    params = this.filterParams();
                }

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

                this.productList(params);
            },
            setOnSale(skns) {
                const params = {
                    targetStatus: 1
                };

                if(_.isArray(skns)) {
                    params['productSkns'] = `[${skns.join(',')}]`;
                } else {
                    params['productSkns'] = `[${skns}]`
                }

                service.setOnSale(params)
                    .then(res => {
                    this.$Message.success(res.data.message);
            });
            },

            batchSetOnSale() {
                if(!this.batchOffSale.length) {
                    return this.$Message.error('请选择要上架的商品');
                }

                let skns = [];

                _.each(this.batchOffSale, (item) => {
                    skns.push(item.productSkn);
                });

                this.setOnSale(skns);
            },
            changePrice(row) {
                row.changePrice = true;
            },
            updatePrice(row) {
                const index = row.lineIndex;
                const salesPrice = row.salesPrice;
                const productSkn = row.productSkn;

                const params = {
                    salesPrice,
                    productSkn
                };

                service.updateSalesPrice(params)
                    .then(res => {
                        this.tableData[index].salesPrice = salesPrice;
                        row.changePrice = false;
                        this.$Message.success(res.data.message);
                    })
            },
            editProduct(skn) {
                this.$router.push({
                    name: 'product.create.step1',
                    query: {
                        skn
                    }
                });
            },
            selectChange(selection) {
                this.batchOffSale = selection;
            }
        },
        components: {
            SelectBrand,
            SelectCategory,
            SizeEdit
        }
    }
</script>

<style lang="scss">
    .filter-row {
        margin-bottom: 20px;

    .field-label {
        line-height: 32px;
    }
    }

    .hr {
        border-top: 1px solid #eee;
        margin-bottom: 20px;
    }

    .batch-row {
        margin-bottom: 20px;
    }

    .list-page {
        float: right;
        margin-top: 20px;
    }

    .prd-img {
        max-height: 200px;
    }

    .action-btn-row {
        margin-top: 10px;
    }
</style>