<template>
    <div class="stat-shop">
        <layout-body>
            <p slot="title">商品看板</p>
            <div class="box-filter" :inline="true" :col="1">
                <Row>
                    <Col span="2">选择品牌:</Col>
                    <Col span="6">
                        <Select v-model="brandId" style="width: 200px;">
                            <Option value="0">请选择品牌</Option>
                            <Option v-for="item in brandList" :value="item.id" :key="item.id">
                                {{item.brandName}}
                            </Option>
                        </Select>
                    </Col>
                    <Col span="2">选择类目:</Col>
                    <Col span="6">
                        <select-category :value="categoryValue" @select-change="sortChange"></select-category>
                    </Col>
                    <Col span="2">货品年季:</Col>
                    <Col span="6">
                        <Select v-model="goodsYearsValue" style="width: 120px;">
                            <Option value="0">请选择年</Option>
                            <Option v-for="item in goodsYearsList" :value="item.value" :key="item.value">
                                {{item.name}}
                            </Option>
                        </Select>
                        <Select v-model="goodsSeasonsValue" style="width: 120px;">
                            <Option value="0">请选择季</Option>
                            <Option v-for="item in goodsSeasonsList" :value="item.value" :key="item.value">
                                {{item.name}}
                            </Option>
                        </Select>
                    </Col>
                </Row>
                <Row>
                    <Col span="2">时间:</Col>
                    <Col span="6">
                        <Date-picker
                        type="daterange"
                        v-model="dateRange"
                        format="yyyy-MM-dd"
                        placeholder="选择开始结束日期"></Date-picker>
                    </Col>
                    <Col span="6">
                        <Poptip trigger="hover" placement="bottom-end">
                            <div slot="content">
                                * 查询的时间跨度不得超过30天
                            </div>
                            <Button type="primary" @click="list">筛选</Button>
                        </Poptip>
                        <Poptip trigger="hover" placement="bottom-end">
                            <div slot="content">
                                * 仅支持历史数据，时间跨度不得超过30天
                            </div>
                            <Button type="primary" @click="exportFile">导出</Button>
                        </Poptip>
                    </Col>
                </Row>

            </div>
            <layout-list>
                <Table border :columns="tableCols" :data="tableData"></Table>
                <Page :total="pageData.total" :current="pageData.current"
                      @on-change="pageChange" :page-size="20" show-total></Page>
            </layout-list>
        </layout-body>
    </div>
</template>

<script>
    import moment from 'moment';
    import InventoryStore from './store';
    import InventoryService from 'services/inventory/inventory-service';

    export default {
        data() {
            return InventoryStore.call(this);
        },
        created() {
            this.inventoryService = new InventoryService();
        },
        mounted() {
            this.loadData();
        },
        watch: {
            dateRange(newDate) {
                if (!Array.isArray(newDate)) {
                  newDate = [];
                }
                if (!newDate[0]) {
                  newDate[0] = moment().format('YYYY-MM-DD');
                }
                if (!newDate[1]) {
                  newDate[1] = moment().format('YYYY-MM-DD');
                }
                this.beginDate = moment(Array.isArray(newDate) ? newDate[0] : newDate).format('YYYY-MM-DD');
                this.endDate = moment(Array.isArray(newDate) ? newDate[1] : newDate).format('YYYY-MM-DD');
//                this.day = this.beginDate === this.endDate === this.today ? '' : this.beginDate;
                this.pageData.current = 1;
            },
        },
        methods: {
            loadData() {
              this.addGoodsYears();
              this.getBrandList();
              this.list();
            },
            changeLimit(limit) {
                this.dateRange = [this[`day${limit}`], this.today];
                this.pageData.current = 1;
            },
            pageChange(page) {
                this.pageData.current = page;
                this.list();
            },
            addGoodsYears() {
                let date = new Date();
                let startYear = 2018;
                let yearList = [];

                for (let i = date.getFullYear(); i > startYear; i--) {
                    yearList.push({
                        name: i.toString() + '年',
                        value: i
                    })
                }

                this.goodsYearsList = yearList;
            },
            getBrandList() {
                return this.inventoryService.queryBrandsByShopId().then(result => {
                    this.brandList = result.data;
                })
            },
            sortChange(sort) {
              this.maxSortId = sort.max;
              this.middleSortId = sort.mid;
              this.smallSortId = sort.min;
            },
            filterParams() {
                let pageNum = this.pageData.current;
                let pageSize = this.pageData.pageSize;
                let brandId = parseInt(this.brandId) ? {brandId: this.brandId} : {};
                let goodYear = parseInt(this.goodsYearsValue) ? {goodYear: this.goodsYearsValue} : {};
                let goodSeason = parseInt(this.goodsSeasonsValue) ? {goodSeason: this.goodsSeasonsValue} : {};
                let smallSortId = parseInt(this.smallSortId) ? {smallSortId: this.smallSortId} : {};

                let begin = this.beginDate;
                let end = this.endDate;

                return Promise.resolve(Object.assign({}, {
                    pageNum,
                    pageSize,
                    begin,
                    end
                }, brandId, goodYear, goodSeason, smallSortId));
            },
            list() {
                this.$Loading.start();

                return this.filterParams().then(params => {
                    return this.inventoryService.queryProductInvoicingOverview(params)
                }).then(result => {
                    if (!result.data) {
                        result.data = {
                            pageNo: 1,
                            pageSize: 1,
                            totalCount: 1,
                            totalPage: 1,
                            records: []
                        }
                    }
                    this.pageData.total = result.data.totalCount;
                    this.pageData.current = result.data.pageNo;
                    this.tableData = result.data.records;
                    this.$Loading.finish();
                }).catch(() => {
                    this.$Loading.finish();
                });
            },
            exportFile() {
                let param = {};

                param.begin = this.beginDate;
                param.end = this.endDate;
                param.platform = '1,2,3,4';
                if (this.brandId && parseInt(this.brandId)) {
                    param.brandId = this.brandId;
                }
                if (this.goodsYearsValue && parseInt(this.goodsYearsValue)) {
                  param.goodYear = this.goodsYearsValue;
                }

                if (this.goodsSeasonsValue && parseInt(this.goodsSeasonsValue)) {
                  param.goodSeason = this.goodsSeasonsValue;
                }

                if (this.smallSortId && parseInt(this.smallSortId)) {
                  param.smallSortId = this.smallSortId;
                }

                const href = '/Api/platform/exportProductInvoicingOverview?queryConf=' +
                    JSON.stringify(param);

                window.open(href, '_blank');
            }
        }
    };
</script>

<style lang="scss">
    .stat-shop {
        .ivu-tabs-tabpane {
            height: 400px;
            position: relative;
        }
    }

    .layout-container {
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;

        .layout-filter .line {
            border-top: none;
            margin-bottom: 0;
        }
    }

    .shop-card {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .box-title {
        font-weight: 700;
        color: #495060;
        font-size: 16px;
        line-height: 22px;
        margin: 5px;

        &:before {
            content: " ";
            display: inline-block;
            width: 5px;
            margin-right: 2px;
            height: 22px;
            vertical-align: top;
            background-color: #999;
        }
    }

    .box-item {
        width: 90%;
        height: 50px;
        padding: 0 0 0 15px;
        line-height: 50px;
        font-size: 14px;
        overflow: hidden;
        border-radius: 5px;
        color: #fff;
        margin-bottom: 10px;

        .box-item-label {
            display: inline-block;
            min-width: 75px;
            vertical-align: top;
            font-weight: normal;
        }

        .box-item-value {
            font-size: 20px;
            font-weight: 600;
        }

        i {
            display: inline-block;
            width: 20px;
            height: 20px;
            font-size: 22px;
            text-align: center;
            margin-top: -7px;
            vertical-align: middle;
            margin-right: 3px;
        }
    }

    .box-filter {
        .ivu-date-picker {
            margin-left: 0;
            width: 220px !important;
        }

        .ivu-col {
            height: 32px;
            line-height: 32px;
            text-align: center;
            margin-bottom: 20px;
        }

        .ivu-btn {
            margin: 0 10px;
        }

        .ivu-cascader {
            max-width: 220px;
        }

        .quick {
            display: inline-block;
            margin-left: 20px;
            margin-right: 50px;

            a {
                margin-right: 5px;
            }
        }

        .brand-select-container {
            display: inline-block;
            width: 280px;
        }
        margin-bottom: 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    .ivu-table-cell {
        padding-left: 6px;
        padding-right: 6px;
    }


</style>