<template>
    <layout-body>
        <layout-filter>
            <filter-item :label="filters.skuCode.label">
                <Input v-model.trim="filters.skuCode.model"
                       :placeholder="filters.skuCode.holder" :maxlength="9"></Input>
            </filter-item>
            <filter-item :label="filters.sknCode.label">
                <Input v-model.trim="filters.sknCode.model"
                       :placeholder="filters.sknCode.holder" :maxlength="9"></Input>
            </filter-item>
            <filter-item :label="filters.productName.label">
                <Input v-model.trim="filters.productName.model"
                       :placeholder="filters.productName.holder"></Input>
            </filter-item>
            <filter-item label="品牌">
                <select-brand v-model="filters.brand.model"></select-brand>
            </filter-item>
            <filter-item :label="filters.hasImage.label">
                <Select v-model.trim="filters.hasImage.model" clearable>
                    <Option v-for="option in filters.hasImage.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </filter-item>
            <filter-item :label="filters.createTime.label">
                <Date-picker type="datetimerange"
                             placeholder="选择日期和时间"
                             @on-change="createTimeChange"
                             v-model="filters.createTime.model">
                </Date-picker>
            </filter-item>
            <filter-item>
                <Button type="primary" @click="filterSearch">筛选</Button>
                <Button @click="clearFilter">清空条件</Button>
            </filter-item>
        </layout-filter>

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

    </layout-body>
</template>

<script>
    import _ from 'lodash';
    import moment from 'moment';
    import shareStore from './store';
    import ShareService from 'services/product/share-service';

    export default {
        data() {
            return shareStore.apply(this);
        },
        created() {
            this.shareService = new ShareService();
            this.list();
        },
        methods: {
            filterParams() {
                const values = {
                    page: 1
                };
                const fts = this.filters;
                const data = {
                    erpSkuId: fts.skuCode.model,
                    productSkn: fts.sknCode.model,
                    productName: fts.productName.model,
                    hasImage: fts.hasImage.model,
                    brand_id: fts.brand.model === '' || fts.brand.model === null ?
                        null : fts.brand.model,
                    beginTime: fts.beginTime.model,
                    endTime: fts.endTime.model,

                };

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

                this.useFilterSign = true;
                this.list(params);
                this.pageData.current = 1;
            },
            clearFilter() {
                this.reset();
                this.list();
            },
            reset() {
                _.each(this.filters, item => {
                    if (_.has(item, 'model')) {
                        item.model = '';
                    }
                });
                this.useFilterSign = false;
                this.pageData.current = 1;
            },
            createTimeChange(time) {
                // 兼容: https://github.com/iview/iview/issues/973
                if (!_.isArray(time)) {
                    time = time.split(' - ');
                }
                if ((time[0] + '').length) {
                    this.filters.beginTime.model = +moment(time[0]).format('X');
                    this.filters.endTime.model = +moment(time[1]).format('X');
                }
            },
            list(params) {
                this.$Loading.start();

                function getLocalTime(ns) {
                    let date = new Date(ns * 1000),
                        Y = date.getFullYear() + '-',
                        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-',
                        D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ',
                        h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':',
                        m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':',
                        s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();

                    return Y + M + D + h + m + s;
                }

                if (params) {
                    params.beginTime = params.beginTime ? getLocalTime(params.beginTime) : null;
                    params.endTime = params.endTime ? getLocalTime(params.endTime) : null;
                }

                this.shareService.list(
                    params || {})
                    .then(res => {
                        this.$Loading.finish();
                        if (res.code === 200) {
                            this.updateStore(res.data);
                        }
                    });
            },
            reloadList() {
                let params = {};

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

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

                this.list(params);
                this.pageData.current = 1;
            },
            updateStore(data) {
                _.each(data.list, item => {
                    item.shelveTime = item.shelveTime || '.';
                });

                this.tableData = data.list;
                this.pageData.total = data.total;
            },
            pageChange(page) {
                this.pageData.current = page;

                let params = {};

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

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

                this.list(params);
            }
        }
    };
</script>
<style lang="scss">
    .cell-img {
        width: 80px;
        background-size: 100%;
    }
</style>