<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">
                <Category v-on:categoryChange="categoryChange"
                    :change-event="filters.category.changeEvent"
                    :field-label="filters.category.label"
                    :field-model="filters.category.model"
                    :label-span="filters.category.labelSpan"
                    :field-span="filters.category.fieldSpan"
                    :option-list="filters.category.options">
                </Category>
            </Col>
            <Col span="6">
                <Brand v-on:brandChange="brandChange"
                    :change-event="filters.brand.changeEvent"
                    :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">
                </Brand>
            </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">
                            <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">
                        <Option v-for="option in filters.stockStatus.options" :value="option.value" :key="option.value">{{option.label}}</Option>
                    </Select>
                    </Col>
                </Row>
            </Col>
        </Row>
        <Row class-name="filter-row">
            <Button type="primary" @click="filterSearch">筛选</Button>
            <Button>清空条件</Button>
        </Row>
        <div class="hr"></div>
        <div class="batch-row">
            <Checkbox>当前页全选</Checkbox><Button type="error" @click="batchSetOffSale">下架</Button>
        </div>
        <Table border :columns="tableCols" :data="tableData"></Table>
        <div class="list-page">
            <Page :total="pageData.total" @on-change="pageChange" :page-size="20" show-total></Page>
        </div>
    </div>
</template>

<script>
    import _ from 'lodash';
    import service from 'product-service';
    import {Brand, Category} from 'product/filter-select';
    import {filterFields, tableCols, tableData, pageData} from './store';

    export default {
        data() {
            return {
                tableCols,
                tableData,
                pageData,
                filters: filterFields
            }
        },
        created() {
            this.productList();
        },
        methods: {
            filterSearch() {
                const params = {
//                    productSkn: this.filters.sknCode.model,
//                    factoryCode: this.filters.factoryCode.model,
//                    productName: this.filters.productName.model,
//                    skuFactoryCode: this.filters.skuFactoryCode.model,
//                    maxSortId: this.filters.maxSortId.model,
//                    maxSortId: this.filters.maxSortId.model,
//                    middleSortId: this.filters.middleSortId.model,
//                    smallSortId: this.filters.smallSortId.model,
//                    auditStatus: this.filters.auditStatus.model,
//                    stock: this.filters.stock.model
                };

                this.productList(params);
            },
            productList(params) {
                service.productList(
                    _.merge(params || {}, {
                        shelfStatus: 1,
                        size: 20
                    }))
                    .then(res => {
                        let code = _.get(res, 'data.code');

                        if(code === 200) {
                            this.updateStore(res.data.data);
                        }
                    });
            },
            updateStore(data) {
                this.pageData.total = data.total;

                _.each(data.list, (item) => {
                    item.changePrice = false;
                });

                this.tableData = data.list;
            },
            categoryChange(val) {
                _.set(this.filters, 'category.model', val);
            },
            brandChange(val) {
                _.set(this.filters, 'brand.model', val);
            },
            pageChange(page) {
                let params = {
                    page,
                    size: 20,
                    productStatusStr: 1
                };

                this.productList(params);
            },

            setOffSale(skns) {
                const params = {
                    targetStatus: 0
                };

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

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

            batchSetOffSale() {
            },

            changePrice(row, index) {
                console.log(index)
                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
                    }
                });
            },
            priceChange(val) {
                console.log(val)

            }
        },
        components: {
            Brand,
            Category
        }
    }
</script>

<style lang="scss" scoped>
    .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;
    }
</style>