<template>
    <LayoutBody>
        <LayoutFilter>
            <FilterItem :label="filters.sknCode.label">
                <Input v-model.trim="filters.sknCode.model" :number="true"
                       :placeholder="filters.sknCode.holder" :maxlength="9"></Input>
            </FilterItem>
            <FilterItem label="选择类目">
                <SelectCategory :value="categoryValue" @select-change="sortChange"></SelectCategory>
            </FilterItem>

            <FilterItem label="选择品牌">
                <SelectBrand v-model="filters.brand.model"></SelectBrand>
            </FilterItem>

            <FilterItem>
                <Button type="primary" @click="filterSearch">筛选</Button>
                <Button type="warning" @click="showImportStore">导入库存</Button>
                <Button @click="clearFilter">清空条件</Button>
            </FilterItem>
        </LayoutFilter>

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

        <EditStore ref="showStoreEdit" @on-success="editSuccess"></EditStore>
        <ImportStore ref="showStoreImport" @on-success="editSuccess"></ImportStore>
    </LayoutBody>
</template>

<script>
    import _ from 'lodash';
    import service from 'jit-service';
    import {SelectBrand, SelectCategory} from 'components/select';
    import EditStore from './components/edit-store';
    import ImportStore from './components/import-store';
    import {tableCols, tableData, pageData} from './store';

    export default {
        data() {
            return {
                self: this,
                tableCols,
                tableData,
                pageData,
                categoryValue: [],
                filters: {
                    sknCode: {
                        label: 'SKN编码',
                        labelSpan: 6,
                        model: '',
                        holder: '',
                        fieldSpan: 18
                    },
                    brand: {
                        label: '选择品牌',
                        model: -1
                    },
                    maxSortId: null,
                    middleSortId: null,
                    smallSortId: null,
                }
            };
        },
        mounted() {
            this.getProduct();
        },
        methods: {
            editStore(row) {
                this.$refs.showStoreEdit.show(row);
            },
            editSuccess() {
                this.getProduct();
            },
            showImportStore() {
                this.$refs.showStoreImport.show();
            },
            filterParams() {
                let productSkn = this.filters.sknCode.model;
                let brandId = this.filters.brand.model === -1 ? null : this.filters.brand.model;
                let maxSortId = this.filters.maxSortId;
                let middleSortId = this.filters.middleSortId;
                let smallSortId = this.filters.smallSortId;

                let pageNo = this.pageData.current;
                let pageSize = this.pageData.pageSize;

                if (productSkn && !_.isNumber(productSkn)) {
                    this.$Message.error('SKN编码只能为数字');
                    return Promise.reject();
                }

                return Promise.resolve({
                    productSkn,
                    brandId,
                    maxSortId,
                    middleSortId,
                    smallSortId,
                    pageNo,
                    pageSize
                });
            },
            filterSearch() {
                this.getProduct();
            },
            clearFilter() {
                this.filters.sknCode.model = null;
                this.filters.brand.model = -1;
                this.filters.maxSortId = null;
                this.filters.middleSortId = null;
                this.filters.smallSortId = null;
                this.categoryValue = [];
                this.pageData.current = 1;

                this.getProduct();
            },
            pageChange(page) {
                this.pageData.current = page;
                this.getProduct();
            },
            getProduct() {
                return this.filterParams().then((params) => {
                    return service.listProduct(params).then((result) => {
                        if (result.code === 200) {
                            this.tableData = result.data.records;
                            this.pageData.total = result.data.totalCount;
                            this.pageData.current = result.data.pageNo;
                        }
                    });
                });
            },
            sortChange(sort) {
                this.filters.maxSortId = sort.max;
                this.filters.middleSortId = sort.mid;
                this.filters.smallSortId = sort.min;
            }
        },
        components: {
            SelectBrand,
            SelectCategory,
            EditStore,
            ImportStore
        }
    };
</script>

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