<style>
    .page_VisitRecord ._scrollbar::-webkit-scrollbar{width: 4px;height: 8px;}
    .page_VisitRecord ._scrollbar::-webkit-scrollbar-thumb{border-radius: 4px;-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
    .page_VisitRecord ._scrollbar::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
    .page_VisitRecord>div>ul{height: 650px;margin: 20px 20px;background-color: #FFFFFF;border: 1px solid #F1F2F5;padding: 20px;border-radius: 4px;padding-right: 16px;margin-bottom: 5px}
    .page_VisitRecord ._vr_left{width: 630px;}
    .page_VisitRecord ._vr_right{width: 1110px;}
    .page_VisitRecord ._tit{padding-left: 10px;border-left: 3px solid #E95252; font-size: 14px;color: #000000;margin: 20px 0 0 20px;}
    .page_VisitRecord .icon-ditu{color: #E95252;cursor: pointer;}
    .page_VisitRecord>div._vr_left> ul{padding-left: 115px;overflow-x: auto}
    .page_VisitRecord ._vr_left ul li{position: relative;border-left: 1px solid #F5F5F5;padding-bottom: 20px}
    .page_VisitRecord ._vr_left ._time{display: inline-block;border: 1px solid #CCCCCC;position: absolute;left: -100px;padding: 2px 10px;font-size: 14px;color: #666666;border-radius: 4px}
    .page_VisitRecord span._dot{font-size: 10px;width: 16px;height: 16px;border-radius: 50%;background-color: #257BF1;border: 2px solid #B7D3FA;display: inline-block;text-align: center;color: white;line-height: 11px;position: absolute;left: -8px}
    .page_VisitRecord ._box{padding: 20px 10px;border: 1px solid #F1F2F5;margin-left: 16px;border-radius: 4px;font-size: 14px;color: #333333;cursor: pointer;}
    .page_VisitRecord ._box p span{color: #333333;font-weight: bold}
    .page_VisitRecord ._box:hover,.page_VisitRecord ._vr_right>ul li:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
    .page_VisitRecord ._vr_left ._info{display: flex;margin-top: 10px;}
    .page_VisitRecord ._vr_left ._info>div{flex: 1;border-radius: 4px ;color: white;padding:10px 16px;background-color:  #E95252}
    .page_VisitRecord ._vr_left ._info>div:nth-child(1){margin-right: 5px}
    .page_VisitRecord ._vr_left ._info>div:nth-child(2){margin-left: 5px}
    .page_VisitRecord>div._vr_right>ul{padding: 0;background-color: transparent;border: none}
    .page_VisitRecord ._vr_right>ul li{padding: 20px;background-color: #FFFFFF;border: 1px solid #F1F2F5;border-radius: 4px ;margin-bottom: 10px;display: flex;align-items: center}
    .page_VisitRecord ._vr_right ._head{width:48px;height: 48px;border-radius: 50%;}
    .page_VisitRecord ._vr_right ._info{margin-left: 10px;width: 300px;}
    .page_VisitRecord ._vr_right ._info p:nth-child(1){color:#333333;font-size: 16px;margin-bottom: 5px;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .page_VisitRecord ._vr_right ._info p:nth-child(2){font-size: 14px;color: #666666}
    .page_VisitRecord ._vr_right .icon-img_dianhua{font-size:12px;color: #09D49D }
    .page_VisitRecord ._vr_right ._status{margin-left: 20px;width: 100px;}
    .page_VisitRecord ._vr_right ._status p{font-size: 16px;color: #333333}
    .page_VisitRecord ._vr_right ._status p .icon-yiquxiao{font-size: 14px;color: #E95252}
    .page_VisitRecord ._vr_right ._status p .icon-yiqueren{font-size: 14px;color: #4BCA81}
    .page_VisitRecord ._vr_right ._time{margin-left: 20px}
    .page_VisitRecord ._vr_right ._time p{font-size: 16px;color: #333333}
    .page_VisitRecord ._vr_right ._time p .icon-qingjia{font-size: 14px;color: #CCCCCC}
    .page_VisitRecord ._record{width: 300px;margin-left: 20px;font-size: 16px}
    .page_VisitRecord ._record>div p:nth-child(1) .icon-dingdanhao{color: #CCCCCC;font-size: 14px}
    .page_VisitRecord ._record>div p:nth-child(2){color:#666666;padding-left:25px;padding-top: 5px}
    .page_VisitRecord .fixedLayer{position: fixed;width: 100%; height: 100%; left: 0; top: 0; z-index: 999; background: rgba(0,0,0,.4);}
    .page_VisitRecord .fixedLayer .cont{width: 80%; height: 80%; margin:50px auto;  position: relative;} 
    .page_VisitRecord .fixedLayer .cont .contNote{position: absolute; z-index: 5555; min-width: 300px; height: 150px; padding: 20px; background: transparent;}
    .page_VisitRecord .fixedLayer .cont .contNote>img{border-radius: 32px; float: left; margin-right: 12px; width: 64px; height: 64px; border:2px solid #fff}
    .page_VisitRecord .fixedLayer .cont .contNote>p{line-height: 28px;}
    .page_VisitRecord .fixedLayer .tripDistanceDiv{min-width:250px; margin:10px 0 0 75px; height: 76px; padding:10px; background: #fff; border-radius: 10px;}
    .page_VisitRecord .fixedLayer .tripDistanceDiv>div{float:left;margin: 5px 8px 0;}
    .page_VisitRecord .fixedLayer .tripDistanceDiv>div p{line-height: 20px;}
    .page_VisitRecord .fixedLayer .tripDistanceDiv ._top{font-size: 14px; color: #4d4d4d;}
    .page_VisitRecord .fixedLayer .tripDistanceDiv ._bottom{font-size: 16px; color: #4d4d4d; font-weight: bold;}
</style>
<template>
    <div class="page_VisitRecord clearfix">
        <div class="_vr_left fl">
            <p class="_tit">{{$t('salesModule.VisitRecordList')}}</p>
            <ul class="clearfix _scrollbar">
                <li v-for="(item,index) in VisitLineList">
                    <span class="_time">{{item.dateStr}}</span>
                    <span class="_dot"></span>
                    <div class="_box" @click="getTodayVisitList(item.date),thisDay=item.dateStr">
                        <p>{{$t('Airticket.Air_Trip')}}&nbsp;&nbsp;&nbsp;<span>{{item.tripDistance==null?'0':item.tripDistance}}{{$t('pub.KM')}}</span></p>
                        <div class="_info">
                            <div><i class="iconfont icon-xinzengkehu-copy"></i>&nbsp;{{$t('salesModule.addCustomer')}}&nbsp;&nbsp;&nbsp;{{item.addNewCustomerCount}}</div>
                            <div><i class="iconfont el-icon-view"></i>&nbsp;{{$t('salesModule.VisitingCustomers')}}&nbsp;&nbsp;&nbsp;{{item.visitOldCustomerCount}}</div>
                            <div style="margin-left:10px;"><i class="iconfont icon-qianming"></i>&nbsp;{{$t('pub.SignIN')}}&nbsp;&nbsp;&nbsp;{{item.signInCount}}</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="_vr_right fl">
            <p class="_tit">{{thisDay}}{{$t('salesModule.VisitRecord')}}&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont icon-ditu" @click="getYingyan"></i></p>
            <ul>
                <li v-for="(item,index) in TodayVisitList">
                    <img class="_head" src="../../assets/img/bg_z1@3x.png" alt="">
                    <div class="_info">
                        <div>
                            <p>
                                <el-tooltip class="item" effect="dark" :content="item.customerName" placement="top-start" popper-class="max-w250">
                                    <span>{{item.customerName}}</span>
                                </el-tooltip>
                            </p>
                            <p><i class="iconfont icon-img_dianhua"></i>&nbsp;&nbsp;{{item.contact}}&nbsp;&nbsp;{{item.contactNumber}}</p>
                        </div>
                    </div>
                    <div class="_status">
                        <p v-if="item.createFromType==1&&item.visitState==1"><i class="iconfont icon-yiquxiao"></i>&nbsp;&nbsp;{{$t('salesModule.noVisited')}}</p>
                        <p v-if="item.createFromType==1&&item.visitState==2"><i class="iconfont icon-yiqueren"></i>&nbsp;&nbsp;{{$t('salesModule.haveGoutong')}}</p>
                        <p v-if="item.createFromType==2">{{$t('salesModule.addCustomer')}}</p>
                    </div>
                    <div class="_time" v-if="item.visitState==2">
                        <p><i class="iconfont icon-qingjia"></i>&nbsp;{{item.visitDateTime}}</p>
                    </div>
                    <div class="_record" v-if="item.visitState==2">
                        <div>
                            <p><i class="iconfont icon-dingdanhao"></i>&nbsp;&nbsp;{{$t('salesModule.fwRecord')}}</p>
                            <p>{{item.visitRecord}}</p>
                        </div>
                    </div>
                </li>
                <li v-show="TodayVisitList.length==0">
                    <div class="noData">
                        {{$t('system.content_noData')}}
                    </div>
                </li>
            </ul>
        </div>
        <div class="fixedLayer" v-show="fixedLayerShow" @click="fixedLayerShow=false">
        	  <div class="cont"   @click.stop>
        	  	  <div class="contNote">
        	  	  		<img v-if='!headIcon' src="../../assets/img/litheader.png"/>
						<img v-if='headIcon' :onerror="defaultImg" :src='headIcon'/>
        	  	  		<p style="font-size: 16px; color: #000;  -webkit-text-stroke: 0.1px #fff;">{{name}}</p>
        	  	  		<p style="font-size: 14px; color: #4D4D4D;  -webkit-text-stroke: 0.1px #fff;">{{DepartName}}·{{PostName}}</p>
        	  	  	    <div class="tripDistanceDiv">
        	  	  			<div>
        	  	  				<p class="_top">{{$t('salesModule.gjx')}}</p>
        	  	  				<p class="_bottom">{{tripDistance=='km'?'0km':tripDistance}}</p>
        	  	  			</div>
        	  	  			<div style="width: 1px; height: 36px; background: #e6e6e6;"></div>
        	  	  			<div>
        	  	  				<p class="_top">{{$t('salesModule.ghs')}}</p>
        	  	  				<p class="_bottom">{{costTime}}</p>
        	  	  			</div>
        	  	  	</div>
        	  	  </div>
        	  	  <div style="width: 100%; height: 100%; border-radius: 10px;" id="container"></div>
        	  </div>
        </div>
    </div>
</template>
<script>
import BMap from 'BMap'	
export default {
    data(){
        return{
           VisitLineList:[],
           TodayVisitList:[],
           defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
           headIcon:'',
           account:'',
           thisDay:'',
            fixedLayerShow:false,
	        time:'',
	        lineList:[],
	        Point:[],
	        PositionList:[],
	        costTime:'',
	        tripDistance:'',
	        name:'',
	        DepartName:'',
            PostName:'',
            visitMsg:{
                pageIndex:1,
                pageSize:1000,
                empId:0,
            },
        }
    },methods:{
    	getYingyan(){
    		 this.apipost('app_get_visit_line',{visitDate:this.time},res=>{
    		 	this.costTime=res.data.data.costTime
                this.tripDistance=res.data.data.tripDistance
              
    		 })
    		this.fixedLayerShow=true
    		let timestamp =new Date(this.time)
    		let start_time=timestamp.getTime()/1000
    		let end_time=start_time+86400

    		let url='?ak=L5Qw0GlbbCIMwgR4Uug3ogM40Imkd3CV&service_id=203768&entity_name='+this.account+'&start_time='+start_time+'&end_time='+end_time+'&is_processed=1&process_option=need_denoise=1,need_vacuate=1,need_mapmatch=1';
            this.$http.get('https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/track/gettrack'+url).then(res=>{
               let xy=res.data.points
               this.Point=[]
               xy.forEach(x=>{
               	this.Point.push({xy:[x.latitude,x.longitude]})
               })
              this.creatMap()
            })
    	},
    	showLocation(date){
    
    	},
        getVisitLineList(){
                this.apipost('app_get_visit_line_list',this.visitMsg,res=>{
                    if(res.data.resultCode==1){
                        this.VisitLineList = res.data.data.pageData
                        if(this.VisitLineList.length>0){
                            this.getTodayVisitList(this.VisitLineList[0].date)
                            this.thisDay = this.VisitLineList[0].dateStr
                        }
                    }else{
                        this.Error(res.data.message)
                    }
                },err=>{})
        },
        getTodayVisitList(date){ //获取今日拜访计划
        	this.time=date
            this.apipost('app_today_visit_list',{visitDate:date},res=>{
                if(res.data.resultCode==1){
                    this.TodayVisitList = res.data.data;
                }else{
                    this.Error(res.data.message)
                }
            },err=>{})
        },
 		getlineList(){   // 获取数据    
 			this.fixedLayerShow=true
            this.apipost('app_get_visit_line',{visitDate:this.time},res=>{
                if(res.data.resultCode==1){
                    this.lineList = res.data.data;
                    this.costTime=res.data.data.costTime
                    this.tripDistance=res.data.data.tripDistance
                    if(this.lineList){
                        this.Point = this.lineList.visitPoint
                        this.Point.forEach(x=>{
                            x.xy = x.point.split(',')
                        })
                        this.creatMap()
                    }else{
                        let div = document.createElement("div")
                            div.style.width='100%';
                            div.style.height='90%';
                            div.style.border='none';
                            div.style.overflow='hidden';
                            div.style.position='relative';
                            div.style.zIndex='0';
                            div.style.backgroundColor='rgb(243, 241, 236)';
                            div.style.color='rgb(0, 0, 0)';
                            div.style.textAlign='center';
                        let parent = document.getElementsByClassName('flexParent');
                        var map = new BMap.Map("container");    // 创建Map实例
                        map.centerAndZoom(new BMap.Point(104.073652,30.664369), 11);  // 初始化地图,设置中心点坐标和地图级别
                        //添加地图类型控件
                        map.addControl(new BMap.MapTypeControl({
                            mapTypes:[
                                BMAP_NORMAL_MAP,
                                BMAP_HYBRID_MAP
                            ]}));	  
                        map.setCurrentCity("成都");          // 设置地图显示的城市 此项是必须设置的
                        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                        this.displatDOM()
                    }
                }else{
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        creatMap(){
            var _this = this;            
            var map = new BMap.Map('container');
            // 复杂的自定义覆盖物
            function ComplexCustomOverlay(point,name,head,timeS){
                this._point = point;
                this._name = name;
                this._head = head;
                this._time = timeS;
            }
            ComplexCustomOverlay.prototype = new BMap.Overlay();
            ComplexCustomOverlay.prototype.initialize = function(map){
                this._map = map;
                var div = this._div = document.createElement("div");
                    div.style.position = "absolute";
                    div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
                    div.style.backgroundColor = "";
                    // div.style.border = "1px solid #BC3B3A";
                    div.style.color = "#333333";
                    div.style.height = "auto";
                    div.style.padding = "5px";
                    div.style.lineHeight = "18px";
                    div.style.whiteSpace = "nowrap";
                    div.style.MozUserSelect = "none";
                    div.style.fontFamily = "PingFangSC-fine"
                    div.style.color="#FF6666"
                    div.style.fontWeight="bold"
                    div.style.fontSize = "12px"
                var name = this._Pname = document.createElement("p");
                    name.style.textAlign = "center";
                    div.appendChild(name);
                    name.appendChild(document.createTextNode(this._name));

                var time = this._Ptime = document.createElement("p");
                    time.style.textAlign = "center";
                    div.appendChild(time);
                    time.appendChild(document.createTextNode(this._time));  
                var headDiv =  this.headDiv = document.createElement("img"); 
                    headDiv.style.backgroundColor = "#ffffff";
                    headDiv.style.border = "5px solid #FF6666";
                    headDiv.style.color = "white";
                    headDiv.style.height = "50px";
                    headDiv.style.width = "50px";
                    headDiv.style.borderRadius = "50%";
                    headDiv.style.padding = "5px";
                    headDiv.style.lineHeight = "18px";
                    headDiv.style.whiteSpace = "nowrap";
                    headDiv.style.MozUserSelect = "none";
                    headDiv.style.fontSize = "12px";
                    headDiv.src = this._head
                    div.appendChild(headDiv);
                var sanjiao = document.createElement("div");
                    sanjiao.style.width= '0';
                    sanjiao.style.height= '0';
                    sanjiao.style.borderLeft= '3px solid transparent';
                    sanjiao.style.borderRight= '3px solid transparent';
                    sanjiao.style.borderTop= '16px solid #ff6666';
                    sanjiao.style.margin="0 auto";
                    sanjiao.style.position="relative"
                    sanjiao.style.top="-5px"
                    div.appendChild(sanjiao);
                var that = this;
                var arrow = this._arrow = document.createElement("div");
                    arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/mrep/fwmap/static/house/images/label.png) no-repeat";
                    arrow.style.position = "absolute";
                    arrow.style.width = "11px";
                    arrow.style.height = "10px";
                    arrow.style.top = "22px";
                    arrow.style.left = "10px";
                    arrow.style.overflow = "hidden";
                    div.appendChild(arrow);
                
                var raduis = document.createElement("p");
                    raduis.style.width = "14px";
                    raduis.style.height = "6px";
                    raduis.style.borderRadius = "5px";
                    raduis.style.backgroundColor = "#B21C1C";
                    raduis.style.margin = "0 auto 0 auto"
                    div.appendChild(raduis);
                    map.getPanes().labelPane.appendChild(div);
                return div;
            }
            ComplexCustomOverlay.prototype.draw = function(){
                var map = this._map;
                var pixel = map.pointToOverlayPixel(this._point);
                this._div.style.left = pixel.x - parseInt(this._arrow.style.left) - 20+"px";
                this._div.style.top  = pixel.y - 150 + "px";
            }
            let centerIndex=parseInt(this.Point.length/2)
            map.centerAndZoom(new BMap.Point(this.Point[centerIndex].xy[1],this.Point[centerIndex].xy[0], 32.955),15);
            map.enableScrollWheelZoom();
            let PositionList = []
            this.Point.forEach((x,index)=>{   // 循环数据添加坐标点
                if(true){
                    let src = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3198678185,878755003&fm=27&gp=0.jpg"
                    let name = "无名大侠"
                    let time = "火星时间"
                    if(x.phtoto){
                        src = x.phtoto
                    }
                    if(x.name){
                        name = x.name
                    }
                    if(x.visitTime){
                        time = x.visitTime
                    }
                    PositionList.push(new BMap.Point(x.xy[1],x.xy[0]))
                }
            })
            let curve = new BMap.Polyline(PositionList, {strokeColor:"#E95252", strokeWeight:8, strokeOpacity:1});
            map.addOverlay(curve);
        },
        displatDOM(){
            let map = document.getElementById('container')
                map.style.border = "none"
        },
    },mounted(){
        if(this.$route.query.EmployeeId){
			this.visitMsg.empId=this.$route.query.EmployeeId;	
		}
    	let userInfo=this.getLocalStorage()
    	this.name=userInfo.emName
    	this.headIcon=userInfo.Icon
    	this.account=userInfo.ImAccount
    	this.DepartName=userInfo.DepartName
    	this.PostName=userInfo.PostName
        this.getVisitLineList()
        
    }
}
</script>
