<template>
	<div class="flexOne">
		<div class="query-box" style="border-bottom:none;">
			<ul>
                <li>
                    <span>
                        <em>{{$t('pub.date')}}</em>
                             <el-date-picker class="w150" clearable
                                        v-model="msg.dStartTime"
                                        type="date"
                                        :picker-options="pickerOptions1"
                                        format="yyyy-MM-dd"
										value-format="yyyy-MM-dd"
                                        :placeholder="$t('admin.admin_choDate')">
                                </el-date-picker>
                                -
                                <el-date-picker  class="w150" clearable
                                        v-model="msg.dEtartTime"
                                        type="date"
                                        format="yyyy-MM-dd"
										value-format="yyyy-MM-dd"
                                        :picker-options="pickerOptions2"
                                        :placeholder="$t('admin.admin_choDate')">
                                </el-date-picker>
                    </span>
                </li>
				<li><span><em>{{$t('salesModule.TaskName')}}</em><el-input  v-model="msg.TaskName"></el-input></span></li>
				<li>
                    <span>
                        <em>{{$t('objFill.v101.Rest.wanchengztai')}}</em>
                        <el-select v-model="msg.TaskStatus" filterable :placeholder="$t('pub.pleaseSel')">
                            <el-option  v-for="item in dataList"
                                :label="item.name"
                                :value="item.id"
								:key='item.id'>
                            </el-option>
                        </el-select>
                    </span>
                </li>		<li>
                    <span>
                        <em>{{$t('objFill.v101.Rest.faqizhe')}}</em>
                        <el-select   filterable  v-model='msg.CreateBy'>
							        <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
									<el-option v-for='item in employeeList'
										:label='item.name'
										:value='item.empId'
										:key='item.empId'>
									</el-option>
								  </el-select>
                    </span>
                </li>
                <li><input type="button" class="hollowbtn" :value="$t('pub.searchBtn')" @click="tPageIndex(),getList()"/></li>
			</ul>
		</div>
		<div class="saleTaskHistoryList" v-if="DataList.length!=0">

			<div class="ListItem" v-for="(item,index) in DataList" v-loading="loading">
				<div class="divOne _red" v-if="item.departmentFinishNum<item.departmentTaskNum"></div>
				<div class="divOne _green" v-else-if="item.departmentFinishNum>=item.departmentTaskNum" ></div>
				<div class="divTwo">
					{{item.taskName}}
				</div>
				<div class="divThree"></div>
				<div class="divFour">
					<div class="name">
							<img v-if='!item.createPhoto' src="../../assets/img/litheader.png"/>
					        	<img v-if='item.createPhoto' :onerror="defaultImg" :src='item.createPhoto'/>
						{{item.createBy}}
					</div>
					<div class="icon">
						<i class="iconfont icon-ico-shijianfanwei"></i>
					</div>
					<div class="time">
					{{item.datetimeStr}}
					</div>
					<div class="progress">
							<p v-if="item.departmentFinishNum<item.departmentTaskNum"><el-progress :stroke-width='ba'  :percentage="(item.departmentFinishNum/item.departmentTaskNum)*100" color='#e95252' :show-text='false' ></el-progress></p>
						<p  v-else-if="item.departmentFinishNum>=item.departmentTaskNum" ><el-progress :stroke-width='ba'  :percentage="(item.departmentFinishNum/item.departmentTaskNum)*100" color='#47bf8c' :show-text='false'></el-progress></p>
						<p class="smallfont">{{item.departmentFinishNum}}/{{item.departmentTaskNum}}{{item.Unit}}</p>
					</div>
					<div class="state">{{item.departmentTaskNum>item.departmentFinishNum?$t('objFill.v101.DomesticModule.weiwanc'):$t('objFill.v101.Rest.chaoewanc')}}</div>
				</div>
				<div class="divThree"></div>
				<div class="divFive">
					<div class="list shortcutsDiv">
						<div v-if='item.mvpList.length==0&&item.mupList.length==0'>{{$t('objFill.v101.Rest.wurenwancrw')}}</div>
						<div class="mvp" v-for="o in item.mvpList">
							<img class="mvpIcon" src="../../assets/img/mvpIcon.png" />
								<img v-if='!o.photo' src="../../assets/img/litheader.png"/>
						        <img v-if='o.photo' :onerror="defaultImg" :src='o.photo'/>
							<p><span class="mvpSpan">MVP</span></p>
							<p>{{o.name==''?$t('objFill.v101.Rest.wuren'):o.name}}</p>
						</div>
						<div class="mup" v-for="o in item.mupList">
							<img class="mupIcon" src="../../assets/img/mupIcon.png" />
							<img v-if='!o.photo' src="../../assets/img/litheader.png"/>
					    	<img v-if='o.photo' :onerror="defaultImg" :src='o.photo'/>
							<p><span class="mupSpan">MUP</span></p>
							<p>{{o.name==''?$t('objFill.v101.Rest.wuren'):o.name}}</p>
						</div>
					</div>
					<div style="float: right!important;padding: 30px 10px 0 0;">
						<input type="button" class="normalBtn" @click="goUrl('saleTaskDetail',item.id)" :value="$t('fnc.xiangqing')" />
					</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>
	<div class="noData" v-else>
			{{$t('system.content_noData')}}
		</div>
	</div>
</template>

<script>

export default {
    data(){
        return{
			PersonOrDepartment:0,
            msg:{
                pageIndex:1,
                pageSize:6,
                dStartTime:'',
                dEtartTime:'',
                TaskName:'',
                CreateBy:'',
				TaskStatus:0,
				PersonOrDepartment:0
            },
				employeeMsg: {
					RB_Group_id:'0',
					RB_Branch_id:'0',
                    departmentId:'0',
					IsLeave:'-1'
				},
        pickerOptions1:{
            disabledDate: (time) => {
                let endTime = new Date(this.msg.dEtartTime);
                return endTime.getTime()<time.getTime();
            }
        },
        pickerOptions2:{
            disabledDate: (time) => {
                let startTime = new Date(this.msg.dStartTime);
                return startTime.getTime()>=time.getTime()
            }
        },
		dataList:[
			{
				id:0,
				name: this.$t('advmanager.v_all')
			},{
				id:1,
				name: this.$t('objFill.v101.DomesticModule.weiwanc')
			},{
				id:2,
				name: this.$t('leader.leader_HasCompleted')
			}
		],
		employeeList: [],
            DataList:[],
            defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
            total:0,
            ba:8,
            currentPage:1,
            loading:true,
            text:'',
            dialogTitle:'',
            ed:false
        }
    },methods:{
		   getEmployee() {
				this.apipost('app_get_company_employee', this.employeeMsg, res => {
					if(res.data.resultCode == 1) {
						this.employeeList = res.data.data;
					}
				}, err => {})
			},
        getList(){ //获取列表
            this.loading = true
            this.apipost('TaskManagemnet_post_GetPageList',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=>{})
        },


      tPageIndex() {//查询初始化页码
            this.msg.pageIndex = 1;
            this.currentPage = 1
        },
        handleCurrentChange(val) {//翻页功能按钮
            this.msg.pageIndex = val;
            this.getList();
        },
		 goUrl(path, id) {
      this.$router.push({ path: path, query: { id: id,PersonOrDepartment:this.$route.query.PersonOrDepartment } });
    }
    },mounted(){
		this.getEmployee()
        this.getList()
		let userInfo=this.getLocalStorage();
       	this.employeeMsg.RB_Group_id= userInfo.RB_Group_id; //集团
		this.employeeMsg.RB_Branch_id=userInfo.RB_Branch_id;    //公司
		this.PersonOrDepartment=this.msg.PersonOrDepartment=this.$route.query.PersonOrDepartment;
    }
}
</script>

<style>
.saleTaskHistoryList .ListItem ._red {
  background-color: #e95252;
}
.saleTaskHistoryList .ListItem ._green {
  background-color: #47bf8c;
}
	.saleTaskHistoryList{width: 1660px; min-height: 300px; }
	.saleTaskHistoryList .ListItem{width:1660px; height: 100px;  margin-top: 20px; font-size: 14px; color: #333;}
	.saleTaskHistoryList .ListItem:hover{box-shadow: 2px 2px 5px rgba(0,0,0,.1);}
	.saleTaskHistoryList .ListItem>div{float: left;}
	.saleTaskHistoryList .ListItem .divOne{width: 5px; height: 100px;  border-radius: 4px 0 0 4px;}
	.saleTaskHistoryList .ListItem .divTwo{width: 130px; height: 100px; background: #fff; border-radius: 0 8px 8px 0; padding:30px 20px; line-height: 20px;}
	.saleTaskHistoryList .ListItem .divThree{ height:84px; margin-top: 8px; width: 1px; border-left: 1px dashed #DCDFE6;}
	.saleTaskHistoryList .ListItem .divFour{width: 760px; height: 100px; background: #fff; border-radius:8px; padding:30px;}
	.saleTaskHistoryList .ListItem .divFour>div{float: left;}
	.saleTaskHistoryList .ListItem .divFour .name{width: 120px; line-height: 40px;}
	.saleTaskHistoryList .ListItem .divFour .name>img{width: 40px; height: 40px; border-radius: 20px; float: left; margin-right: 10px;}
	.saleTaskHistoryList .ListItem .divFour .icon{color: #D9D9D9; width: 20px;}
	.saleTaskHistoryList .ListItem .divFour .time{color: #666; width: 92px;}
	.saleTaskHistoryList .ListItem .divFour .progress{color: #666; width:400px; padding: 0 50px;}
	.saleTaskHistoryList .ListItem .divFour .progress>p{line-height:14px; padding: 5px 0;}
	.saleTaskHistoryList .ListItem .divFour .state{font-weight: bold; color: #E95252;}
	.saleTaskHistoryList .ListItem .divFive{width: 760px; height: 100px; overflow-x:auto; background: #fff; border-radius:8px 4px 4px 8px; padding: 0 10px 0 30px;}
	.saleTaskHistoryList .ListItem .divFive>div{float: left;}
	.saleTaskHistoryList .ListItem .divFive .list{width: 600px; height: 100px; overflow-x: auto; overflow-y: hidden; white-space:nowrap; padding-top:30px;}
	.saleTaskHistoryList .ListItem .divFive .list>div{display: inline-block;}
	.saleTaskHistoryList .ListItem .divFive .mvp{width: 120px; position: relative;}
	.saleTaskHistoryList .ListItem .divFive .mup{width: 120px; position: relative}
	.saleTaskHistoryList .ListItem .divFive .mvp .mvpIcon{position: absolute; border-radius: 0; border: none; width: 32px; height:16px; left: 4px; top:-10px; z-index: 50;}
	.saleTaskHistoryList .ListItem .divFive .mup .mupIcon{position: absolute; border-radius: 0; border: none; width: 32px; height:16px; left: 4px; top:-10px; z-index: 50;}
	.saleTaskHistoryList .ListItem .divFive .mvp>img{width: 40px; height: 40px; border:2px solid #FAA915; border-radius: 20px; float: left; margin-right: 10px;}
	.saleTaskHistoryList .ListItem .divFive .mvp .mvpSpan{background:#FAA915; color: #fff; padding: 0 3px; border-radius: 4px;}
	.saleTaskHistoryList .ListItem .divFive .mup>img{width: 40px; height: 40px; border:2px solid #ccc; border-radius: 20px; float: left; margin-right: 10px;}
	.saleTaskHistoryList .ListItem .divFive .mup .mupSpan{background:#ccc; color: #fff; padding: 0 3px; border-radius: 4px;}
</style>
