<template>
		<div class="saleTaskList">
			<ul>
				<li>
					<p>{{$t('salesModule.MyNewTasks')}}</p>
					<div class="itemCont" id='deparmentTask'>
						<div class="noDataNotice" v-if='departmetTaskList.length==0'>
							<i class="iconfont icon-kong"></i>
							<p>{{$t('salesModule.NoTasks')}}</p>
						</div>
						<div class="contTypeOne" v-for="(item,index) in departmetTaskList">
								<p>
									<el-popover placement="bottom" width="260" trigger="hover">
									<div class="saleTaskpopover">
										<p style="font-size: 14px;font-weight: bold; color: #333; margin: 10px 0;">{{item.TaskName}}</p>
										<table class="saleTaskpopoverTable" border="0" cellspacing="0" cellpadding="0">
											<tr>
												<td width="80"><i class="iconfont icon-img-ren"></i>{{$t('salesModule.IssuedPeople')}} </td>
												<td>{{item.CreateBy}}</td>
											</tr>
											<tr>
												<td><i class="iconfont icon-ico-time"></i>{{$t('salesModule.IssuedTime')}}</td>
												<td>{{item.CreateDate}}</td>
											</tr>
											<tr>
												<td><i class="iconfont icon-ico-renwuyaoqiu"></i>{{$t('salesModule.TaskYaoQiu')}}</td>
												<td><span style="color: #257BF1;">{{item.TaskNum}}人</span></td>
											</tr>
											<tr>
												<td><i class="iconfont icon-ico-shijianfanwei"></i>{{$t('salesModule.TimeRange')}}</td>
												<td>{{item.StartTime}}{{$t('restaurant.res_To')}}{{item.EndTime}}</td>
											</tr>
											<tr>
												<td><i class="iconfont icon-ico-beizhu"></i>{{$t('salesModule.TaskRemark')}}</td>
												<td>{{item.Remarks}}</td>
											</tr>
										</table>
									</div>
									<span style="font-size: 16px; color: #333; cursor: pointer;" slot="reference">{{item.TaskName}}</span>
									</el-popover>
									<em>{{item.CreateBy}}</em></p>
								<p><el-progress :stroke-width="w12" :percentage="0" :show-text='false'></el-progress></p>
								<p class="smallfont">0/{{item.TaskNum}}{{item.Unit}}</p>
						</div>
					</div>
				</li>
				<li>
					<p>{{$t('salesModule.NowTask')}}</p>
					<div class="itemCont width530" id='nowTask'>
						<div class="noDataNotice" v-if='nowTaskList.length==0'>
							<i class="iconfont icon-kong"></i>
							<p>{{$t('salesModule.NoTaskIn')}}</p>
						</div>
						<div class="contTypeTwo" v-for="(item,index) in nowTaskList">
							<el-progress type="circle"  width='88' stroke-width='7' :percentage="item.rate" :color="item.color"></el-progress>
							<p class="goSaleTaskDetail" @click="goUrl('saleTaskDetail',item.id,'任务详情')">{{item.taskName}}</p>
							<p class="nowgo"><span @click="goNowUrl(item.taskType)">{{$t('salesModule.LijiActive')}}</span></p>
						</div>	
					</div>
				</li>
				<li>
					<p>{{$t('salesModule.MyZhiXing')}}<span @click="goUrl('saleTaskHistory',0,'历史任务')">{{$t('salesModule.HistoryTask')}}</span></p>
					<div class="itemCont width590 myChatList">
						<div id="mychart0" style="width: 130px; height: 130px;"></div>
						<div id="mychart1" style="width: 130px; height: 130px;"></div>
						<div id="mychart2" style="width: 130px; height: 130px;"></div>
						<div id="mychart3" style="width: 130px; height: 130px;"></div>
						<div id="mychart4" style="width: 130px; height: 130px;"></div>
					</div>
				</li>	
			</ul>
		</div>
</template>

<script>
	export default {
	    data(){
	    	return{
				w12:12,
				w2:2,
	    		defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
	    		allocatingTaskId:'',
	    		isAllocatingTask:false,  
	    		isOK:false,
	    		isDisabled:false,
	    		membersArr:[],
	    		membersArrCopy:[],
	    		addTask:false,
	    		addMsg1:{},
	    		departmetTaskMsg:{
	    			pageIndex:1,
	    			pageSize:5
	    		},
	    		nowTaskMsg:{
	    			pageIndex:1,
	    			pageSize:15
	    		},
	    		myTaskMsg:{
	    			pageIndex:1,
	    			pageSize:5
	    		},
	    		todayTaskMsg:{
	    			pageIndex:1,
	    			pageSize:10,
	    			Id:0
	    		},
	    		todayTaskMsgNew:{
	    			Id:0
	    		},
	    		addTaskMsg:{
	    			TaskName:'',
	    			StartTime:'',
	    			EndTime:'',
	    			TaskNum:'',
	    			TaskType:1,
	    			Remarks:'',
	    			UserTaskList:[],
	    			taskTime:'',
	    		},
	    		addTaskTableList:[],
	    		//返回数据
	    		departmetTaskList:[],
	    		nowTaskList:[],
	    		todayTaskList:[],
	    		todayTaskListNew:[],
	    		departmentPowerList:[],
	    		myTaskList:[],
	    		taskTypeList:[],
	    	    taskMembers:{}
	    	}
	    },
		mounted() {
			this.getDepartmetTask()
			this.getNowTask()
			this.getDepartmentPower()
			let that=this
			
			document.getElementById('deparmentTask').addEventListener('scroll',function(){  //部门新任务
		        if(this.scrollHeight-this.scrollTop===this.clientHeight){
		           that.departmetTaskMsg.pageIndex=Math.ceil(that.departmetTaskList.length/5)+1
		           that.getDepartmetTask()
		        }    	
		    })
			
			document.getElementById('nowTask').addEventListener('scroll',function(){  //当前
		        if(this.scrollHeight-this.scrollTop===this.clientHeight){
		           that.nowTaskMsg.pageIndex=Math.ceil(that.nowTaskList.length/15)+1
		           that.getNowTask()
		        }    	
		    })
		
		},
		methods: {
			
			getDepartmetTask(){
				this.apipost('TaskManagemnet_get_GetSellMyTaskList',this.departmetTaskMsg,res=>{
					if(res.data.resultCode==1){
						this.departmetTaskList=this.departmetTaskList.concat(res.data.data.pageData)
					}
				},err=>{})
			},
			getNowTask(){      
				this.apipost('TaskManagemnet_post_GetEmployeeNowTask',this.nowTaskMsg,res=>{
					if(res.data.resultCode==1){
						this.nowTaskList=this.nowTaskList.concat(res.data.data.pageData)
					}
				},err=>{})
			},
			getDepartmentPower(){
				this.apipost('TaskManagemnet_post_GetEmployeeExecutiveForce',{ID:0},res=>{
					if(res.data.resultCode==1){
						this.departmentPowerList=res.data.data
						this.departmentPowerList.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'
							}
							this.$nextTick(()=>{
							 this.$chartsUtils.saleTaskDepartment('mychart'+index,i.taskTypeStr,i.rate,insideColor,outsideColor)	
							})
						})

					}
				},err=>{})
			},
			goUrl (path,id,title) {
	            this.$router.push({ name: path,query:{"id":id,"PersonOrDepartment":1,blank:'y',tab:title} }) 
			},
			goNowUrl (type) {
				// 1收客   24销售额  3会员拜访 4会员拉新    5.需求探询
			if(type==1){
				//this.$router.push({ name: "VisitPlan"})
			}
			else if(type==2){}
			else if(type==3){this.$router.push({ name: "VisitPlan"}) }
			else if(type==4){this.$router.push({ name: "MyCustomer"}) }
			else if(type==5){this.$router.push({ name: "demandInquiry"}) }
	           
	        }
		}
    }
</script>
<style>
	.saleTaskList .noDataNotice{ text-align: center; padding-top: 80px; color: #999; font-size: 14px; }
	.saleTaskList .noDataNotice>i{font-size: 120px; color: #ccc;}
	.saleTaskList .noDataNotice>p{margin-top: 10px;}
	.saleTaskList{position: absolute; left: 20px; top:35px; bottom: 0;}
	.saleTaskList .goSaleTaskDetail{cursor: pointer;}
	.saleTaskList .goSaleTaskDetail:hover{color: #E95252;}
	.saleTaskList ul li{float: left; margin:10px 30px 0 0;}
	.saleTaskList .itemCont::-webkit-scrollbar{width: 4px;height: 1px;}
    .saleTaskList .itemCont::-webkit-scrollbar-thumb{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #eee;}
	.saleTaskList ul li .itemCont{width: 460px; height: 360px; border:1px solid #e5e5e5; background: #fff; border-radius: 4px; overflow-y: auto; padding:10px 20px;}
	.saleTaskList ul li .width530{width: 530px!important;}
	.saleTaskList ul li .width590{width: 590px!important;}
	.saleTaskList .myChatList>div{float: left;margin:20px 25px 19px;}
	.saleTaskList .itemCont .contTypeOne .el-progress__text{font-size: 14px!important;}
	.saleTaskList ul li>p{height: 14px; line-height: 14px; border-left:3px solid #E95252; font-size: 14px; color: #333; margin: 20px 0; text-indent: 10px;}
	.saleTaskList .addTaskTitle{height: 14px; line-height: 14px; border-left:3px solid #E95252; font-size: 14px; color: #333; margin: 20px 0; text-indent: 10px;}
	.saleTaskList .contTypeOne {margin-bottom:15px ;}
	.saleTaskList .contTypeOne p{font-size: 16px; color: #333;}
	.saleTaskList .contTypeOne p.smallfont{font-size: 14px; color: #666;}
	.saleTaskList .contTypeOne p{line-height:40px;}
	.saleTaskList .contTypeOne p i{color: #E95252; cursor: pointer;}
	.saleTaskList .contTypeOne p>em{color: #fff; background: #2C6ED5; font-size: 12px; font-style: normal; padding:0 2px; border-radius: 4px; margin-left:8px;}
	.saleTaskList .contTypeOne p>span{font-size: 12px; color: #47BF8C;}
	.saleTaskList .contTypeTwo {float: left; width: 126px; height: 156px; text-align: center; margin: 10px;}
	.saleTaskList .contTypeTwo>p{font-size: 14px; color: #666;margin-top: 10px;}
	.saleTaskList .itemCont .contTypeTwo .el-progress__text{font-size: 20px!important;} 
	.saleTaskList ul li>p>span{float: right; color: #E95252; cursor:pointer;}
	.saleTaskList .itemCont .contTypeThree{margin:20px 0; overflow: hidden;line-height: 30px; height: 30px}
	.saleTaskList .itemCont .contTypeThree>div{float: left; font-size: 14px;}
	.saleTaskList .itemCont .contTypeThree .name{width: 100px;}	
	.saleTaskList .itemCont .contTypeThree .name>img{width: 24px; height: 24px; border-radius: 12px; vertical-align:middle}
	.saleTaskList .itemCont .contTypeThree .department{width: 110px;}
	.saleTaskList .itemCont .contTypeThree .message{width:200px;}
	.saleTaskList .itemCont .contTypeThree .message>p{float: left;}
	.saleTaskList .itemCont .contTypeThree .message>p>span{color:#47BF8C;}
	.saleTaskList .itemCont .contTypeThree .message p.msg{max-width: 120px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
	.saleTaskList .itemCont .contTypeThree .time{float: right; text-align: right; color: #999;}
	.saleTaskpopover{padding:0 10px 10px; font-size: 12px;}
	.saleTaskpopoverTable{margin: 10px 0 20px 0;}
	.saleTaskpopoverTable tr{height: 34px; }
	.saleTaskpopoverTable td{font-size: 12px!important; color: #666;}
	.saleTaskpopoverTable td>i{margin-right: 3px; color: #d9d9d9;}
	.saleTaskList .addTaskLayer{position:absolute; padding:0 20px 20px; left: 0; bottom: 0; border-bottom:1px soild #D2D2D2; width: 100%; height:520px; z-index: 5; background: #ffffff;  border-top: 1px solid #D2D2D2;}
	.saleTaskList .addTaskLayer .addMsg{width: 100%; height: 435px;}
	.saleTaskList .addTaskLayer .addMsg>div{float: left; min-height: 300px; max-height: 435px;  font-size: 12px; padding:0 13px; margin-right: 30px;}
	.saleTaskList .addTaskLayer .addMsg>div>p{margin: 15px 0;}
	.addTaskLayer .el-form-item__label{font-size: 12px!important;}
	.addTaskLayer .el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange{border-radius: 17px;}
    .el-select .el-input {border-radius: 17px;height: 34px;}
    .h34 .el-range__icon,.h34 .el-range-separator{line-height: 29px;}
    .addTaskLayerTable{background: #EDEDED;}
    .addTaskLayerTable td{padding: 10px; background: #FFF; text-align: center;}
    .addTaskLayerTable th{background: #EDEDED; padding:10px;}
    .addTaskLayerTableDiv{overflow: hidden;}
    .addTaskLayerTableDiv>p{display:inline-block;margin-bottom: 10px;}
    .addTaskLayerTableDiv .finish{width: 56px; text-align:left;}
	 .addTaskLayerTableDiv .finishH{height: 30px;}
	 .finishNumTips{height: 12px;}
	 .finishNum{width: 40px;}
	 .nowgo{width:90px;height:30px;background:rgba(255,255,255,1);border:1px solid rgba(233,82,82,1);border-radius:15px;display: inline-block;}
	 .nowgo span{width:56px;height:12px;font-size:14px;font-family:MicrosoftYaHei;font-weight:400;color:rgba(233,82,82,1);cursor:pointer;display: inline-block; vertical-align: middle;text-align: center; }
</style>