<style>
	.salesApproval .salesApprovalNav{width: 232px; height: 52px;}
	.salesApproval .salesApprovalNav>li{float: left; width: 116px; height: 52px; color: #666; text-align: center; line-height: 52px; background: #E9E9E9; cursor: pointer;}
	.salesApproval .salesApprovalNav>li.active{background: #fff; color: #333;}
	.salesApproval .salesApprovalNav .divActive{margin: 0 auto; width: 26px; height: 3px; background: #E95252;}
	.salesApproval .salesApprovalList{width: 100%; height: auto; background: #fff; padding: 15px 30px; overflow: hidden;}
	.salesApproval .salesApprovalList>ul{padding: 20px 0;}
	.salesApproval .salesApprovalList>ul li{float: left; width: 160px; height: 206px; border-radius: 10px; border:1px solid #ccc; margin:0 20px 20px 0; cursor: pointer; text-align: center;}
	.salesApproval .salesApprovalList>ul li>img{width: 48px; height: 48px; margin:20px 0 5px;  border-radius: 24px;}
	.salesApproval .salesApprovalList>ul li>p.style{font-size: 12px; color: #999; margin:2px 0 5px;}
	.salesApproval .salesApprovalList>ul li>p.style1{width: 120px; cursor: pointer; height: 24px; line-height: 24px; font-size: 14px; background: #E4EFFF; color: #257BF1; display: inline-block; border-radius: 4px; margin: 10px 0;}
	.salesApproval .salesApprovalList>ul li>p.style2{width: 120px; cursor: pointer; height: 24px; line-height: 24px; font-size: 14px; background: #E6E6E6; color: #666666; display: inline-block; border-radius: 4px;}
    .salesApproval .salesApprovalListWork{width: 100%; height: auto; background: #fff; padding: 15px 30px; overflow: hidden;}
	.salesApproval .salesApprovalListWork>ul{padding: 20px 0;}
	.salesApproval .salesApprovalListWork>ul li{float: left; width: 160px; height: 206px; border-radius: 10px; border:1px solid #ccc; margin:0 20px 20px 0; cursor: pointer; text-align: center;
	position: relative;}
	.salesApproval .salesApprovalListWork>ul li>img{width: 48px; height: 48px; margin:20px 0 5px; border-radius: 24px;}
	.salesApproval .salesApprovalListWork>ul li>p.style{font-size: 12px; color: #999; margin:2px 0 15px;}
	.salesApproval .salesApprovalListWork>ul li>p.style1{font-size: 14px; color: #666; margin: 5px 0; text-align: left; text-indent:28px;}
	.salesApproval .salesApprovalListWork>ul li>em{position: absolute; left: -1px; top: -1px;
	 font-size: 12px; color: #fff; background: #257BF1; width: 54px; text-align: center; line-height: 20px; height: 20px;
	 border-radius: 10px 10px 10px 0;}
	

</style>
<template>
	<div class="salesApproval">
		<div class="query-box">
			<ul class="user_time_picker">
				<li>
					<span><em>提交时间</em>
						<el-date-picker :picker-options="pickerOptions" v-model='msg.startDate'  class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
							-
                        <el-date-picker :picker-options="pickerOptions" v-model='msg.endDate'  class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
					</span>
				</li>
				<li>
					<input type="button" class="hollowFixedBtn"  value="查询" @click="getList()"/>
				</li>
			</ul>	
		</div>		
		<div class="salesApprovalListWork" v-loading='loading'>
			<ul>
				<li v-for="item in  list"  @click="goUrl('salesApprovalDetail',item.createBy)">
					<em v-show="item.isAdvertising=='0'" style="background:#257BF1;">待审批</em>
					<em v-show="item.isAdvertising!='0'" style="background:#0ED6A0;">已审批</em>
					<img v-if='!item.createPhoto' src="../../assets/img/litheader.png"/>
				    <img v-if='item.createPhoto' :onerror="defaultImg" :src='item.createPhoto'/>	
					<p class="fz14 color333">{{item.emName}}</p>
					<p class="style">{{msg.ExpectVisitDateTime}}</p>
					<p class="style1" >1.新增客户{{item.addNewCustomerCount}}名；</p>
					<p class="style1" >2.拜访老客户{{item.visitOldCustomerCount}}名。</p>
				</li>
				<p v-show="list.length==0" class="alcenter fz14 color333">暂无数据</p>
			</ul>
		</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>
</template>
<script>
	export default {
		data() 
		{
			return { 
				pickerOptions: {
					disabledDate: (time) => { //disabledDate true 为禁止选择
						return time.getTime()>Date.now()
					}
				},
				tomorrowDate:'',
				loading:true,
				defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
				msg:{
					startDate:'',
					endDate:'',
					CreateBy:'',
					pageIndex:1,
					pageSize:20,
				},
				currentPage:1,
				total:0,
				list:[],
				
			}
		},
		methods:{
			getList(){
				this.loading=true
				this.apipost('app_customer_GetVisiByEmployeetList',this.msg,res=>{
					if(res.data.resultCode==1){
						this.list=res.data.data.pageData
						this.total=res.data.data.count
						this.loading=false
					}else{
						this.$message.error(res.data.message)
					}
				},err=>{})
			},
			goUrl(path,id){
            	this.$router.push({name: path,query:{"id":id}});
			},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList()				
			},
			resetPageIndex() {
				this.msg.pageIndex = 1;
				this.currentPage = 1
			},	
		},
		mounted(){
			this.msg.CreateBy=this.$route.query.id
			this.msg.startDate=this.$route.query.starTime
			this.msg.endDate=this.$route.query.endTime			
		   this.getList()
		}
		
	}
</script>