<template>
    <layout-body>
        <layout-filter>

            <filter-item :label="filters.productSku.label">
                <Input v-model.trim="filters.productSku.model"
                       :placeholder="filters.productSku.holder" :maxlength="9"></Input>
            </filter-item>
            <filter-item :label="filters.factoryCode.label">
                <Input v-model.trim="filters.factoryCode.model"
                       :placeholder="filters.factoryCode.holder" :maxlength="100" ></Input>
            </filter-item>
            <filter-item :label="filters.upmCode.label">
                <Input v-model.trim="filters.upmCode.model"
                       :placeholder="filters.upmCode.holder" :maxlength="100" ></Input>
            </filter-item>

            <filter-item>
                <Button type="primary" @click="filterSearch">筛选</Button>
                <Button @click="clearFilters">清空条件</Button>
                <Button type="warning" @click="exportList">导出全部</Button>
                <em class="help" @click="editIntro"><Icon type="ios-help"></Icon>帮助说明</em>
            </filter-item>
        </layout-filter>

        <layout-list>
            <Table border :columns="tableCols" :data="tableData" :no-data-text="noFilteredDataText"></Table>
            <Page :total="pageData.total" :current="pageData.current"
                  @on-change="pageChange"  show-total></Page>
        </layout-list>

        <edit-intro ref="showImgEdit" @on-success="editSuccess"></edit-intro>

    </layout-body>
</template>

<script>
    import _ from 'lodash';
    import store from './store';
    import EditIntro from './components/edit-intro.vue';
    import InventoryService from 'services/repository/inventory-service';

    export default {
        created() {
            this.tableFalse = false;
            this.inventoryService = new InventoryService();
            this.noFilteredDataText = '请输入查询条件，进行数据筛选展示!';
        },
        data() {
            return store.call(this);
        },
        watch: {
            data() {
                this.filters.productSku.model = null;
                this.filters.factoryCode.model = null;
                this.filters.upmCode.model = null;

                this.pageData.current = 1;
            }

        },
        methods: {
            editIntro(row) {
                this.$refs.showImgEdit.show(row);
            },
            editSuccess() {
                this.filtersParams();
            },
            clearFilters() {
                this.filters.productSku.model = null;
                this.filters.factoryCode.model = null;
                this.filters.upmCode.model = null;

                this.pageData.current = 1;
                this.tableData = [];
                this.noFilteredDataText = '请输入查询条件，进行数据筛选展示!';
            },
            pageChange(page) {
                this.pageData.current = page;
                this.getInventory();
            },
            filtersParams() {
                let params = {};
                let productSku = this.filters.productSku.model || null;
                let factoryCode = this.filters.factoryCode.model || null;
                let upmCode = this.filters.upmCode.model || null;

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

                if (this.filters.productSku.model) {
                    if (this.isNumber(this.filters.productSku.model)) {
                        params.productSku = this.filters.productSku.model;
                    } else {
                        return Promise.reject('sku必须是数字');
                    }
                }

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

                return Promise.resolve({
                    productSku,
                    factoryCode,
                    upmCode,
                    pageNo,
                    pageSize
                });
            },
            filterSearch() {
                this.pageData.current = 1;
                this.getInventory();
            },
            getInventory() {
                this.$Loading.start();
                return this.filtersParams().then((params) => {

                    if (params.productSku || params.factoryCode || params.upmCode) {
                        this.noFilteredDataText = '暂无数据';
                        return this.inventoryService.list(params).then((result) => {
                            if (result.code === 200) {
                                this.pageData.total = result.data.totalCount;
                                this.pageData.current = result.data.pageNo;
                                this.tableData = result.data.records;
                            }
                            this.$Loading.finish();
                        }).catch((err) => {
                            this.$Loading.finish();
                            this.$Message.error(err);
                        });
                    } else {
                        this.tableData = [];
                        return;
                    }
                }).catch((err) => {
                    this.$Loading.finish();
                    this.$Message.error(err);
                });
            },
            isNumber(numStr) {
                const isNumber = /^[0-9]+$/;

                return isNumber.test(numStr);
            },
            exportList() {
                const keysMap = {
                    productSku: 'productSku',
                    factoryCode: 'factoryCode',
                    upmCode: 'upmCode',

                };
                const fields = this.filters;

                let temp = [];
                let params = {};

                _.each(keysMap, (val, key) => {
                    params[key] = fields[val].model;
                });

                params = _.pickBy(params, (v) => {
                    return (v + '').length;
                });

                _.each(params, (val, key) => {
                    if (val !== null) {
                        temp.push(`${key}=${val}`);
                    }
                });

                const href = `/Api/erp/exportStorageDetailList?${temp.join('&')}`;

                window.open(href, '_blank');
            },
        },
        components: {
            EditIntro
        }
    };
</script>
<style lang="scss">
.help {
    margin-left: 10px;
    padding-top: 7px;
    height: 32px;
    display: inline-block;
    vertical-align: top;
    text-decoration: underline;
    color: #2d8cf0;
    font-style: normal;
    cursor: pointer;

    i {
        font-size: 18px;
        vertical-align: top;
        margin-right: 5px;
    }
}
</style>