<template>
    <div>
        <Row style="margin-top: 20px;width: 100%;background-color: #F7F8FA;">
            <i-col span="24" style="text-align: left;padding-left: 10px;">
                <Row class="row-style">
                    <i-col span="1" style="text-align: right;">
                        <p class="region">选择日期</p>
                    </i-col>
                    <i-col span="3" style="padding-left: 10px;">
                        <DatePicker @on-change="onChangeDateLister" :value="selectDate"  type="daterange" split-panels placeholder="请选择日期" style="width: 200px"></DatePicker>
                    </i-col>
                    <i-col span="2" style="text-align: right;">
                        <span class="region">零售公司选择</span>
                    </i-col>
                    <i-col span="4" style="padding-left: 10px;">
                        <Select v-model="selectedCompany"  @on-change="storeOfCompany" filterable style="width: 200px;">
                            <Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </i-col>
                    <i-col span="1" style="text-align: right;">
                        <span class="region">店铺选择</span>
                    </i-col>
                    <i-col span="4" style="padding-left: 10px;">
                        <Select v-model="selectedStore" filterable style="width: 200px;" @on-change="sellerOfStore">
                            <Option v-for="item in storeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </i-col>

                    <i-col span="1" style="text-align: right;">
                        <span class="region">导购选择</span>
                    </i-col>
                    <i-col span="4" style="padding-left: 10px;">
                        <Select v-model="selectedStaff" filterable style="width: 200px;">
                            <Option v-for="item in staffList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </i-col>

                    <i-col span="2">
                        <Button type="primary" @click="generalizeOfSeller">查询</Button>
                    </i-col>

                    <div style="text-align: right;padding-right: 20px;float: right">
                        <Button type="primary" @click="exportData">导出数据</Button>
                    </div>
                </Row>
            </i-col>
        </Row>

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

<script>
    import IncreaseData from "../../services/generalize/IncreaseData";
    export default {
        name: "IncreaseDataStaff",
        data () {
            return {
                selectedCompany: null,
                companyList: [],
                selectedStore: null,
                storeList: [],
                selectedStaff: null,
                staffList: [],
                columns1: [
                    {
                        type: 'index',
                        title: '序号',
                        key: 'id'
                    },
                    {
                        title: '导购名称',
                        key: 'sellerName'
                    },
                    {
                        title: '工号',
                        key: 'sellerCode'
                    },
                    {
                        title: '所属店铺',
                        key: 'shopName'
                    },
                    {
                        title: '编码',
                        key: 'shopCode'
                    },
                    {
                        title: '所属零售公司',
                        key: 'companyName'
                    },
                    {
                        title: '总好友数',
                        key: 'allCustomer'
                    },
                    {
                        title: '有效好友总数',
                        key: 'effectiveCustomer'
                    },
                    {
                        title: '新增好友数',
                        key: 'newCustomer'
                    },
                    {
                        title: '新增有效好友数',
                        key: 'newEffectiveCustomer'
                    },
                    {
                        title: '日增有效好友平均',
                        key: 'avgNewCustomer'
                    }
                ],
                data1: [],
                //分页内容
                totalSize: 0,
                pageNum: 1,
                pageSize: 10,
                selectDate:[],
            }
        },
        mounted: function () {
            let startDate = this.$moment(new Date()).add(-30,"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 = data.results;
                    }
                })
            },
            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 = data.results;
                    }
                })
            },
            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 = data.results;
                    }
                })
            },
            storeOfCompany(){
                let that = this;
                this.selectedStore = "";
                let request = {
                    orgId:this.selectedCompany
                };
                this.storeList = [];
                IncreaseData.listOfStoreByCompany(request,function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询零售公司的店铺出错!");
                        return;
                    }
                    if (data.code === '0000') {
                        that.storeList = data.results;
                    }
                })
            },
            sellerOfStore(){
                let that = this;
                this.selectedStaff = "";
                let request = {
                    shopId:this.selectedStore
                };
                this.staffList = [];
                IncreaseData.listOfSellerByStore(request,function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询零售公司的店铺出错!");
                        return;
                    }
                    if (data.code === '0000') {
                        that.staffList = data.results;
                    }
                })
            },
            generalizeOfSeller(){
                if(this.selectDate[0] === ""){
                    this.$Message.info("请选择日期");
                    return
                }
                let that = this;
                let request = {
                    startTime:this.selectDate[0],
                    endTime:this.selectDate[1],
                    orgId:this.selectedCompany,
                    shopId:this.selectedStore,
                    sellerId:this.selectedStaff,
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                };
                this.data1 = [];
                IncreaseData.generalizeOfSeller(request,function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询零售公司的店铺出错!");
                        return;
                    }
                    if (data.code === '0000') {
                        that.data1 = data.results.dataVOS;
                        that.totalSize = data.results.sizeNum;
                    }
                })
            },
            //切页处理
            handlePage:function (value) {
                this.pageNum = value;
                this.generalizeOfSeller();
            },
            exportData(){
                this.$refs.table.exportCsv({
                    filename: 'The original data'
                });
            },
        }
    }
</script>

<style scoped>
    .region {
        font-size: 14px;
        line-height: 32px;
    }
    .row-style {
        padding-top: 20px;
        padding-bottom: 20px;
    }
</style>
