<template>
    <div>
        <Row :gutter="32">
            <i-col span="32">
                <row>
                    <row class="search-row">
                        <span class="left-15">选择日期</span>
                        <DatePicker v-model="dateRange" class="left-15 date-picker" type="daterange"
                                    placement="bottom-start"
                                    split-panels placeholder="请选择日期区间"></DatePicker>
                        <span class="left-15 txt-font-a">零售公司</span>
                        <Select v-model="companyId" filterable class="left-15 txt-font-a search-select"
                                @on-change="companySelect">
                            <Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                        <span class="left-15 txt-font-a">店铺</span>
                        <Select filterable placeholder="全部" v-model="shopId" class="left-15 txt-font-a search-select"
                                 @on-change="downShopChange">
                            <Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>

                        <Button type="primary" @click="searchCustomerDataBtnClick"
                                class="txt-font-a search-btn">查询
                        </Button>
                        <Button type="primary" @click="exportData"
                                class="txt-font-a search-btn">导出数据
                        </Button>

                    </row>
                    <row>
                        <Table ref="table"  :loading="loading" :columns="columns1" :data="data1" style="margin-top: 20px;" size="small"
                               no-data-text="--"></Table>
                    </row>
                    <Page :total="totalSize" :current="pageNum" :page-size="pageSize" show-elevator show-total
                          placement="top" @on-change="handlePage" class-name="ks-page"></Page>
                </row>
            </i-col>
        </Row>
    </div>
</template>
<script>
    import customerDetail from "../../services/datacenter/DataCenter";
    import zeroExtend from "../../services/customer/zeroExtend";
    import staff from "../../services/staff/staff";

    export default {
        inject: ['checkParamBlank'],
        data() {
            return {
              loading: false,
              userId:  JSON.parse(sessionStorage.getItem("loginInfo")).userId,
              //开始时间，结束时间
              totalSize: null,
              pageNum: 1,
              pageSize: 10,
              startDate: null,
              endDate: null,
              customerName: null,
              dateRange: [],
              customerList: [],
              companyList: [],
              companyId: 0,
              organizationalList: [],
              shopId: null,
              shopList: [],
              customerData: {},
              columns1: [
                {
                  title: '序号',
                  key: 'number'
                },
                {
                  title: '店铺',
                  key: 'storeName'
                },
                {
                  title: '店铺编号',
                  key: 'storeCode'
                },
                {
                  title: '工号',
                  key: 'staffCode'
                },
                {
                  title: '别名',
                  key: 'alias'
                },
                {
                  title: '手机号',
                  key: 'phone'
                },
                {
                  title: '所属零售公司',
                  key: 'companyName'
                },
                {
                  title: '新增客户数',
                  key: 'newContactCnt'
                },
                {
                  title: '聊天总数',
                  key: 'chatCnt'
                },
                {
                  title: '发消息数',
                  key: 'messageCnt'
                },
                {
                  title: '已回复聊天占比',
                  key: 'replyPercentage'
                },
                {
                  title: '平均回复时长',
                  key: 'avgReplyTime'
                },
                {
                    title: '删除/拉黑成员客户数',
                    key: 'negativeFeedbackCnt'
                }
                ],
                data1: [
                ]
            }
        },
        mounted: function () {
            this.getStorerData();
            this.getSelectList();
            this.downShopData();

        },
        methods: {
            /**基础数据：区域list、零售公司list、好友list*/
            getSelectList: function () {
                let that = this;
                let request = {
                    userId: this.userId,
                };
                zeroExtend.getSelectListRequest(request, function (data) {
                    if (data.data.code !== "0000") {
                        that.$Message.error("系统异常");
                    }
                    data = data.data.results;
                    if (data) {
                        that.organizationalList = data;
                        that.companyList = that.organizationalList.filter(item => item.level === 2);
                    }
                    //插入全部选项
                    that.insertAllOption();
                });
            },
            searchCustomerDataBtnClick: function () {
                this.totalSize = null;
                this.getStorerData();
            },
            exportData() {
                let that = this;
                this.loading = true;
                that.data1 = [];
                let stdate = null;
                let eddate = null;
                if (that.dateRange[0]) {
                    stdate = this.$moment(that.dateRange[0]).format("YYYY-MM-DD");
                    eddate = this.$moment(that.dateRange[1]).format("YYYY-MM-DD");
                }

                let request =
                    {
                        userId: that.userId,
                        startDate: stdate,
                        endDate: eddate,
                        companyId: that.changeData(that.companyId),
                        shopId: that.changeData(that.shopId),
                    };
                customerDetail.downloadstoreDataDetailExcel(request, null);

            },
            getStorerData: function () {
                let that = this;
                this.loading = true;
                that.data1 = [];
                let stdate = null;
                let eddate = null;
                if (that.dateRange[0]) {
                    stdate = this.$moment(that.dateRange[0]).format("YYYY-MM-DD");
                    eddate = this.$moment(that.dateRange[1]).format("YYYY-MM-DD");
                }

                let request =
                    {
                        userId: that.userId,
                        startDate: stdate,
                        endDate: eddate,
                        companyId: that.changeData(that.companyId),
                        shopId: that.changeData(that.shopId),
                        pageNum: that.pageNum,
                        pageSize: that.pageSize,
                    };
                customerDetail.storeDataDetail(request, function (data) {
                    that.data1 = [];
                    that.loading = false;
                    data = data.data.results;
                    if (data) {
                        that.totalSize = data.total;
                        for (let i = 0; i < data.list.length; i++) {
                            let entity = data.list[i];
                            if (entity) {
                                that.data1.push(entity);
                            }

                        }
                    }
                }, function () {
                    that.loading = false;
                });
            },
            //插入全部选项
            insertAllOption: function () {
                if (this.companyList.length === 0 || this.companyList[0].id !== 0) {
                    this.companyList.splice(0, 0, {"id": 0, "name": "全部"});
                }
                if (this.shopList.length === 0 || this.shopList[0].id !== 0) {
                    this.shopList.splice(0, 0, {"id": 0, "name": "全部"});
                }
            },
            downShopData: function (selected) {
                let that = this;
                let companyId = selected;
                if (!selected) {
                    companyId = that.companyId;
                }
                let customerIds = [];
                this.customerList = [];
                if (companyId === 0) {
                    //
                } else {
                    this.customerList = this.organizationalList.filter(item => item.parentId === companyId && item.level === 3);
                    this.insertAllOption();
                }
                customerIds = this.customerList.map(item => item.id);

                let request =
                    {userId: that.userId, customerIds: JSON.stringify(customerIds)};
                staff.downShopData(request, function (data) {
                    data = data.data.results;
                    if (data) {
                        that.shopList = [{"id": 0, "name": "全部"}];
                        for (let i = 0; i < data.length; i++) {
                            let entity = data[i];
                            if (entity) {
                                that.shopList.push(entity);
                            }
                        }
                    }
                })
            },
            //零售公司选择
            companySelect: function () {

                //加载店铺
                this.downShopData(this.companyId);

                this.selectedStore = 0;

                let that = this;
                that.downSellerData();
            },

            downShopChange: function () {

                let that = this;
                that.downSellerData();
            },
            changeData: function (value) {
                if (value == 0) {
                    return null;
                }
                return value;
            },
            //切页处理
            handlePage: function (value) {
                this.pageNum = value;
                this.getStorerData();
            },

            // /**商品mainList*/
            // getMainList: function(){
            //
            // },
            // //切页处理
            // handlePage:function (value) {
            //
            // },

        },
        computed: {
            options1() {
                let that = this;
                return {
                    disabledDate(date) {
                        if (that.endDate == null || that.endDate == "") {
                            return false;
                        } else {
                            return date && date.valueOf() > that.endDate;
                        }
                    }
                }

            },
            options2() {
                let that = this;
                return {
                    disabledDate(date) {
                        if (that.startDate == null || that.startDate == "") {
                            return false;
                        } else {
                            return date && date.valueOf() < that.startDate;
                        }
                    }
                }
            },
        }
    }
</script>
<style scoped>

    .left-15 {
        margin-left: 15px;
    }

    .txt-font-a {
        font-size: 16px;
    }

    .search-row {
        height: 90px;
        background: #f7f8fa;
        border: 1px solid #E8ECF2;
        line-height: 90px;
    }

    .date-picker {
        width: 240px;
    }

    .search-select {
        width: 190px;
    }

  .search-btn{
    margin-left: 20px;
  }

</style>
