<template>
    <LayoutBody>
        <LayoutFilter>
            <FilterItem :label="filters.sknCode.label">
                <Input v-model.trim="filters.sknCode.model"
                       :placeholder="filters.sknCode.holder"></Input>
            </FilterItem>
            <FilterItem :label="filters.prodCode.label">
                <Input v-model.trim="filters.prodCode.model"
                       :placeholder="filters.prodCode.holder"></Input>
            </FilterItem>
            <FilterItem :label="filters.prodName.label">
                <Input v-model.trim="filters.prodName.model"
                       :placeholder="filters.prodName.holder"></Input>
            </FilterItem>
            <FilterItem :label="filters.prodBarCode.label">
                <Input v-model.trim="filters.prodBarCode.model"
                       :placeholder="filters.prodBarCode.holder"></Input>
            </FilterItem>

            <FilterItem label="选择类目">
                <SelectCategory :value="categoryValue" @select-change="sortChange"></SelectCategory>
            </FilterItem>

            <FilterItem label="选择品牌">
                <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>
            </FilterItem>
            <FilterItem :label="filters.stockStatus.label">
                <Select v-model.trim="filters.stockStatus.model">
                    <Option v-for="option in filters.stockStatus.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </FilterItem>
            <FilterItem>
                <Button type="primary" @click="filterSearch">筛选</Button>
                <Button @click="clearFilter">清空条件</Button>
            </FilterItem>
        </LayoutFilter>

        <LayoutList>
            <Table border :context="self" :columns="tableCols" :data="tableData" @on-selection-change="selectChange"></Table>
            <Page :total="pageData.total" :current="pageData.current"
                  @on-change="pageChange" :page-size="20" show-total></Page>
        </LayoutList>

        <EditStore ref="showStoreEdit"></EditStore>
    </LayoutBody>
</template>

<script>
    import _ from 'lodash';
    import service from 'jit-service';
    import {SelectBrand, SelectCategory} from 'components/select';
    import {CellImage, CellInfo} from 'components/cell';
    import EditStore from './views/edit-store';
    import {filterFields, initialFields, tableCols, tableData, pageData} from './store';

    export default {
        data() {
            return {
                self: this,
                tableCols,
                tableData,
                pageData,
                filters: '',
                batchOffSale: [],
                useFilterSign: false,
                categoryValue: [],
            }
        },
        created() {
            this.filters = JSON.parse(initialFields);
        },
        methods: {
            editStore(skn) {
                this.$refs.showStoreEdit.show(skn);
            },
            filterParams() {
                const fts = this.filters;
                const data = {
                    productSkn: fts.sknCode.model,
                    factoryCode: fts.prodCode.model,
                    productName: fts.prodName.model,
                    skuFactoryCode: fts.prodBarCode.model,
                    maxSortId: fts.sort.first.model,
                    middleSortId: fts.sort.second.model,
                    smallSortId: fts.sort.third.model,
                    brandId: fts.brand.model != -1 ? fts.brand.model : null,
                    stock: fts.stockStatus.model != -1 ? this.filters.stockStatus.model : null
                };

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

                this.useFilterSign = true;
                this.pageData.current = 1;

            },
            clearFilter() {
                this.filters = JSON.parse(initialFields);
                this.useFilterSign = false;
                this.pageData.current = 1;
                this.categoryValue = [];
            },
            reloadList() {
                let params = {};

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

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

                this.pageData.current = 1;
            },
            updateStore(data) {
                _.each(data.list, (item) => {
                    item.changePrice = false;
                    item._disabled= item.auditStatus === 1;
                });

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

                let params = {};

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

                _.merge(params, {
                    page,
                    size: 20,
                    productStatusStr: 1
                });
            },
            selectChange(selection) {
                this.batchOffSale = selection;
            }
        },
        components: {
            SelectBrand,
            SelectCategory,
            CellImage,
            CellInfo,
            EditStore
        }
    }
</script>

<style lang="scss">
    .btn-row-space {
        margin-top: 10px;
    }
</style>