<template>
	<div class="salePersonManagement">
    	<!--<treeselect
	    :multiple="true"
	    :options="options"
	    :sort-value-by="sortValueBy"
	    v-model="value"
	    />-->
		<div class="searchNav">
			<ul>
			    <li>
			    	<span>所属部门</span>
					<treeselect class='w200 fl'
					  :options="departmentList"
					   v-model="DepartmentId"
					   placeholder="不限"
					  :normalizer="normalizer"
					  />
			    </li>
				<li><span>姓名</span><el-input v-model='msg.EmName' class='w200'></el-input></li>
				<li style="float: right!important;margin-right: 15px; text-align: right!important;">
					<input type="button" class="normalBtn" value="查找" @click="getList();tPageIndex()"/></li>
				</li>
			</ul>
		</div>
		<div class="salePersonList">
			<div class="ListItem" v-for="(item,index) in dataList">
				<div class="divOne">
					<div class="name">
						<img v-if='!item.EmPhoto' src="../../assets/img/litheader.png"/>
				        <img v-if='item.EmPhoto' :onerror="defaultImg" :src='item.EmPhoto'/>						
						{{item.EmName}}
					</div>	
					<div class="depatment">
						<i class="iconfont icon-bumen"></i>
						{{item.DepartmentName}}
					</div>
				</div>
				<div class="divThree"></div>
				<div class="divTwo">
					<div class="mvp">
						<span>MVP</span>
						{{item.MVPCount}}次
					</div>
					<div class="mup">
						<span>MUP</span>
						{{item.MUPCount}}次
					</div>
					<div class="task">
						当前任务
							<el-popover placement="bottom" :width="260" trigger="hover">
							<div class="saleTaskpopover">
								<p style="font-size: 14px;font-weight: bold; color: #333; margin: 10px 0px 20px 0px;">当前任务</p>
								<p v-if='item.TaskCount==0'>暂无任务</p>
								<div v-for="i in item.SellTaskExtendList">
									<p style="margin: 0px 0px 10px 0px;">{{i.TaskName}}<span class="fr">{{i.DepartmentFinishNum==null?0:i.DepartmentFinishNum}}/{{i.DepartmentTaskNum}}</span></p>
								    <p style="margin: 0px 0px 30px 0px;" v-if='(i.DepartmentFinishNum/i.DepartmentTaskNum)<1'><el-progress  :stroke-width='ba'  :percentage="(i.DepartmentFinishNum/i.DepartmentTaskNum)*100" color='#2AAEF2' :show-text='false'></el-progress></p>
								    <p style="margin: 0px 0px 30px 0px;"  v-if='(i.DepartmentFinishNum/i.DepartmentTaskNum)>=1'> <el-progress  :stroke-width='ba'  :percentage="(i.DepartmentFinishNum/i.DepartmentTaskNum)*100" color='#47BF8C' :show-text='false'></el-progress></p>
								</div>
							</div>
							<span style="font-size: 16px; font-weight: bold; color: #47BF8C; cursor: pointer;" slot="reference">{{item.TaskCount}}</span>
							</el-popover>						
					</div>
					<div class="power">
						<span>综合能力</span>
						<el-progress type="circle" :stroke-width="w8" :width='60' :percentage="item.SynthesizeCapacity" color="#2AAEF2"></el-progress>
					</div>
				</div>
				<div class="divThree"></div>
				<div class="divFour">
					<!--<input type="button" class="hollowFixedBtn" value="鹰眼" @click="goUrl('yingyanMap')"/>
					&nbsp;&nbsp;&nbsp;-->
					<input type="button" class="hollowFixedBtn" value="查看" @click="getEmployeePower(item);getDetail(item);getTaskList(item)"/>
				</div>
			</div>
		</div>
		
	     <div>
	        <el-pagination 
	            background
	            @current-change="handleCurrentChange" 
	            :current-page.sync="currentPage"
	            layout="total,prev, pager, next, jumper"
	            :page-size=msg.pageSize 
	            :total=total>
	        </el-pagination>
	    </div>		
	    <div class="salePersonDetailLayer" v-show="outerVisible" @click="outerVisible=false">
			<div class="salePersonLayer" @click.stop>
				<p class="name">{{employeeMsg.EmName}}&nbsp;资料卡</p>
				<div class="detail">
					<div class="dOne">
						<img v-if='!employeeMsg.EmPhoto' src="../../assets/img/litheader.png"/>
				        <img v-if='employeeMsg.EmPhoto' :onerror="defaultImg" :src='employeeMsg.EmPhoto'/>
				        <p style="font-size: 18px">{{employeeMsg.EmName}}</p>
				        <p  style="margin: 12px 0 25px;"><span class="rank">
				        	{{employeeMsg.Ranking}}</span></p>
				        <p class="oneItem"><span>年龄</span>{{employeeMsg.ageStr}}</p>
				        <p class="oneItem"><span>入职</span>{{employeeMsg.EmEntry}}</p>
				        <p class="oneItem"><span>岗位</span>{{employeeMsg.PostName}}</p>
					</div>
					<div class="dSplit"></div>
					<div class="dTwo">
						<div v-for="i in employeeMsg.SellEmployeeCapacityList">
							<p>【{{i.TaskTypeStr}}能力】</p>
							<p>{{i.Capacity}}</p>
						</div>
					</div>
					<div class="dSplit"></div>
					<div class="dFour">
						<div id="mychart0"></div>
						<div id="mychart1"></div>
						<div id="mychart2"></div>
						<div id="mychart3"></div>
						<div id="mychart4"></div>						
					</div>
					<div class="dSplit"></div>
					<div class="dThree">
						<p style="margin-bottom: 15px;">【综合能力】</p>
						<el-progress type="circle"  :width='120' :percentage="employeeMsg.SynthesizeCapacity==null?0:employeeMsg.SynthesizeCapacity" color="#f90"></el-progress>
					    <div>
					    	<p>
					    		<span class="mvp">MVP</span>
					    		<br/>
					    		{{employeeMsg.MVPCount==null?0:employeeMsg.MVPCount}}
					    	</p>
					    	<p>
					    		<span class="mup">MUP</span>
					    		<br/>
					    		{{employeeMsg.MUPCount==null?0:employeeMsg.MUPCount}}
					    	</p>
					    	<p>
					    		<span class="ts">投诉</span>
					    		<br/>
					    		{{employeeMsg.ComplaintCount==null?0:employeeMsg.ComplaintCount}}
					    	</p>
					    </div>
					</div>
				</div>
				
				<div class="listTitle">
					<span>月份</span>
					<span>拉客数</span>
					<span>销售额</span>
					<span>会员拜访</span>
					<span>会员拉新</span>
					<span>需求探询</span>
				</div>
				<div class="listCont" id="listCont">
					<p style="text-align: center; padding: 20px 0; font-size: 16px; letter-spacing: 1px;" v-if='monthTaskList.length<1'>暂无数据</p>
					<li v-for="item in monthTaskList">
						<span>{{item.sTime}}</span>
						<span><i class="iconfont icon-bumen"></i>{{item.taskNum1}}</span>
						<span><i class="iconfont icon-jinrixiaoshoue"></i>{{item.taskNum2}}</span>
						<span><i class="iconfont icon-banben"></i>{{item.taskNum3}}</span>
						<span><i class="iconfont icon-xinzengkehu-copy"></i>{{item.taskNum4}}</span>
						<span><i class="iconfont icon-img_xlgl"></i>{{item.taskNum5}}</span>
					</li>
				</div>
				<div class="total">
					<span>累积</span>
					<span v-for="item in employeeMsg.SellEmployeeCapacityList">
						{{item.TotalCapacity}}
					</span>
				</div>
			</div>
        </div>
	</div>
	
</template>

<script>
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	export default {
	 components: { Treeselect },
	    data(){
	    	return{
	    		
			    sortValueBy: 'ORDER_SELECTED',
	    		
                normalizer(node) {
                    return {
                        id: node.DepartmentId,
                        label: node.DepartmentName,
                        children: node.ChildList,
                    }
                },	    		
	    		w8:2,
				ba:8,
				currentPage: 1,
				outerVisible:false,
				DepartmentId:null,
		    	msg:{
		    		RB_Department_Id:-1,
		    		EmName:'',
		    		pageIndex:1,
		    		pageSize:5
		    	},
		    	monthMsg:{
		    		ID:'-1',
		    		pageIndex:1,
		    		pageSize:20,
		    	},
	            defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
	            total:0, 		    	
		    	//返回数据
		    	dataList:[],
		    	monthTaskList:[],
		    	EmployeePowerList:[],
		    	departmentList:[],
		    	employeeMsg:{},
	    	}
	    },
	    methods:{
	    	getDepartment(){
				this.apipost('Advertising_get_GetNowDepartmentAndSubordinate',{},res=>{
	    			if(res.data.resultCode==1){
	    				this.departmentList=res.data.data
	    			}else{
	    				this.$message.error(res.data.message)
	    			}
	    		},err=>{})
	    	},
	    	getDetail(obj){
	    		this.monthTaskList=[]
	    		this.apipost("TaskManagemnet_get_GetEmpSellBaseCapacity",{ID:obj.EmployeeId},res=>{
	    			if(res.data.resultCode==1){
	    				this.outerVisible=true
	    				this.employeeMsg=res.data.data	    				
	    			}else{
	    				this.$message.error(res.data.message)
	    			}
	    		},err=>{})
	    	},
	    	
	    	getEmployeePower(obj){
				this.apipost('TaskManagemnet_post_GetEmployeeExecutiveForce',{ID:obj.EmployeeId},res=>{
					if(res.data.resultCode==1){
						this.EmployeePowerList=res.data.data
						this.EmployeePowerList.forEach((i,index)=>{
						   let insideColor
						   let outsideColor
							if(i.rate==0){
								insideColor='#999999'
								outsideColor='#999999'
							}else if(i.rate<50&&i.rate>0){
								insideColor='#E85252'
								outsideColor='#FFDDDD'
							}else if(50<=i.rate&&i.rate<80){
								insideColor='#FFBA1F'
								outsideColor='#FFE09B'
							}else if(80<=i.rate&&i.rate<100){
								insideColor='#2AAEF2'
								outsideColor='#BDE9FF'
							}else if(i.rate==100){
								insideColor='#47BF8C'
								outsideColor='#47BF8C'
							}
							
						//	setTimeout( this.$chartsUtils.saleTaskDepartment('mychart'+index,i.taskTypeStr,i.rate,insideColor,outsideColor)	,3000)
					
							this.$nextTick(()=>{
							 this.$chartsUtils.saleTaskDepartment('mychart'+index,i.taskTypeStr,i.rate,insideColor,outsideColor)	
							})
						})
					}
				},err=>{})
			},
	    	
	    	getTaskList(obj){
	    		this.monthMsg.ID=obj.EmployeeId
	    		this.apipost('TaskManagemnet_get_GetMonthStatistics',this.monthMsg,res=>{
	    			if(res.data.resultCode==1){
	    				this.$nextTick(()=>{
	    					this.monthTaskList=this.monthTaskList.concat(res.data.data.pageData)
	    				})
	    			}
	    		},err=>{})
	    	},
	    	
	    	getList(){
	    		
	    		if(	this.DepartmentId==null){
	    			this.msg.RB_Department_Id='-1'
	    		}
	    		else{
	    			this.msg.RB_Department_Id=this.DepartmentId
	    		}
	    		this.apipost('TaskManagemnet_get_GetEmpByDepartmentIds',this.msg,res=>{
	    			if(res.data.resultCode==1){
	    				this.dataList=res.data.data.pageData
	    				this.total = res.data.data.count;
	    			}
	    		},err=>{})
	    	},
	      	tPageIndex() {//查询初始化页码
	            this.msg.pageIndex = 1;
	            this.currentPage = 1
	        },
	        handleCurrentChange(val) {//翻页功能按钮
	            this.msg.pageIndex = val;
	            this.getList();
	        },
	        goUrl (path,id) {
	            this.$router.push({ name: path}) 
			},
	    },
	    mounted(){
	    	this.getList()
	    	this.getDepartment()
	    	let that=this
			document.getElementById('listCont').addEventListener('scroll',function(){  //部门新任务
		        if(this.scrollHeight-this.scrollTop===this.clientHeight){
		           that.monthMsg.pageIndex=Math.ceil(that.monthTaskList.length/20)+1
		           that.getTaskList()
		        }    	
		    })		    	
	    },
    }
</script>

<style>
	.salePersonManagement .searchNav{width:100%;height:40px;line-height: 40px; margin-top: 20px;}
	.salePersonManagement .searchNav li{float:left; width:350px;font-size:14px}
	.salePersonManagement .searchNav li>span{float: left; width: 120px; height: 40px; line-height: 40px; text-align: right; padding-right: 10px;}
	.salePersonList .ListItem{width:1660px; height: 100px;  margin-top: 20px; font-size: 14px; color: #333;}
	.salePersonList .ListItem:hover{box-shadow: 2px 2px 5px rgba(0,0,0,.1);}
	.salePersonList .ListItem>div{float: left; background: #fff; height: 100px;}
	.salePersonList .ListItem .divOne{width: 350px; border-radius: 4px 8px 8px 4px; padding:30px 20px; line-height: 20px;}
	.salePersonList .ListItem .divOne>div{float: left;}
	.salePersonList .ListItem .divOne .name{width: 150px; line-height: 40px;}
	.salePersonList .ListItem .divOne .name>img{width: 40px; height: 40px; border-radius: 20px; float: left; margin-right: 10px;}	
	.salePersonList .ListItem .divOne .depatment{width: 150px; line-height: 40px;}
	.salePersonList .ListItem .divTwo{width: 1000px;   border-radius:8px;  line-height: 40px;}
	.salePersonList .ListItem .divTwo>div{float: left;width: 240px; padding:30px 20px;}
	.salePersonList .ListItem .divTwo .mvp>span{background:#FAA915; color: #fff; padding: 0 3px; border-radius: 4px;margin-right: 3px;}
	.salePersonList .ListItem .divTwo .mup>span{background:#cccccc; color: #fff; padding: 0 3px; border-radius: 4px; margin-right: 3px;}
	.salePersonList .ListItem .divTwo .power{padding: 10px 0;}
	.salePersonList .ListItem .divTwo .power>span{float: left;margin: 20px 10px 0 0;}
	.salePersonList .ListItem .divTwo .power>div{margin-top: 10px;}
	.salePersonList .ListItem .divThree{ height:84px; margin-top: 8px; width: 1px; border-left: 1px dashed #DCDFE6;}	
	.salePersonList .ListItem .divFour{width: 308px; border-radius:8px; padding:30px;text-align: center;}		
	.notitle .el-dialog__header{display: none!important}
	.notitle .el-dialog__body{padding: 0!important; max-height: 632px!important;}	
	.salePersonDetailLayer{position: fixed;width: 100%; height: 100%; z-index: 9999; background: rgba(0,0,0,.6); left: 0; top: 0;}	
	.salePersonLayer{width:1006px; left: 50%; top: 50%; position: absolute; margin-left: -503px; margin-top: -316px;  height:632px; padding: 20px 23px 20px 0; background: url(../../assets/img/saleTaskLayerBg.png)no-repeat center center; color: #fff;}
	.salePersonLayer>p.name{border-left: 3px solid #fff; margin-left: 23px; text-indent: 10px; height: 14px; line-height: 14px; margin-bottom: 20px;}
	.salePersonLayer .detail{overflow: hidden;}
	.salePersonLayer .detail>div{float: left; height: 310px;}
	.salePersonLayer .detail .dOne{width: 163px; text-align: center;}
	.salePersonLayer .detail .dOne>img{width: 80px; height: 80px; border-radius: 40px; margin: 10px 0 10px 0; clear: both;}
	.salePersonLayer .detail .dOne .rank{width: 60px;height: 20px; text-align: center; line-height: 20px; font-size: 14px; display:inline-block; background: #E95252; border-radius: 10px;}
	.salePersonLayer .detail .dOne .oneItem{width: 120px; text-align: left; margin-left: 23px; height: 24px; line-height: 24px; border-radius: 12px; margin-top: 12px; background: rgba(255,255,255,.2); font-size: 12px; text-indent: 10px;}
	.salePersonLayer .detail .dOne .oneItem>span{color: #999; margin-right: 10px;}
	.salePersonLayer .detail .dTwo{width: 290px;}
	.salePersonLayer .detail .dTwo>div{float: left; width: 145px; height: 110px; text-align: center;}
	.salePersonLayer .detail .dTwo>div>p:last-child{font-size: 48px; color: #2AAEF2; margin-top: 20px;}
	.salePersonLayer .detail .dThree{width: 230px; text-align: center; float: right;}
	.salePersonLayer .detail .dThree>div>p{float: left; width:76px; text-align: center; font-size: 30px;margin-top: 40px;}
	.salePersonLayer .detail .dThree>div>p>span{display: inline-block;width: 40px;margin: 0 0 10px 8px; height: 16px; font-size: 12px; border-radius: 8px; color: #fff; line-height: 16px; text-align: center;}
	.salePersonLayer .detail .dThree .mvp{background:#FAA915}
	.salePersonLayer .detail .dThree .mup{background:#ccc}
	.salePersonLayer .detail .dThree .ts{background:#E95252}
	.salePersonLayer .detail .dSplit{width: 1px; border-left: 1px dashed #B3B3B3;}
	.salePersonLayer .detail .dFour{width: 290px;}
	.salePersonLayer .detail .dFour>div{float: left; width: 120px; height:110px; text-align: center;margin-left: 15px;}
	.salePersonLayer .listTitle{width: 960px; margin-left: 23px; height: 38px; line-height: 38px; background:#0042AF; text-indent: 30px; margin-top: 30px; border-radius: 4px 4px 0 0;}
	.salePersonLayer .listTitle>span{float: left; width: 160px;}
	.salePersonLayer .total{width: 960px; margin-left: 23px; height: 38px; line-height: 38px; background: rgba(255,255,255,.2); text-indent: 30px; border-radius:0 0 4px 4px}
	.salePersonLayer .total>span{float: left; width: 160px; font-weight: bold; color: #FAA915;}
	.salePersonLayer .total>span:first-child{color: #fff;}
	.salePersonLayer .listCont{width: 960px; margin-left: 23px;height: 114px;  overflow-y: auto;}
	.salePersonLayer .listCont li{height: 38px; line-height: 38px;}
	.salePersonLayer .listCont li:nth-child(2n+1){background: transparent;}
	.salePersonLayer .listCont li:nth-child(2n){background: rgba(255,255,255,.2);}
	.salePersonLayer .listCont li:hover{background: #fff;color: #333;}
	.salePersonLayer .listCont li>span{float: left; width: 160px;text-indent: 30px;}
	.salePersonLayer .listCont li>span:last-child{width: 156px;}
	.salePersonLayer .listCont li>span>i{margin-right: 3px;}
	.listCont::-webkit-scrollbar{width: 4px;height: 1px;}
	.listCont::-webkit-scrollbar-thumb{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #999;}	
</style>