<template>
    <div>
        <Row class="search-row">
            <i-col span="24" class="search-col">
                <Row class="row-style">
                    <span class="search-span">选择日期</span>
                    <DatePicker :option="dateOption" @on-change="onChangeDateLister" :value="selectDate"
                                type="daterange" split-panels
                                placeholder="请选择日期" class="date-picker"></DatePicker>
                    <span class="search-span">零售公司</span>
                    <Select v-model="selectedCompany" @on-change="storeOfCompany" filterable class="search-select">
                        <Option v-for="item in companyList" :value="item.id" :key="'gs' + item.id">{{ item.name }}
                        </Option>
                    </Select>
                    <span class="search-span">店铺</span>
                    <Select v-model="selectedStore" filterable @on-change="sellerOfStore" class="search-select">
                        <Option v-for="item in storeList" :value="item.id" :key="'dp' + item.id">{{ item.name }}
                        </Option>
                    </Select>

                    <span class="search-span">导购</span>
                    <Select v-model="selectedStaff" filterable class="search-select">
                        <Option v-for="item in staffList" :value="item.id" :key="'dg' + item.id">{{ item.name }}
                        </Option>
                    </Select>

                    <Button type="primary" @click="generalizeOfSeller" class="search-btn">查询</Button>

                    <div class="search-div-btn">
                        <Button type="primary" :loading="loading" @click="exportZeroExtend">导出数据</Button>
                    </div>
                </Row>
            </i-col>
        </Row>

        <Table :loading="tableLoading" :columns="columns1" :data="data1" style="margin-top: 20px;" ref="table"
               size="small"></Table>
        <Page :total="totalSize" :current="pageNum" :page-size="pageSize" show-elevator show-total
              placement="top" @on-change="handlePage" class-name="ks-page"></Page>
    </div>
</template>

<script>
    import IncreaseData from "../../services/generalize/IncreaseData";

    export default {
        name: "IncreaseDataStaff",
        data() {
            return {
                dateOption: {
                    disabledDate(date) {
                        return date && date.valueOf() < Date.now();
                    }
                },
                selectedCompany: null,
                companyList: [],
                selectedStore: null,
                storeList: [],
                selectedStaff: null,
                staffList: [],
                columns1: [
                    {
                        title: '序号',
                        key: 'index',
                        width: '80px'
                    },
                    {
                        title: '导购名称',
                        key: 'sellerName'
                    },
                    {
                        title: '工号',
                        key: 'sellerCode'
                    },
                    {
                        title: '所属店铺',
                        key: 'shopName',
                        width: '250px'
                    },
                    {
                        title: '店铺编码',
                        key: 'shopCode'
                    },
                    {
                        title: '所属零售公司',
                        key: 'companyName',
                        width: '250px'
                    },
                    {
                        title: '总好友数',
                        key: 'allCustomer'
                    },
                    {
                        title: '总好友数（去重）',
                        key: 'effectiveCustomer',
                        render: (h, params) => {
                            let that = this;
                            if (that.data1[params.index].effectiveCustomer != null) {
                                return h('div', [
                                    h('span', {}, that.data1[params.index].effectiveCustomer),
                                ])
                            } else {
                                return h('div', [
                                    h('span', {}, '0'),
                                ])
                            }

                        }
                    },
                    {
                        title: '新增好友数',
                        key: 'newCustomer'
                    },
                    {
                        title: '新增好友数（去重）',
                        key: 'newEffectiveCustomer'
                    },
                    {
                        title: '日增好友平均（去重）',
                        key: 'avgNewCustomer'
                    }
                ],
                data1: [],
                //分页内容
                totalSize: 0,
                pageNum: 1,
                pageSize: 10,
                selectDate: [],
                loading: false,
                tableLoading: false
            }
        },
        mounted: function () {
            let startDate = this.$moment(new Date()).add(-29, "day").format("YYYY-MM-DD");
            let endDate = this.$moment(new Date()).format("YYYY-MM-DD");
            this.selectDate.push(startDate);
            this.selectDate.push(endDate);
            this.allCompany();
            this.storeInit();
            this.sellerInit();
            this.generalizeOfSeller();
        },
        methods: {
            onChangeDateLister(date) {
                this.selectDate = date;
            },
            allCompany() {
                let that = this;
                let request = {
                    userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
                };
                this.companyList = [];
                IncreaseData.listOfRetailCompany(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询零售公司出错!");
                        return;
                    }
                    if (data.code === '0000') {
                        that.companyList.push({id: '-1', name: "全部"});
                        that.selectedCompany = "-1";
                        data.results.forEach(da => {
                            that.companyList.push(da);
                        })
                    }
                })
            },
            storeInit() {
                let that = this;
                let request = {
                    userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
                };
                this.storeList = [];
                IncreaseData.storeInit(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询零售公司的店铺出错!");
                        return;
                    }
                    if (data.code === '0000') {
                        that.storeList.push({
                            id: '-1',
                            name: "全部"
                        })
                        that.selectedStore = '-1';
                        data.results.forEach(da => {
                            that.storeList.push(da);
                        })
                    }
                })
            },
            sellerInit() {
                let that = this;
                let request = {
                    userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
                };
                this.staffList = [];
                IncreaseData.sellerInit(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询零售公司的店铺出错!");
                        return;
                    }
                    if (data.code === '0000') {
                        that.staffList.push({
                            id: '-1',
                            name: "全部"
                        });
                        that.selectedStaff = '-1';
                        data.results.forEach(da => {
                            that.staffList.push(da);
                        })
                    }
                })
            },
            storeOfCompany() {
                let that = this;
                this.selectedStore = "";
                let orgId = this.selectedCompany;
                if (this.selectedCompany === "-1") {
                    orgId = null;
                }
                let request = {
                    orgId: orgId
                };
                this.storeList = [];
                IncreaseData.listOfStoreByCompany(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询零售公司的店铺出错!");
                        return;
                    }
                    if (data.code === '0000') {
                        that.storeList.push({
                            id: '-1',
                            name: "全部"
                        });
                        that.selectedStore = '-1';
                        data.results.forEach(da => {
                            that.storeList.push(da);
                        })
                    }
                })
            },
            sellerOfStore() {
                let that = this;
                this.selectedStaff = "";
                let shopId = this.selectedStore;
                if (this.selectedStore === '-1') {
                    shopId = null;
                }
                let request = {
                    shopId: shopId
                };
                this.staffList = [];
                IncreaseData.listOfSellerByStore(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询零售公司的店铺出错!");
                        return;
                    }
                    if (data.code === '0000') {
                        that.staffList.push({
                            id: '-1',
                            name: "全部"
                        });
                        that.selectedStaff = '-1';
                        data.results.forEach(da => {
                            that.staffList.push(da);
                        })
                    }
                })
            },
            generalizeOfSeller() {
                this.tableLoading = true;
                if (this.selectDate[0] === "") {
                    this.$Message.info("请选择日期");
                    return
                }
                let that = this;
                let sellerId = this.selectedStaff;
                if (this.selectedStaff === "-1") {
                    sellerId = null;
                }
                let shopId = this.selectedStore;
                if (this.selectedStore === "-1") {
                    shopId = null;
                }
                let orgId = this.selectedCompany;
                if (this.selectedCompany === "-1") {
                    orgId = null;
                }
                let request = {
                    startTime: this.selectDate[0],
                    endTime: this.selectDate[1],
                    orgId: orgId,
                    shopId: shopId,
                    sellerId: sellerId,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
                };
                this.data1 = [];
                IncreaseData.generalizeOfSeller(request, function (data) {
                    that.data1 = [];
                    that.tableLoading = false;
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询零售公司的店铺出错!");
                        return;
                    }
                    if (data.code === '0000') {
                        that.data1 = data.results.dataVOS;
                        for (let i = 0; i < that.data1.length; i++) {
                            that.data1[i].index = (that.pageNum - 1) * that.pageSize + i + 1;
                        }
                        that.totalSize = data.results.sizeNum;
                    }
                })
            },
            //切页处理
            handlePage: function (value) {
                this.pageNum = value;
                this.generalizeOfSeller();
            },
            //零推广导出
            exportZeroExtend: function () {
                this.loading = true;
                if (this.selectDate[0] === "") {
                    this.$Message.info("请选择日期");
                    return
                }
                let sellerId = this.selectedStaff;
                if (this.selectedStaff === "-1") {
                    sellerId = null;
                }
                let shopId = this.selectedStore;
                if (this.selectedStore === "-1") {
                    shopId = null;
                }
                let orgId = this.selectedCompany;
                if (this.selectedCompany === "-1") {
                    orgId = null;
                }
                let that = this;
                let request = {
                    startTime: this.selectDate[0],
                    endTime: this.selectDate[1],
                    orgId: orgId,
                    shopId: shopId,
                    sellerId: sellerId,
                    pageNum: 1,
                    pageSize: this.totalSize,
                    userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
                };
                let originAllData = [];
                IncreaseData.generalizeOfSeller(request, function (data) {
                    if (data.data.code !== "0000") {
                        that.$Message.error("系统异常");
                    }
                    data = data.data.results.dataVOS;
                    if (data && data.length > 0) {
                        that.loading = false;
                        for (let i = 0; i < data.length; i++) {
                            let entity = data[i];
                            entity.index = i + 1;
                            originAllData.push(entity);
                        }
                        let title = "导购推广情况" + that.selectDate[0] + '-' + that.selectDate[1];
                        require.ensure([], () => {
                            const {export_json_to_excel} = require('../../excel/Export2Excel');
                            const tHeader = ['序号', '导购名称', '工号', '所属店铺', '店铺编码', '所属零售公司', '总好友数', '总好友数（去重）', '新增好友数', '新增好友数（去重）', '日增好友平均（去重）'];
                            // 属性名
                            const filterVal = ['index', 'sellerName', 'sellerCode', 'shopName', 'shopCode', 'companyName', 'allCustomer', 'effectiveCustomer', 'newCustomer', 'newEffectiveCustomer', 'avgNewCustomer'];
                            // 数据
                            //把data里的tableData存到list
                            const data = that.formatJson(filterVal, originAllData);
                            export_json_to_excel(tHeader, data, title);
                        });
                    }
                    if (!data || data.length === 0) {
                        that.$Message.info("暂无数据");
                    }
                });
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },
        }
    }
</script>

<style scoped>


    .search-col {
        text-align: left;
        padding-left: 10px;
    }


</style>
