<template>
    <div class="Marketingamount-box" v-loading.fullscreen.lock="fullscreenLoading">
        <!-- 详情弹出框 -->
        <!-- <el-dialog title="详情" :visible.sync="particulars">
            <el-table >
                <el-table-column property="date" label="日期" width="150"></el-table-column>
                <el-table-column property="name" label="姓名" width="200"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
        </el-dialog> -->
        <!-- 详情弹出框 -->
        <el-dialog title="拜访记录" :visible.sync="visitlog"  :close-on-click-modal="false">
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <div style="color: red;">PS:清除行时间保存时删除此行</div>
                <div style="text-align: right;margin-bottom: 10px;">
                    <el-button size="small" @click="preservebtn" type="primary">保存</el-button>
                    <el-button size="small" @click="Addline" type="primary">添加一行</el-button>
                </div>
            </div>
            <div class="callondialog-ul">
                <div v-for="(item,index) in callonarr" :key="index" class="callondialog-li">
                    <div style="display: flex;justify-content: space-between;">
                        <el-date-picker
                        value-format="yyyy-MM-dd"
                        style="width: 380px;"
                        v-model="item.beginDt"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                        <el-input style="width: 255px;" type="text" placeholder="客户公司" v-model="item.customerUnit"></el-input>
                        <el-input style="width: 168px;" type="text" placeholder="客户名称" v-model="item.customerName"></el-input>
                        <el-input style="width: 168px;" type="text" placeholder="客户职位" v-model="item.customerJob"></el-input>
                        <el-input style="width: 168px;" type="text" placeholder="联系方式" v-model="item.customerContact"></el-input>
                    </div>
                    <el-input style="width: 100%;" type="text" placeholder="拜访事项" v-model="item.remark"></el-input>
                    <!-- <div style="display: flex;justify-content: space-between;">
                    </div> -->
                </div>
            </div>
        </el-dialog>
        <div class="search-head">
            <el-form ref="form" label-width="75px">
                <el-form-item label="公司名称:">
                    <el-select :disabled='verifytf' @change="CompanySwitching" filterable v-model="companyname" placeholder="请选择公司名称">
                        <el-option v-for="(item,index) in companynamearr" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form ref="form" label-width="75px">
                <el-form-item label="销售人员:">
                    <el-select :disabled='verifytf' @change="EmployeeSwitching" filterable v-model="personnelname" placeholder="请选择人员名称">
                        <el-option v-for="(item,index) in personnelnamearr" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form ref="form" label-width="75px">
                <el-form-item label="年份:">
                    <el-select @change="changeyear" filterable v-model="years" placeholder="请选择年">
                        <el-option v-for="(item,index) in yearsarr" :key="index" :label="item.year" :value="item.year"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form ref="form" label-width="75px">
                <el-form-item label="季度:">
                    <el-select @change="QuarterlySwitching" filterable v-model="quarter" placeholder="请选择季度">
                        <el-option v-for="(item,index) in quarterarr" :key="index" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form ref="form" label-width="75px">
                <el-form-item label="月份:">
                    <el-select @change="MonthlySwitch" filterable v-model="month" placeholder="请选择月">
                        <el-option v-for="(item,index) in montharr" :key="index" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form style="width:100px;margin-left: 10px;">
                <el-button @click="PostMarketingSalesGroupExcel" type="primary">导出Excel</el-button>
            </el-form>
        </div>
        <div class="Marketingamount-head-ul">
            <div :style="yratio>0?'background-color: #ff4f4f':'background-color: #069305'" class="Marketingamount-head-li">
                <div class="head-li-title">{{ytitle}}&nbsp;({{years}}年)</div>
                <div class="head-li-info">
                    <div class="li-info-amount">¥&nbsp;{{yamount}}</div>
                    <div class="li-info-ratio">年同比:&nbsp;{{yratio}}%&nbsp;&nbsp;&nbsp;{{yratio>0?'▲':'▼'}}</div>
                </div>
            </div>
            <div :style="qratio>0?'background-color: #ff4f4f':'background-color: #069305'" class="Marketingamount-head-li">
                <div class="head-li-title">{{qtitle}}&nbsp;({{quarter}})</div>
                <div class="head-li-info">
                    <div class="li-info-amount">¥&nbsp;{{qamount}}</div>
                    <div class="li-info-ratio">季同比:&nbsp;{{qratio}}%&nbsp;&nbsp;&nbsp;{{qratio>0?'▲':'▼'}}</div>
                </div>
            </div>
            <div  :style="mratio>0?'background-color: #ff4f4f':'background-color: #069305'" class="Marketingamount-head-li">
                <div class="head-li-title">{{mtitle}}&nbsp;({{month}})</div>
                <div class="head-li-info">
                    <div class="li-info-amount">¥&nbsp;{{mamount}}</div>
                    <div class="li-info-ratio">月同比:&nbsp;{{mratio}}%&nbsp;&nbsp;&nbsp;{{mratio>0?'▲':'▼'}}</div>
                </div>
            </div>
        </div>
        <div class="Marketingamount-content">
            <div class="content-chart">
                <el-table
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :data="tableDatas"
                border
                style="width: 100%">
                    <el-table-column
                    prop="rowNumber"
                    label="排名"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    prop="userName"
                    label="名称"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="count"
                    label="成单量">
                    </el-table-column>
                </el-table>
                <div style="text-align: center;margin: 5px 0">
                    <el-pagination
                    small
                    @size-change="handleSizeChanges"
                    @current-change="handleCurrentChanges"
                    :current-page="currentPages"
                    :page-size="pagesizes"
                    layout="prev, pager, next"
                    :total="pmlist">
                    </el-pagination>
                </div>
                <div id="statisticallyone" style="height:300px;"></div>
                <div id="statisticallytwo" style="height:300px;"></div>
            </div>
            <div class="content-table">
                <el-table
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :data="tableData"
                border
                style="width: 100%">
                    <el-table-column
                    prop="rowNumber"
                    label="序号"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    prop="teamName"
                    label="团组名"
                    >
                    <template slot-scope="scope">
                        <el-popover
                        placement="right"
                        
                        trigger="hover">
                            <div>
                                客户单位:&nbsp;{{scope.row.clientUnit}}<br/>
                                客户名称:&nbsp;{{scope.row.clientName}}
                            </div>
                            <span slot="reference">{{scope.row.teamName}}</span>
                        </el-popover>
                    </template>
                    </el-table-column>
                    <!-- <el-table-column
                    prop="clientUnit"
                    label="客户单位">
                    </el-table-column>
                    <el-table-column
                    prop="clientName"
                    label="客户名称">
                    </el-table-column> -->
                    <el-table-column
                    prop="groupSales"
                    label="营业额">
                        <template slot-scope="scope">¥&nbsp;{{ scope.row.groupSales | townum}}</template>
                    </el-table-column>
                    <el-table-column
                    prop="visitDate"
                    label="出访日期"
                    width="110">
                        <template slot-scope="scope">{{ scope.row.visitDate | getvisitDate}}</template>
                    </el-table-column>
                    <el-table-column
                    prop="visitPNumber"
                    label="人数"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    prop="collectionDays"
                    label="收款日期"
                    width="110">
                        <template slot-scope="scope">{{ scope.row.collectionDays | getvisitDate}}</template>
                    </el-table-column>
                    <el-table-column
                    width="150"
                    label="操作">
                        <template slot-scope="scope">
                            <!-- <el-button size="mini" @click="particulars=true" type="primary">查看</el-button> -->
                            <el-button size="mini" @click="bfjlbtn(scope.row)" type="primary">拜访记录</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-size="pagesize"
                      :page-sizes="[10, 15, 20, 50]"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="tabletotal">
                    </el-pagination>
                  </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            DiId:'',
            cTablelist:[],
            currentPage:1,
            pagesize:10,
            currentPages:1,
            pagesizes:3,
            tabletotal:0,
            pmlist:0,
            tableDatas:[],
            customertype:[],
            customerlevel:[],
            tableData: [],
            particulars:false,
            visitlog:false,
            userId:'',
            token:'',
            companyname:'',
            companynamearr:[],
            personnelname:'',
            personnelnamearr:[],
            personnelnamearrs:[],
            years:'',
            yearsarr:'',
            quarter:'',
            quarterarr:'',
            month:'',
            montharr:'',
            YbeginDt:'',
            YendDt:'',
            QbeginDt:'',
            QendDt:'',
            MbeginDt:'',
            MendDt:'',
            //图
            ytitle:'全年销售总金额',
            yamount:0,
            yratio:0,
            qtitle:'季度销售金额',
            qamount:0,
            qratio:0,
            mtitle:'月度销售金额',
            mamount:0,
            mratio:0,
            fullscreenLoading:false,
            verifytf:false,
            //拜访日期
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
            },
            callonarr:[],
            callonarrs:[
                {
                    rowNumber:0,
                    diId:"",
                    beginDt:"",
                    endDt:"",
                    customerUnit:"",
                    customerJob:"",
                    customerName:"",
                    customerContact:"",
                    remark:"",
                },
                {
                    rowNumber:0,
                    diId:"",
                    beginDt:"",
                    endDt:"",
                    customerUnit:"",
                    customerJob:"",
                    customerName:"",
                    customerContact:"",
                    remark:"",
                },
                {
                    rowNumber:0,
                    diId:"",
                    beginDt:"",
                    endDt:"",
                    customerUnit:"",
                    customerJob:"",
                    customerName:"",
                    customerContact:"",
                    remark:"",
                },
                {
                    rowNumber:0,
                    diId:"",
                    beginDt:"",
                    endDt:"",
                    customerUnit:"",
                    customerJob:"",
                    customerName:"",
                    customerContact:"",
                    remark:"",
                },

            ],
            value2: '',
        }
    },
    methods:{
        //bfy
        handleSizeChange(val) {
            this.pagesize=val;
            this.PostMarketingSalesGroupList(this.years,2);
        },
        //bfy
        handleCurrentChange(val) {
            this.currentPage=val;
            this.PostMarketingSalesGroupList(this.years,2);
        },
        //pfy
        handleSizeChanges(val) {
            this.pagesizes=val;
            this.PostMarketingSalesOrderRanking(this.YbeginDt,this.YendDt);
        },
        //pfy
        handleCurrentChanges(val) {
            this.currentPages=val;
            this.PostMarketingSalesOrderRanking(this.YbeginDt,this.YendDt);
        },
        statisone(){
            var myChart = echarts.init(document.getElementById('statisticallyone'));
            myChart.setOption({
                title: {
                    text: '客户类型分布表',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                    type: 'pie',
                    radius: '50%',
                    data: this.customertype,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: this.customertype.length,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            });
            var myCharttwo = echarts.init(document.getElementById('statisticallytwo'));
            myCharttwo.setOption({
                title: {
                    text: '客户等级分布表',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                    type: 'pie',
                    radius: '50%',
                    data: this.customerlevel,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: this.customerlevel.length,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            });
        },
        //导出Excel
        PostMarketingSalesGroupExcel() {
            var url = "/api/Statistics/PostMarketingSalesGroupExcel"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    userId: that.userId,
                    pageId:180,
                    companyId:that.companyname,
                    groupPickupUserId:that.personnelname,
                    beginDt:that.quarter=='全部'?that.QbeginDt:that.MbeginDt,
                    endDt:that.quarter=='全部'?that.QendDt:that.MendDt,
                    pageIndex:0,
                    pageSize:0,
                    searchCriteria:'',
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    window.open(res.data.data.url)
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('接口报错请联系信息部！');
            });
        },
        //获取PostMarketingSalesInitData
        PostMarketingSalesInitData() {
            var url = "/api/Statistics/PostMarketingSalesInitData"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    userId: this.userId,
                    pageId:180,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.yearsarr=res.data.data.dtData;
                    that.years=res.data.data.dtData[0].year;
                    that.companynamearr=res.data.data.companyData;
                    that.personnelnamearrs=res.data.data.userData;
                    
                    that.companyname=that.companynamearr[0].id;
                    that.personnelname=that.personnelnamearrs[0].id;
                
                    // that.verifyID();
                   
                    that.CompanySwitching(that.companyname);
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('接口报错请联系信息部！');
            });
        },
        //年市场部销售额api
        YPostMarketingSalesStatistic() {
            var url = "/api/Statistics/PostMarketingSalesStatistics"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    userId: that.userId,
                    pageId:180,
                    companyId:that.companyname,
                    groupPickupUserId:that.personnelname,
                    beginDt:that.YbeginDt,
                    endDt:that.YendDt,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.yamount=res.data.data.thisYearSales;
                    that.yratio=res.data.data.yoy;
                    that.QuarterlySwitching('第一季度')
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('接口报错请联系信息部！');
            });
        },
        //季市场部销售额api
        QPostMarketingSalesStatistic() {
            var url = "/api/Statistics/PostMarketingSalesStatistics"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    userId: that.userId,
                    pageId:180,
                    companyId:that.companyname,
                    groupPickupUserId:that.personnelname,
                    beginDt:that.QbeginDt,
                    endDt:that.QendDt,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.qamount=res.data.data.thisYearSales;
                    that.qratio=res.data.data.yoy;
                    that.MonthlySwitch(that.month)
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('接口报错请联系信息部！');
            });
        },
        //月市场部销售额api
        MPostMarketingSalesStatistic() {
            var url = "/api/Statistics/PostMarketingSalesStatistics"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    userId: that.userId,
                    pageId:180,
                    companyId:that.companyname,
                    groupPickupUserId:that.personnelname,
                    beginDt:that.MbeginDt,
                    endDt:that.MendDt,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.mamount=res.data.data.thisYearSales;
                    that.mratio=res.data.data.yoy;
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('接口报错请联系信息部！');
            });
        },
        //公司切换
        CompanySwitching(val){
            this.currentPage=1;
            this.yamount=0.00;
            this.yratio=0.00;
            this.qamount=0.00;
            this.qratio=0.00;
            this.mamount=0.00;
            this.mratio=0.00;
            this.personnelnamearr=[];
            this.personnelname='';
            if(val==-1){
                this.personnelnamearr=this.personnelnamearrs;
                this.personnelname=this.personnelnamearr[0].id;
                // this.PostMarketingSalesGroupList(this.years,1)
            }else{
                for(let i=0;i<this.personnelnamearrs.length;i++){
                    if(this.personnelnamearrs[i].companyId==-1||val==this.personnelnamearrs[i].companyId){
                        this.personnelnamearr.push(this.personnelnamearrs[i]);
                    }
                }
                this.personnelname=this.personnelnamearr[0].id;
            }
            if(this.userId==21||this.userId==233){
                
            }else{
                this.verifytf=true;
                var idarr=[];
                for (let x = 0; x < this.personnelnamearr.length; x++) {
                    idarr.push(this.personnelnamearr[x].id)
                    if (idarr.includes(this.userId)) {
                        if(this.userId==this.personnelnamearr[x].id){
                            this.personnelname=this.personnelnamearr[x].id;
                            this.companyname=this.personnelnamearr[x].companyId;
                        }
                    }
                }
                if (!idarr.includes(this.userId)) {
                    this.personnelname="";
                    this.companyname="";
                    this.$message({
                        message: '无权限！',
                        type: 'warning'
                    });
                    return
                }
            }
            this.PostMarketingSalesGroupList(this.years,1)
        },
        //员工切换
        EmployeeSwitching(val){
            this.currentPage=1;
            this.PostMarketingSalesGroupList(this.years,1)
        },
        //季度切换
        QuarterlySwitching(val){
            //初始化
            this.QbeginDt='';
            this.QendDt='';
            this.montharr=[]
            for (let w = 0; w < this.quarterarr.length; w++) {
                if (val==this.quarterarr[w].name) {
                    if(val=='全部'){
                        this.QbeginDt=this.quarterarr[w].beginDt;
                        this.QendDt=this.quarterarr[w].endDt;
                        this.montharr.push(this.quarterarr[1].monthData[0]);
                        this.month=this.quarterarr[1].monthData[0].name;
                    }else{
                        this.QbeginDt=this.quarterarr[w].monthData[0].beginDt;
                        this.QendDt=this.quarterarr[w].monthData[0].endDt;
                        this.montharr=this.quarterarr[w].monthData;
                        this.month=this.quarterarr[w].monthData[1].name;
                    }
                    console.log(this.montharr);
                }
            }
            this.QPostMarketingSalesStatistic()
        },
        //月切换
        MonthlySwitch(val){
            console.log(val);
            for (let m = 0; m < this.montharr.length; m++) {
                if(val==this.montharr[m].name){
                    this.MbeginDt=this.montharr[m].beginDt;
                    this.MendDt=this.montharr[m].endDt;
                }
            }
            this.MPostMarketingSalesStatistic()
        },
        //年切换
        changeyear(val){
            this.currentPage=1;
            this.PostMarketingSalesGroupList(val,1)
        },
        //市场部销售额团组列表
        PostMarketingSalesGroupList(val,index) {
            this.fullscreenLoading=true;
            var beginDt='';
            var endDt='';
            if(index==1){
                for(let j=0;j<this.yearsarr.length;j++){
                    if(this.yearsarr[j].year==val){
                        this.quarterarr=this.yearsarr[j].quarterData;
                        this.quarter=this.quarterarr[1].name;
                        // this.montharr=this.yearsarr[j].quarterData[1].monthData;
                        // this.month=this.montharr[0].name;
                        this.YbeginDt=this.yearsarr[j].quarterData[0].beginDt;
                        this.YendDt=this.yearsarr[j].quarterData[0].endDt;
                    }
                }
                beginDt=this.YbeginDt;
                endDt=this.YendDt;
            }else{
                for(let j=0;j<this.yearsarr.length;j++){
                    if(this.yearsarr[j].year==val){
                        this.quarterarr=this.yearsarr[j].quarterData;
                        // this.quarter=this.quarterarr[1].name;
                        // this.montharr=this.yearsarr[j].quarterData[1].monthData;
                        // this.month=this.montharr[0].name;
                        this.YbeginDt=this.yearsarr[j].quarterData[0].beginDt;
                        this.YendDt=this.yearsarr[j].quarterData[0].endDt;
                    }
                }
                beginDt=this.YbeginDt;
                endDt=this.YendDt;
            }
            var url = "/api/Statistics/PostMarketingSalesGroupList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    userId: that.userId,
                    pageId:180,
                    companyId:that.companyname,
                    groupPickupUserId:that.personnelname,
                    beginDt:beginDt,
                    endDt:endDt,
                    pageIndex:that.currentPage,
                    pageSize:that.pagesize,
                    searchCriteria:"",
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.tableData=res.data.data;
                    that.tabletotal=res.data.count;
                    if (index==1) {
                        console.log(1);
                        
                        that.YPostMarketingSalesStatistic();
                    }
                    setTimeout(function(){
                        that.PostMarketingSalesGroupStatistics(beginDt,endDt);
                    },500);
                    setTimeout(function(){
                        that.PostMarketingSalesOrderRanking(beginDt,endDt)
                    },600);
                    
                }else{
                    that.fullscreenLoading=false;
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.fullscreenLoading=false;
                that.$message.error('接口报错请联系信息部！');
            });
        },
        //统计api
        PostMarketingSalesGroupStatistics(beginDt,endDt) {
            var url = "/api/Statistics/PostMarketingSalesGroupStatistics"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    userId: that.userId,
                    pageId:180,
                    companyId:that.companyname,
                    groupPickupUserId:that.personnelname,
                    beginDt:beginDt,
                    endDt:endDt,
                    statisticsType:1
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    var newArr = res.data.data.customerTypeData.map(item => ({
                        name: item.name,
                        value: item.count
                    }))
                    that.customertype=newArr;
                    var newArrs = res.data.data.clientGradeData.map(item => ({
                        name: item.name,
                        value: item.count
                    }))
                    that.customerlevel=newArrs;
                    that.fullscreenLoading=false;
                }else{
                    that.fullscreenLoading=false;
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.fullscreenLoading=false;
                that.$message.error('统计api报错请联系信息部！');
            });
        },
        //排名api
        PostMarketingSalesOrderRanking(beginDt,endDt) {
            var url = "/api/Statistics/PostMarketingSalesOrderRanking"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    userId: that.userId,
                    pageId:180,
                    companyId:that.companyname,
                    groupPickupUserId:that.personnelname,
                    beginDt:beginDt,
                    endDt:endDt,
                    pageIndex:that.currentPages,
                    pageSize:that.pagesizes,
                   
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.pmlist=res.data.count;
                    that.tableDatas=res.data.data;
                }else{
                    that.fullscreenLoading=false;
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.fullscreenLoading=false;
                that.$message.error('接口报错请联系信息部！');
            });
        },
        //打开拜访记录
        bfjlbtn(val){
            this.visitlog=true;
            this.DiId=val.id;
            this.PostMarketingSalesVCList();
        },
        //新增一行
        Addline(){
            this.callonarr.push({
                rowNumber:0,
                diId:"",
                beginDt:"",
                endDt:"",
                customerUnit:"",
                customerJob:"",
                customerName:"",
                customerContact:"",
                remark:"",
            },)
            
        },
        //处理时间
        disposeTime(val){
            var date = new Date(val);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var hh = date.getHours();
            hh = hh < 10 ? ('0' + hh) : hh;
            var mm = date.getMinutes();
            mm = mm < 10 ? ('0' + mm) : mm;
            var ss = date.getSeconds();
            ss = ss < 10 ? ('0' + ss) : ss;
            let time = y + '-' + m + '-' + d+' '+hh+':'+mm+':'+ss;
            return time
        },
        //保存
        preservebtn(){
            console.log(this.callonarr);
            var preservearr=[]
            for(let i=0;i<this.callonarr.length;i++){
                if(this.callonarr[i].beginDt!=''&&this.callonarr[i].beginDt!=null){
                    preservearr.push(this.callonarr[i])
                }
            }
            for(let p=0;p<preservearr.length;p++){
                preservearr[p].endDt=this.disposeTime(preservearr[p].beginDt[1]);
                preservearr[p].beginDt=this.disposeTime(preservearr[p].beginDt[0]);
                preservearr[p].diId=this.DiId;
            }
            this.PostMarketingSalesVCSave(preservearr)
        },
        //查询拜访记录
        PostMarketingSalesVCList() {
            var url = "/api/Statistics/PostMarketingSalesVCList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    userId: that.userId,
                    pageId:180,
                    pageIndex:1,
                    pageSize:100,
                    diId:that.DiId,
                    search:'',
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    if(res.data.data.length>0){
                        that.callonarr=res.data.data;
                        for(let c=0;c<that.callonarr.length;c++){
                            that.callonarr[c].beginDt=(that.callonarr[c].beginDt+'*'+that.callonarr[c].endDt).split('*')
                        }
                    }else{
                        that.callonarr=that.callonarrs;
                    }
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('查询拜访记录失败！');
            });
        },
        //保存api
        PostMarketingSalesVCSave(items) {
            var url = "/api/Statistics/PostMarketingSalesVCSave"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    userId: that.userId,
                    diId:that.DiId,
                    pageId:180,
                    items:items
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    that.PostMarketingSalesVCList();
                }else{
                    that.$message({
                        message:res.data.msg,
                        duration:1000,
                        type:"error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('查询拜访记录失败！');
            });
        },
    },
    filters: {
        getvisitDate(val) {
            return val.split(' ')[0];
        },
        townum(val){
            return val.toFixed(2)
        },
    },
    watch: {
        customertype: {
            handler(val, oldVal) {
                this.statisone();
            },
            deep: true
        },
        customerlevel: {
            handler(val, oldVal) {
                this.statisone();
            },
            deep: true
        }
    },
    created(){
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
    },
    mounted(){
        this.PostMarketingSalesInitData()
        this.statisone()
    }
}
</script>
<style>
.Marketingamount-box{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
}
.Marketingamount-head-ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.Marketingamount-head-li{
    color: #fff;
    min-width: 25%;
    padding: 15px;
    box-shadow: 0 0 10px #0005;
    border-radius: 10px;
}
.head-li-title{
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 20px;
}
.head-li-info{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.Marketingamount-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.content-chart{
    padding-top: 25px;
    min-width: 26.5%;
}
.content-table{
    margin-top: 25px;
    min-width: 60%;
}
.content-table .block{
    text-align: center;
}
.search-head{
    display: flex;
    flex-wrap: wrap;
}
.search-head .el-form{
    width: 290px;
}
.search-head .el-select{
    width: 100%;
}
.Marketingamount-box .el-dialog__body{
    padding-top: 0px;
}
.Marketingamount-box .el-dialog{
    width: 1200px;
}
.callondialog-ul{
    height: 530px;
    overflow: auto;
}
.callondialog-li{
    padding: 20px 0 10px 0;
    border-top: #c7c7c7 dashed 1px;
}
.callondialog-li:last-child{
    border-bottom: #c7c7c7 dashed 1px;
}
.callondialog-li .el-input,.el-range-editor.el-input__inner{
    margin-bottom: 10px;
}

</style>