<template>
	<div>
		<div class="saleTaskDetailNav">
			<div class="top">
				{{DataDetail.taskName}}<span class="meta">{{DataDetail.createBy}}</span>
				<span class="fr switch">是否汇总
				<el-switch
				  v-model="value2"
				  active-color="#53D669"
				  inactive-color="#CCCCCC"
				  active-value="1"
				  inactive-value="0" @change="tPageIndex(),GetPageList()"
				  >
				</el-switch>
				</span>
			</div>
			<div class="bottom">
				<div class="bottomOne">
					<i class="iconfont icon-ico-shijianfanwei"></i>
					<span>时间范围：</span>{{DataDetail.datetimeStr}}
				</div>
				<div class="bottomTwo">
					<p>{{DataDetail.statusStr}}</p>
					<!-- <p v-if="DataDetail.departmentFinishNum<DataDetail.departmentTaskNum"><el-progress :stroke-width="8" :percentage="(DataDetail.departmentFinishNum/DataDetail.departmentTaskNum)*100" color='#e95252' :show-text='false' ></el-progress></p>
						<p  v-else-if="DataDetail.departmentFinishNum>=DataDetail.departmentTaskNum" ><el-progress :stroke-width="8" :percentage="(DataDetail.departmentFinishNum/DataDetail.departmentTaskNum)*100" color='#47bf8c' :show-text='false'></el-progress></p> -->
					<p v-if="DataDetail.statusStr=='未开始'"><el-progress :stroke-width='ba'  :percentage="(DataDetail.departmentFinishNum/DataDetail.departmentTaskNum)*100" color='#ccc' :show-text='false' ></el-progress></p>
						<p  v-else-if="DataDetail.statusStr=='已结束'" ><el-progress :stroke-width='ba'  :percentage="(DataDetail.departmentFinishNum/DataDetail.departmentTaskNum)*100" color='#E95252' :show-text='false'></el-progress></p>
						<p v-else-if="DataDetail.statusStr=='正在进行中'"><el-progress :stroke-width='ba'   :percentage="(DataDetail.departmentFinishNum/DataDetail.departmentTaskNum)*100" color='#2AAEF2' :show-text='false' ></el-progress></p>
						<p  v-else-if="DataDetail.statusStr=='已完成'" ><el-progress :stroke-width='ba'  :percentage="(DataDetail.departmentFinishNum/DataDetail.departmentTaskNum)*100" color='#47BF8C' :show-text='false'></el-progress></p>
					<p class="smallfont">{{DataDetail.departmentFinishNum}}/{{DataDetail.departmentTaskNum}}</p>
				</div>
				<div class="bottomThree">
					<p><span>当前状态：</span>
					<span v-if="DataDetail.statusStr=='未开始'" class="statusStrColor1">{{DataDetail.statusStr}}</span>
					<span v-else-if="DataDetail.statusStr=='已结束'" class="statusStrColor4">{{DataDetail.statusStr}}</span>
					<span v-else-if="DataDetail.statusStr=='正在进行中'" class="statusStrColor2">{{DataDetail.statusStr}}</span>
					<span v-else-if="DataDetail.statusStr=='已完成'" class="statusStrColor3">{{DataDetail.statusStr}}</span>
					</p>
				</div>
				<div class="bottomFour">
					<i class="iconfont icon-qingjia"></i>
					<span>剩余时间:{{CountdownStr}}</span>
				</div>
			</div>
		</div>
		
		<div class="saleTaskDetailList" v-if="this.value2=='0'" v-loading="loading">
			<div  v-if="DataList.length!=0">
				<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.employeeName}}
						</div>
						<div class="depatment">
							<i class="iconfont icon-bumen"></i>
							{{item.departmentName}}
						</div>
						<div class="message">
							完成任务，贡献<span>+{{item.taskNum}}</span>
						</div>
					</div>
					<div class="divTwo"></div>
					<div class="divThree">
						<div class="meta">数据来源</div>
						<div class="metaMsg">
							<p>{{item.sourceTypeStr}}</p>
						</div>
						<div class="btn">
							<input type="button" class="hollowFixedBtn w120" value="查看数据来源" />
						</div>
					</div>
				</div> 
			</div>
			<div class="noData" v-else>
				暂无数据
			</div>
		</div>
		
		
	<div class="saleTaskDetailListAll" v-else-if="this.value2=='1'" v-loading="loading">
		<div v-if="DataDetailList.length!=0">
			<div class="ListItem" v-for="(item,index) in DataDetailList"  >
				<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.employeeName}}
					</div>
					<div class="depatment">
						<i class="iconfont icon-bumen"></i>
						{{item.departmentName}}
					</div>
				</div>
				<div class="divTwo"></div>
				<div class="divThree">
					<div class="message">
						累积贡献<span>+{{item.finishNum}}</span>
					</div>
					<div class="metaMsg">
						<p>{{item.rate>50?'战斗力爆表':'部门标杆'}}</p>
							<p v-if="item.finishNum<item.taskNum"><el-progress stroke-width=8 :percentage="(item.finishNum/item.taskNum)*100" color='#e95252' :show-text='false' ></el-progress></p>
						<p  v-else-if="item.finishNum>=item.taskNum" ><el-progress stroke-width=8 :percentage="(item.finishNum/item.taskNum)*100" color='#47bf8c' :show-text='false'></el-progress></p>
						<p>贡献率{{item.rate}}%</p>
					</div>
					<div class="rank">
						<span class="rankTypeOne" v-if="item.rankingStr=='MVP'">{{item.rankingStr}}</span>
						<span class="rankTypeThree" v-else-if="item.rankingStr=='MUP'">{{item.rankingStr}}</span>
						<span class="rankTypeTwo" v-else>{{item.rankingStr}}</span>
					</div>
				</div>
			</div>
		</div>
			<div class="noData" v-else>
				暂无数据
			</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>
	
</template>

<script>
export default {
    data(){
        return{
            msg:{
				ID:0,
				FinishNum:0,
			    pageIndex:1,
				pageSize:6,
				PersonOrDepartment:0
			},  
			getmsg:{
				ID:0 ,
				PersonOrDepartment:0
			},
			ba:8,
			DataList:[], 
			DataDetailList:[],
			DataDetail:"",
			CountdownStr:"",
			intervalid:null,
			defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
			value2:"0",  
   			total:0,  
            currentPage:1,
            loading:true,    
            text:'',
            dialogTitle:'',
            ed:false
        }
	},
		beforeDestroy() {
				if(this.intervalid) { //如果定时器还在运行 或者直接关闭，不用判断
					clearInterval(this.intervalid); //关闭
				}
		},
		methods:{
        getList(){ //获取统计列表
			this.loading = true
            this.apipost('TaskManagemnet_post_GetByTaskId',this.msg,res=>{
                 if(res.data.resultCode==1){
                    this.total = res.data.data.count;
                    let data = res.data.data.pageData;
                   
                    this.DataList = data
                    this.loading = false;
                }else{
                    this.$message.error(res.data.message)
                    this.loading = false;
                }                            
            },err=>{})
		},
		  getDetailsList(){ //获取详情列表
			this.loading = true
            this.apipost('TaskManagemnet_post_GetTaskUseByTaskId',this.msg,res=>{
                 if(res.data.resultCode==1){
                    this.total = res.data.data.count;
                    let data = res.data.data.pageData;
					this.DataDetailList = data
					if	(this.DataDetailList>0){
						this.msg.FinishNum=this.DataDetailList[this.DataDetailList-1].FinishNum;
					}
                    this.loading = false;
                }else{
                    this.$message.error(res.data.message)
                    this.loading = false;
                }                            
            },err=>{})
		},	
		  GetDataDetail(){ //获取详情
            this.apipost('TaskManagemnet_post_GetDetails',this.getmsg,res=>{
                 if(res.data.resultCode==1){
                    let data = res.data.data;
                   
					this.DataDetail = data
					this.intervalid = setInterval(()=> {this.InitTime()  }, 1000);
                    this.loading = false;
				}
				else{
                    this.$message.error(res.data.message)
                    this.loading = false;
                }                            
            },err=>{})
		},
		
		tPageIndex() {//查询初始化页码
            this.msg.pageIndex = 1;
            this.currentPage = 1
        },
        handleCurrentChange(val) {//翻页功能按钮
            this.msg.pageIndex = val;
           if(this.value2=="0"){
				this.getList();
			}
			else{
				this.getDetailsList();
			}
		},
		GetPageList(){
			this.msg.ID=this.$route.query.id;
			if(this.value2=="0"){
				this.getList();
			}
			else{
				this.getDetailsList();
			}
		},
		InitTime(){
			var dd,hh,mm,ss = "";
			var time = new Date(this.DataDetail.endTime).getTime()-new Date().getTime();
			if(time<=0){
			clearInterval(this.intervalid)
			this.CountdownStr= '已结束'
			}else{
				let then = this
				time = time/1000
				dd = Math.floor(time / 60 / 60 / 24);
				hh = Math.floor((time / 60 / 60) % 24);
				mm = Math.floor((time / 60) % 60);
				ss = Math.floor(time  % 60);
				this.CountdownStr = dd+"天"+hh+"小时"+mm+"分"+ss+"秒";
			}
		},
        goUrl(path,time) {
            this.$router.push({ name: path,query:{"time":time} }) 
        },		
    },mounted(){
		let userInfo=this.getLocalStorage();
		this.msg.ID=this.getmsg.ID=this.$route.query.id;
		this.msg.PersonOrDepartment=this.getmsg.PersonOrDepartment=this.$route.query.PersonOrDepartment;
		this.GetDataDetail();
	    this.getList();   
    }
}
</script>

<style>
	.saleTaskDetailNav{width: 1660px; height: 168px; background: #fff; border-radius: 4px; margin: 20px 0; padding: 20px; }
	.saleTaskDetailNav .top{line-height:30px; padding: 0 0 10px 0; font-size: 16px; color: #333; border-bottom: 1px solid #F2F2F2;}
	.saleTaskDetailNav .top span.meta{color: #fff; background: #2C6ED5; font-size: 12px; font-style: normal; padding:0 2px; border-radius: 4px; margin-left:8px;}
	.saleTaskDetailNav .top span.switch{font-size: 12px; color: #666; vertical-align: sub; line-height: 20px;}
	.saleTaskDetailNav .top .el-switch{vertical-align: sub!important}
	.saleTaskDetailNav .bottom{font-size: 14px;padding: 30px 0 0 0;}
	.saleTaskDetailNav .bottom i{color: #d9d9d9;}
	.saleTaskDetailNav .bottom span{color: #666;}
	.saleTaskDetailNav .bottom>div{float: left;}
	.saleTaskDetailNav .bottom .bottomOne{width: 400px;}
	.saleTaskDetailNav .bottom .bottomTwo{width: 500px;}
	.saleTaskDetailNav .bottom .bottomTwo>p{padding:0 0 8px 0;}
	.saleTaskDetailNav .bottom .bottomThree{width: 400px; margin-left: 100px;}
	.saleTaskDetailNav .bottom .bottomFour{float: right; text-align: right;}
	
	.saleTaskDetailList .ListItem{width:1660px; height: 100px;  margin-top: 20px; font-size: 14px; color: #333;}
	.saleTaskDetailList .ListItem:hover{box-shadow: 2px 2px 5px rgba(0,0,0,.1);}
	.saleTaskDetailList .ListItem>div{float: left;}
	.saleTaskDetailList .ListItem .divOne{width: 980px; height: 100px; background: #fff; border-radius: 4px 8px 8px 4px; padding:30px 20px; line-height: 20px;}
	.saleTaskDetailList .ListItem .divTwo{ height:84px; margin-top: 8px; width: 1px; border-left: 1px dashed #DCDFE6;}
	.saleTaskDetailList .ListItem .divThree{width:675px; height: 100px; background: #fff; border-radius:8px 4px 4px 8px; padding: 30px;}
	.saleTaskDetailList .ListItem .divOne>div{float: left;}
	.saleTaskDetailList .ListItem .divOne .name{width: 380px; line-height: 40px;}
	.saleTaskDetailList .ListItem .divOne .name>img{width: 40px; height: 40px; border-radius: 20px; float: left; margin-right: 10px;}	
	.saleTaskDetailList .ListItem .divOne .depatment{width: 280px; line-height: 40px;}
	.saleTaskDetailList .ListItem .divOne .message{width: 270px; line-height: 40px;}
	.saleTaskDetailList .ListItem .divOne .message>span{color: #47BF8C; font-size: 14px;}
	.saleTaskDetailList .ListItem .divThree>div{float: left;}
	.saleTaskDetailList .ListItem .divThree .meta{width: 160px; text-align: right; color: #666;}
	.saleTaskDetailList .ListItem .divThree .metaMsg{width: 315px;margin-left: 10px;}
	.saleTaskDetailListAll .ListItem{width:1660px; height: 100px;  margin-top: 20px; font-size: 14px; color: #333;}
	.saleTaskDetailListAll .ListItem:hover{box-shadow: 2px 2px 5px rgba(0,0,0,.1);}
	.saleTaskDetailListAll .ListItem>div{float: left;}
	.saleTaskDetailListAll .ListItem .divOne{width: 660px; height: 100px; background: #fff; border-radius: 4px 8px 8px 4px; padding:30px 20px; line-height: 20px;}
	.saleTaskDetailListAll .ListItem .divTwo{ height:84px; margin-top: 8px; width: 1px; border-left: 1px dashed #DCDFE6;}
	.saleTaskDetailListAll .ListItem .divThree{width:995px; height: 100px; background: #fff; border-radius:8px 4px 4px 8px; padding: 30px;}
	.saleTaskDetailListAll .ListItem .divOne>div{float: left;}
	.saleTaskDetailListAll .ListItem .divOne .name{width: 350px; line-height: 40px; }
	.saleTaskDetailListAll .ListItem .divOne .name>img{width: 40px; height: 40px; border-radius: 20px; float: left; margin-right: 10px;}	
	.saleTaskDetailListAll .ListItem .divOne .depatment{width: 260px; line-height: 40px;  }
	.saleTaskDetailListAll .ListItem .divThree>div{float: left;}
	.saleTaskDetailListAll .ListItem .divThree .message{width: 270px; line-height: 40px;}
	.saleTaskDetailListAll .ListItem .divThree .message>span{color: #47BF8C; font-size: 14px;}
	.saleTaskDetailListAll .ListItem .divThree .metaMsg{width: 320px;margin-left: 10px;}
	.saleTaskDetailListAll .ListItem .divThree .metaMsg>p{padding-bottom: 5px;}
	.saleTaskDetailListAll .ListItem .divThree .rank{float: right; font-size: 12px;}
	.saleTaskDetailListAll .ListItem .divThree .rank .rankTypeOne{background: #E95252; border-radius: 8px; color: #fff; padding: 0 4px;}
	.saleTaskDetailListAll .ListItem .divThree .rank .rankTypeTwo{background: #FAA915; border-radius: 8px; color: #fff; padding: 0 4px;}
	.saleTaskDetailListAll .ListItem .divThree .rank .rankTypeThree{background: #ccc; border-radius: 8px; color: #fff; padding: 0 4px;}
	.statusStrColor1{color:#ccc !important}
	.statusStrColor2{color:#2AAEF2 !important}
	.statusStrColor3{color:#47BF8C !important}
	.statusStrColor4{color:#E95252 !important}
</style>