<template>
    <layout-body>
        <layout-filter>
            <filter-item :label="filters.productSKN.label">
                <Input v-model.trim="filters.productSKN.model"
                       :placeholder="filters.productSKN.holder" :maxlength="9"></Input>
            </filter-item>
            <filter-item :label="filters.prodName.label">
                <Input v-model.trim="filters.prodName.model"
                       :placeholder="filters.prodName.holder"></Input>
            </filter-item>
            <filter-item label="品牌">
                <select-brand v-model="filters.brandId.model"></select-brand>
            </filter-item>
            <filter-item label="品类">
                <select-category :value="categoryValue" @select-change="sortChange"></select-category>
            </filter-item>
            <filter-item :label="filters.isReply.label">
                <Select v-model.trim="filters.isReply.model" clearable>
                    <Option v-for="option in filters.isReply.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </filter-item>

            <!--<filter-item :label="filters.answerUserName.label">-->
                <!--<Input v-model.trim="filters.answerUserName.model"-->
                       <!--:placeholder="filters.answerUserName.holder"></Input>-->
            <!--</filter-item>-->
            <filter-item :label="filters.askTimeStr.label">
                <Date-picker type="datetimerange"
                             placeholder="选择日期和时间"
                             @on-change="askTimeChange"
                             v-model="filters.askTimeStr.model">
                </Date-picker>
            </filter-item>
            <filter-item :label="filters.answerTimeStr.label">
                <Date-picker v-model="filters.answerTimeStr.model"
                             type="datetimerange"
                             placeholder="选择日期和时间"
                             placement="bottom-end"
                             @on-change="answerTimeChange">
                </Date-picker>
            </filter-item>

            <filter-item>
                <Button type="primary" @click="filterSearch">筛选</Button>
                <Button @click="clearFilters">清空条件</Button>
            </filter-item>
        </layout-filter>

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

        <modal-answer-edit ref="showAnswerEdit" @on-success="answerEdit"></modal-answer-edit>
    </layout-body>
</template>

<script>
    import _ from 'lodash';
    import moment from 'moment';
    import feedbackStore from './store';
    import ModalAnswerEdit from './components/modal-answer-edit.vue';
    import FeedbackService from 'services/product/feedback-service';

    export default {
        data() {
            return feedbackStore.call(this);
        },
        created() {
            this.feedbackService = new FeedbackService();
        },
        mounted() {
            this.list();
        },
        methods: {
            editAnswer(row) {
                this.$refs.showAnswerEdit.show(row);
            },
            answerEdit() {
                this.list();
            },
            clearFilters() {
                this.filters.productSKN.model = null;
                this.filters.prodName.model = null;

                // this.filters.answerUserName.model = null;
                this.filters.isReply.model = null;
                this.filters.brandId.model = null;
                this.filters.askStartTime.model = '';
                this.filters.askEndTime.model = '';
                this.filters.answerStartTime.model = '';
                this.filters.answerEndTime.model = '';
                this.filters.askTimeStr.model = '';
                this.filters.answerTimeStr.model = '';
                this.filters.sort.first.model = null;
                this.filters.sort.second.model = null;
                this.filters.sort.third.model = null;
                this.categoryValue = [];
                this.pageData.current = 1;

                this.list();
            },
            pageChange(page) {
                this.pageData.current = page;
                this.list();
            },
            filtersParams() {
                let params = {};
                let fts = this.filters;
                let productSKN = fts.productSKN.model,
                    productName = fts.prodName.model,

                    // answerUserName = fts.answerUserName.model,
                    isReply = fts.isReply.model,
                    maxSortId = fts.sort.first.model,
                    middleSortId = fts.sort.second.model,
                    smallSortId = fts.sort.third.model,
                    brandId = fts.brandId.model === '' || fts.brandId.model === null ?
                        null : fts.brandId.model,
                    askStartTime = fts.askStartTime.model,
                    askEndTime = fts.askEndTime.model,
                    answerStartTime = fts.answerStartTime.model,
                    answerEndTime = fts.answerEndTime.model;

                let page = this.pageData.current;
                let size = this.pageData.size;

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

                params.size = this.pageData.size;
                params.page = this.pageData.current;

                return Promise.resolve({
                    params,
                    productSKN,
                    productName,

                    // answerUserName,
                    isReply,
                    maxSortId,
                    middleSortId,
                    smallSortId,
                    brandId,
                    askStartTime,
                    askEndTime,
                    answerStartTime,
                    answerEndTime,
                    page,
                    size
                });
            },
            list() {
                this.$Loading.start();

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

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

                    if (params) {
                        params.askStartTime = params.askStartTime ? getLocalTime(params.askStartTime) : null;
                        params.askEndTime = params.askEndTime ? getLocalTime(params.askEndTime) : null;
                        params.answerStartTime = params.answerStartTime ? getLocalTime(params.answerStartTime) : null;
                        params.answerEndTime = params.answerEndTime ? getLocalTime(params.answerEndTime) : null;
                    }

                    return this.feedbackService.list(params);
                }).then((result) => {
                    if (result.code === 200) {
                        this.pageData.total = result.data.total;
                        this.pageData.current = result.data.page;
                        this.tableData = result.data.list;
                    }
                    this.$Loading.finish();
                }).catch((err) => {
                    this.$Loading.finish();
                    this.$Message.error(err);
                });
            },
            filterSearch() {
                this.pageData.current = 1;
                this.list();
            },
            isNumber(numStr) {
                const isNumber = /^[0-9]+$/;

                return isNumber.test(numStr);
            },
            askTimeChange(time) {
                // 兼容: https://github.com/iview/iview/issues/973
                if (!_.isArray(time)) {
                    time = time.split(' - ');
                }
                if ((time[0] + '').length) {
                    this.filters.askStartTime.model = +moment(time[0]).format('X');
                    this.filters.askEndTime.model = +moment(time[1]).format('X');
                } else {
                    this.filters.askStartTime.model = '';
                    this.filters.askEndTime.model = '';
                }
            },
            answerTimeChange(time) {
                // 兼容: https://github.com/iview/iview/issues/973
                if (!_.isArray(time)) {
                    time = time.split(' - ');
                }
                if ((time[0] + '').length) {
                    this.filters.answerStartTime.model = +moment(time[0]).format('X');
                    this.filters.answerEndTime.model = +moment(time[1]).format('X');
                }
            },
            sortChange(sort) {
                this.filters.sort.first.model = sort.max;
                this.filters.sort.second.model = sort.mid;
                this.filters.sort.third.model = sort.min;
            }
        },
        components: {
            ModalAnswerEdit
        }
    };
</script>