<style>
    .page_demandStatistics ._mc_edit{overflow: auto;display: none;position:absolute;bottom:0;left: 0;border-top:1px solid #d1d1d1;background-color:#f9f9f9;padding: 15px 33px;width: 100%;min-width: 1146px;padding-right: 10px} 
    .page_demandStatistics .edHeight{display: block;height: 150px;}
    .page_demandStatistics ._mc_list{overflow-x: auto;}
    .page_demandStatistics ._mc_list>ul>li{padding: 20px 20px 0 20px;width: 280px;height: 302px;float: left;border: 1px solid #F1F2F5;margin-right:10px;margin-bottom: 20px}
    .page_demandStatistics ._mc_list>ul>li:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
    .page_demandStatistics ._bt span{color: #FF9000}
    .page_demandStatistics ._edHeight{height:550px;}
    .page_demandStatistics ._scrollbar::-webkit-scrollbar{width: 4px;height: 8px;}
    .page_demandStatistics ._scrollbar::-webkit-scrollbar-thumb{border-radius: 4px;-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
    .page_demandStatistics ._scrollbar::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
    .page_demandStatistics ._mc_list ._tit,._mc_edit ._tit{padding-left: 10px;border-left: 3px solid #E95252; font-size: 14px;color: #000000;position: relative;margin: 20px 0}
    .page_demandStatistics ._mc_edit ._info_box ul._form li{float: left;}
    .page_demandStatistics ._check_list{padding-left: 120px;margin-bottom: 20px;}
    .page_demandStatistics ._check_box .el-form-item{margin-bottom: 0}
    .page_demandStatistics ._remark textarea{resize: none;width: 646px;height: 100px}
    .page_demandStatistics ._vr_left{width: 526px;margin-right: 20px;}
    .page_demandStatistics ._vr_left ul{margin-top: 20px;background-color: #FFFFFF;width:486px;padding: 20px;max-height: 620px;overflow-x: auto}
    .page_demandStatistics .charts{margin-right: 50px}
    .page_demandStatistics .damandBtn{float: left;position: absolute;top:70px !important;z-index:999;}
    .page_demandStatistics .damandBtnDay_active{background-color: #333333;color: #FFFFFF !important}
    .page_demandStatistics .damandBtnDay li{width: 60px;height: 24px;font-size: 12px;color: #666666;display: inline-block;text-align: center;line-height: 24px;border: 1px solid #E3E3E3;cursor: pointer;float: left;}
	.page_demandStatistics .damandBtnDay li:nth-child(1){border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
    .page_demandStatistics .damandBtnDay li:nth-child(2){border-left: none;border-right: none}
	.page_demandStatistics .damandBtnDay li:nth-child(3){border-top-right-radius: 4px;border-bottom-right-radius: 4px;}
    .page_demandStatistics ._vr_left ul li{display: flex;border-bottom: 1px solid #F5F5F5;padding-top: 10px}
    .page_demandStatistics ._vr_left ul li img{height: 48px;width: 48px;border-radius: 50%;margin-bottom: 5px;}
    .page_demandStatistics ._vr_left ul li ._xunjia{padding: 0 10px;font-size: 14px;color: #333333}
    .page_demandStatistics ._vr_left ul li ._xunjia .iconfont {color: #CCCCCC;font-size: 12px}
    .page_demandStatistics ._vr_left ul li ._xunjia .PingFangSC{font-weight: bold}
    .page_demandStatistics ._vr_left ul li ._xunjia>P:nth-child(1){margin-bottom: 6px;}
    .page_demandStatistics ._vr_left ul li ._xunjia .pclass{margin-bottom: 10px;color: #999999}
    .page_demandStatistics ._vr_left ul li ._xunjia>P:nth-child(3){margin-bottom: 15px;}
    .page_demandStatistics ._vr_left ul li ._xunjia p._see{color: #333333}
    .page_demandStatistics ._vr_left ul li ._xunjia p ._line_name{color: #666666}
    .page_demandStatistics ._loding_more{justify-content: center;font-size: 12px;color: #CCCCCC;padding: 10px;cursor: pointer;}
    .page_demandStatistics ._charts_bt{display: flex;justify-content: space-around;background-color: #F1F2F5;border-radius: 4px;padding: 7px 0}
    .page_demandStatistics ._charts_bt p{text-align: center;color: #666666}
    .page_demandStatistics ._charts_bt p.PingFangSC{font-weight: bold;color: #333333;font-size: 16px}
</style>
<template>
    <div class="page_demandStatistics">    
        <div class="_mc_list _scrollbar">
            <div class="_vr_right fl">
                <p class="_tit">{{name}}统计 </p>
                <ul class="damandBtn damandBtnDay">
                    <li @click="atvD=true,atvM=atvSM=false,calc(6),StatisticalListMsg.pageIndex=1" :class="atvD==true?'damandBtnDay_active':''">近7天</li>
                    <li @click="atvM=true,atvD=atvSM=false,calc(29),StatisticalListMsg.pageIndex=1" :class="atvM==true?'damandBtnDay_active':''">近30天</li>
                    <li @click="atvSM=true,atvM=atvD=false,calc(89),StatisticalListMsg.pageIndex=1" :class="atvSM==true?'damandBtnDay_active':''">近3个月</li>
                </ul>
                <div class="charts clearfix">
					<el-col :span='24'>
						<div id="chartsMap" style="height:580px;width:1050px;"></div>
					</el-col>
				 </div>
                 <div class="_charts_bt">
                     <div v-for="(item,index) in budgetPriceScop">
                         <p>{{item.scop}}</p>
                         <p class="PingFangSC">{{item.count}}</p>
                     </div>
                 </div>
            </div>
            <div class="_vr_left fl">
                <p class="_tit">详情</p>
                <ul class="_scrollbar">
                    <li v-for="(item,index) in StatisticalList">
                        <img v-if="item.photo==null" src="../../assets/img/bg_z1@3x.png" alt="">
                        <img v-else :src="item.photo" alt="">
                        <div class="_xunjia" v-if="item.infoType==2">
                            <p>{{item.customerName}}</p>
                            <p class="pclass">{{item.createTime}}</p>
                            <p >
                                <i class="iconfont icon-img-ren"></i><span> 人数&nbsp;&nbsp;</span><span class="PingFangSC">{{item.peopleNumber}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                <i class="iconfont icon-img_rili"></i><span> 日期&nbsp;&nbsp;</span><span class="PingFangSC">{{item.departTime}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                <i class="iconfont icon-money"></i><span> 价格&nbsp;&nbsp;</span><span class="PingFangSC">{{item.budgetPrice}}</span>
                            </p>
                            <p class="pclass"> <i class="iconfont icon-img_renshu"></i>&nbsp;&nbsp;<span>{{item.lineteamName}}</span>&nbsp;&nbsp;&nbsp;&nbsp;</p>
                            <p class="pclass"><span>备注&nbsp;&nbsp;</span><span>{{item.remark}}</span>&nbsp;&nbsp;&nbsp;&nbsp;</p>
                        </div>
                        <div class="_xunjia" v-if="item.infoType==1">
                            <p>{{item.customerName}}</p>
                            <p>{{item.createTime}}</p>
                            <p class="_see"><span>查看</span>&nbsp;&nbsp;<span class="_line_name">{{item.checkInformation}}</span></p>
                            <p>
                                <i class="iconfont icon-qingjia"></i><span> 浏览时长&nbsp;&nbsp;</span><span class="PingFangSC">{{item.viewingHours}}</span>
                            </p>
                        </div>
                    </li>
                    <li v-show="StatisticalList.length==0">
                        <div class="noData">
                            {{$t('system.content_noData')}}
                        </div>
                    </li>
                    <li class="_loding_more" v-show="pageCount!=StatisticalListMsg.pageIndex" @click="paging()">
                        <p>加载更多....</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            id:'',
            name:'',
            queryDate:'',
            toDate:new Date().Format('yyyy-MM-dd'),
            noData:false,
            atvM:false,
            atvD:true,
            atvSM:false,
            dayArr:[],
            inquireHotLine:[],
            b2bClickHotLine:[],
            b2bClickStatistical:[],
            inquireHotLineStatistical:[],
            StatisticalList:[],
            budgetPriceScop:[],
            chartsX:0,
            pageCount:1,
            StatisticalListMsg:{
                startDate:'',
                endDate:'',
                lineId:'',
                pageIndex:1,
                pageSize:5
            }
        }
    },methods:{
        paging(){ // 加载更多
            if(this.StatisticalListMsg.pageIndex<this.pageCount){
                this.StatisticalListMsg.pageIndex=this.StatisticalListMsg.pageIndex+1
                this.getStatisticalList('push')
            }
        },
        getStatisticalList(type){   // 获取详情
            this.StatisticalListMsg.startDate = this.queryDate
            this.StatisticalListMsg.endDate = this.toDate
            this.StatisticalListMsg.lineId = this.id
            this.apipost('app_my_inquire_line_statistical_list',this.StatisticalListMsg,res=>{
                if(res.data.resultCode==1){
                    if(res.data.data.pageData.length!=0){
                        if(type){
                            res.data.data.pageData.forEach(x=>{
                                this.StatisticalList.push(x)
                            })
                        }else{
                            this.StatisticalList = res.data.data.pageData
                        }
                    }
                    this.pageCount = res.data.data.pageCount==0?1:res.data.data.pageCount
                }else{
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        getInquireLineNeed(){  //获取线条条数据
            this.toDate=new Date().Format('yyyy-MM-dd')
            let msg = {
                startDate:this.queryDate,
                endDate:this.toDate,
                lineId:this.id
            }
             this.apipost('app_my_inquire_line_statistical',msg,res=>{
                if(res.data.resultCode==1){
                    this.inquireHotLineStatistical = res.data.data.inquireStatistical
                    this.b2bClickStatistical = res.data.data.b2bClickStatistical.clickStatistical
                    if(this.inquireHotLineStatistical.length>0){
                        this.inquireHotLine=[]
                        this.dayArr=[]
                        this.budgetPriceScop = res.data.data.budgetPriceScop
                        this.inquireHotLineStatistical.forEach(x => {
                            this.dayArr.push(x.date.substring(5,x.date.length))
                            this.inquireHotLine.push(x.inquireCount)
                        });
                        if(this.inquireHotLineStatistical.length==7){
                            this.chartsX=0
                        }else if(this.inquireHotLineStatistical.length==30){
                            this.chartsX=5
                        }else if(this.inquireHotLineStatistical.length==90){
                            this.chartsX=10
                        }
                    }
                    if(this.b2bClickStatistical.length>0){
                        this.b2bClickHotLine=[]
                        this.b2bClickStatistical.forEach(x => {
                            this.b2bClickHotLine.push(x.clickCount)
                        });
                    }
                    this.chartsMap(this.inquireHotLine,this.b2bClickHotLine);
                }else{
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        chartsMap(see,clc){  // 画饼
            var then = this;
            let myChart = this.$echarts.init(document.getElementById('chartsMap'));
            myChart.setOption({
                title: {
                    left: 'left',
                    textStyle:{
                        fontWeight:'bold',
                        fontSize:14,
                        color:'#333333',
                        height:'30px'
                    },
                    padding: [
                        20,  // 上
                        20, // 右
                        20,  // 下
                        20, // 左
                    ]
                },
                backgroundColor: '#fff',
                legend: {
                    icon: 'rect',
                    selectedMode:false,
                    orient: 'vertical',
                    x: 'right',
                    data:['b2b点击','询价']
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        animation: false,
                        label: {
                            backgroundColor: '#ccc',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            shadowBlur: 0,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            textStyle: {
                                color: '#222'
                            }
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        show: false,
                        lineStyle:{
                            width:30
                        }
                    },
                    axisLabel:{interval: then.chartsX},
                    axisTick:false,
                    data: then.dayArr,
                },
                grid: {
                    x:25,
                    y:60,
                    x2:5,
                    y2:20,
                    containLabel: true
                },
                yAxis: {
                    type: 'category',
                    data:['10','20','30','40','50','60','70','80','90','100'],
                    axisLine: {show: false},
                    axisTick:false,
                    splitLine:{
                        show:false                    
                    },
                    scale: true,
                    minInterval:1,
                    type: 'value', 
                    axisLabel:{formatter:'{value} 个'}    
                },
                series: [  

                    {
                        name: 'b2b点击',
                        type: 'line',
                        smooth:false,  
                        data: clc,
                        lineStyle:{
                            width:3,
                            color:'#50C291',
                        },
                        itemStyle:{
                            borderWidth:2,
                            color:'#50C291'
                        },
                        symbol:'none',
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color:'rgba(230,230,230,0)' // 0% 处的颜色
                                }, {
                                    offset: 1, color:'rgba(230,230,230,0)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    },
                    {
                        name: '询价',
                        type: 'line',
                        smooth:false,  
                        data: see,
                        lineStyle:{
                            width:3,
                            color:'#FF793E',
                        },
                        itemStyle:{
                            borderWidth:2,
                            color:'#FF793E'
                        },
                        symbol:'none',
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color:'rgba(230,230,230,0)' // 0% 处的颜色
                                }, {
                                    offset: 1, color:'rgba(230,230,230,0)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    }
                ]
            },true)
        },
        calc(n){
            var date = new Date();
            var t = date.getTime();
            var m = t- n*24*3600*1000;
            var s = new Date(m);
            // alert(n+"天前是"+s.getFullYear()+"-"+(s.getMonth()+1<10?'0'+(s.getMonth()+1):(s.getMonth()+1))+"-"+(s.getDate()<10?'0'+s.getDate():s.getDate()));
            this.queryDate =  s.getFullYear()+"-"+(s.getMonth()+1<10?'0'+(s.getMonth()+1):(s.getMonth()+1))+"-"+(s.getDate()<10?'0'+s.getDate():s.getDate())
            this.getInquireLineNeed()
            this.getStatisticalList()
        }
    },mounted(){
        this.id = this.$route.query.id
        this.name = this.$route.query.name
        this.calc(6)
    }
}
</script>