<style>
	.salesApprovalLayer{position: fixed; z-index: 99; background: rgba(0,0,0,.1); width: 100%; height: 100%; left: 0; top: 0;}
	.salesApprovalLayer .rightZero{right: 0px;}
	.salesApprovalLayercontentDiv{width: 420px; background: #fff; height: 100%; overflow: auto; top: 0; right:-420px; position: fixed;box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.1);transition: right .5s;}
	.salesApprovalLayercontentDiv .title{width:420px; height:48px; line-height: 48px; text-indent: 20px; font-size: 16px; color: #333; background:#EDEEF0;}
	.salesApprovalLayercontentDiv .list{}
	.salesApprovalLayercontentDiv .list .item{width: 380px;height: auto; overflow: hidden; border:1px solid #E6E6E6; margin: 20px 0 20px 20px; padding: 20px;}
	.salesApprovalLayercontentDiv .list .item .topMsg{overflow: hidden;padding-bottom: 20px; border-bottom: 1px solid #E6E6E6;}
	.salesApprovalLayercontentDiv .list .item .topMsg>img{float: left; margin-right: 13px;}
	.salesApprovalLayercontentDiv .list .item .topMsg .newGuest{width: 50px; height: 18px; text-align: center; font-size: 14px; color: #257BF1; background: #DAE4FF;}
	.salesApprovalLayercontentDiv .list .item .bottomMsg{padding: 15px 0;}
	.salesApprovalLayercontentDiv .list .itemAnswer{width: 380px;height: auto; margin: 20px 0 20px 20px; padding: 20px; background: #EBF0FF;}
	.salesApprovalLayercontentDiv .list .itemAnswer .answerItem{border-bottom: 1px solid #BCC0CC; overflow: hidden; padding: 15px 0;}
	.salesApprovalLayercontentDiv .list .itemAnswer .answerItem>img{float: left;width: 24px; height: 24px; border-radius: 12px;margin-right: 10px;}
	.salesApprovalDetail .salesApprovalLayercontentBtn{position: fixed; bottom: 0; background: #f5f5f5; width:420px; height:190px; padding: 10px 20px;}
	.salesApprovalDetail .salesApprovalLayercontentBtn>div{border-bottom: 1px solid #D9D9D9; height: auto; padding-bottom: 10px; overflow: hidden;}
	.salesApprovalDetail .personMsg{width: 320px; height: 70px; padding: 13px 20px 9px 13px; margin: 20px 0; background: #E6E6E6; border-radius: 4px;}
	.salesApprovalDetail .personMsg>img{float: left; margin-right: 10px; width: 48px; height: 48px; border-radius: 24px;}
	.salesApprovalDetail .personMsg .color{color: #257BF1; margin-right: 20px;}
	.salesApprovalDetailTable{width: 100%; font-size:14px; color: #333;}
	.salesApprovalDetailTable tr{border-bottom: 2px solid #333;}
	.salesApprovalDetailTable tr th{background: #E6E6E6;height:30px; font-size: 12px; text-align: left; text-indent: 25px;}
	.salesApprovalDetailTable tr{background: #fff;text-align: left;}
	.salesApprovalDetailTable tr td{height: 60px; padding-left:25px; border-bottom:1px solid #f5f5f5;}
	.salesApprovalDetail .lastVisitContent{background: #f5f5f5; font-size: 12px; padding: 5px 12px; margin-top: 8px;}
</style>
<template>
	<div class="salesApprovalDetail">


		<div :class="{salesApprovalLayer:showlayer}"  @click="closeLayer">
			<div :class="{salesApprovalLayercontentDiv:true,rightZero:isTransition}" class="ownScrollbarStyle" @click.stop>
				<div class="title">{{personMsg[0].accountName}}{{titleDate}}{{$t('salesModule.WorkPlan')}}</div>
				<div class="list">
					<div class="item" v-for="item in visitIdDetailList">
						<div class="topMsg">
							<img v-if='!item.photo' src="../../assets/img/litheader.png"/>
				    		<img v-if='item.photo' :onerror="defaultImg" :src='item.photo'/>
							<p>{{item.customerName}}</p>
							<p class="mt5">
								<i class="iconfont icon-img_dianhua fz12" style="color: #09d49d;"></i>
								<span class="fz14 color333">{{item.contact}}</span>
								&nbsp;&nbsp;&nbsp;
								<span class="fz14 color333">{{item.contactNumber}}</span>
								<span class="fr newGuest" v-show="item.createFromType=='2'">{{$t('objFill.v101.Rest.xinkehu')}}</span>
							</p>
							<p class="fz12 color999 mt5">{{item.expectVisitDateTimeStr}}</p>
						</div>


						<p  v-if="item.isHaveVisit===1" class="fz14 mt10 color666">
							<i class="iconfont icon-shijian  colorccc" ></i>&nbsp;{{$t('salesModule.HistoryVisit')}}&nbsp;
						    <span class="fz12">{{item.dataLastVist.timestr}}</span>
						</p>
						<div v-if="item.isHaveVisit===1" style="border-bottom: 1px solid #ccc; padding-bottom: 10px;">
							<p class="fz12 mt10">{{$t('fnc.lcleixing')}}：{{item.dataLastVist.salesProcess}}</p>
							<p class="fz12 mt10">{{$t('salesModule.fwRecord')}}：</p>
							<p v-if="item.dataLastVist.remark!=''" class="lastVisitContent">{{item.dataLastVist.remark}}</p>
							<p class="fz12 mt10">{{$t('salesModule.goutong')}}：</p>
							<p v-if="item.dataLastVist.visitRecord!=''" class="lastVisitContent">{{item.dataLastVist.visitRecord}}</p>
						</div>


						<div class="bottomMsg">
							<p class="fz14 color666">
								<i class="iconfont icon-ico-renwuyaoqiu fz12 colorccc" ></i>&nbsp;
								{{$t('salesModule.fwRecord')}}
							</p>
							<p class="fz12 color333 mt10">
								{{item.remark==''?$t('fnc.no'):item.remark}}
							</p>
							<p class="fz14 color666 mt10">
								<i class="iconfont icon-ico-renwuyaoqiu fz12 colorccc"></i>&nbsp;
								{{$t('salesModule.goutong')}}
							</p>
							<p class="fz12 color333 mt10">
								{{item.visitRecord==''?$t('fnc.no'):item.visitRecord}}
							</p>
						</div>
					</div>
					<div class="itemAnswer" v-show="answerDetailList.length>0">
						<p class="fz16 color666"><i class="iconfont icon-ico-renwuyaoqiu fz14 color999" ></i>&nbsp;{{$t('salesModule.SPYJ')}}</p>
						<div class="answerItem" v-for="item in answerDetailList">
							<img v-if='!item.emPhoto' src="../../assets/img/litheader.png"/>
				    		<img v-if='item.emPhoto' :onerror="defaultImg" :src='item.emPhoto'/>
							<p>
								<span class="fz14 color333">{{item.createBy}}</span>
								<span class="fz12 color999">{{item.createDate}}</span>
							</p>
							<p class="fz12 color333 mt10" style="padding-left: 35px;">{{item.adviceContent}}</p>
						</div>
					</div>
				</div>
				<div style="height: 190px; width: 100%;"><!--空白暂位,防止下面漂浮按钮遮挡内容--></div>
				<div class="salesApprovalLayercontentBtn">
					<div>
						<span class="fz14 color333">{{$t('salesModule.SPYJ')}}</span>
						<span class="fr cursorpointer colorE95252"  @click="closeLayer">{{$t('pub.cancelBtn')}}</span>
					</div>
					<p class="mt20">
						<el-input type="textarea"  v-model='ideaMsg.AdviceContent'></el-input>
					</p>

					<input type="button" class="normalBtn mt20 fr" :value="$t('objFill.v101.header.fabu')" @click="saveIdea"/>
				</div>
			</div>
		</div>

		<div class="personMsg">
			<img v-if='!personMsg[0].photo' src="../../assets/img/litheader.png"/>
			<img v-if='personMsg[0].photo' :onerror="defaultImg" :src='personMsg[0].photo'/>
			<p><span class="fz16 color333">{{personMsg[0].accountName}}</span></p>
			<p class="mt5"><span class="fz14 color">{{$t('salesModule.Pending')}} {{personMsg[0].waringAudit}}</span><span class="fz14 color666">{{$t('salesModule.YSP')}}  {{personMsg[0].audited}}</span></p>
		</div>
		<table class="salesApprovalDetailTable"  border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
			<tr>
				<th width="20%">{{$t('objFill.v101.Rest.gongzuojhbt')}}</th>
				<th width="20%">{{$t('objFill.v101.Rest.neirongzyao')}}</th>
				<th width="20%">{{$t('salesModule.SaveTime')}}</th>
				<th width="20%">{{$t('admin.admin_status')}}</th>
				<th width="20%">{{$t('hotel.table_operat')}}</th>
			</tr>
			<tr v-for="item in list">
				<td class="fz16">{{item.title}}</td>
				<td class="fz14 color333">
					1.{{$t('salesModule.addCustomer')}}{{item.newClientNum}}{{$t('admin.admin_ming')}}；<br />
					2.{{$t('objFill.v101.Rest.baifanglaoke')}}{{item.oldClientNum}}{{$t('admin.admin_ming')}}
				</td>
				<td>
					<i class="iconfont icon-ico-shijianfanwei color999"></i>
					{{item.expectVisitDate}}
				</td>
				<td>
					<img v-show="item.isAdvertising=='2'" src="../../assets/img/dsp.png" />
					<img v-show="item.isAdvertising=='1'" src="../../assets/img/ysp.png" />
				</td>
				<td>
					<input type="button" :value="$t('salesModule.CheckDetails')"  class="normalBtn" style="margin-left: 0;" @click="getDetail(item)"/>
				</td>
			</tr>
		</table>
		<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 {
				titleDate:'',
				EmpId:0,
				loading:true,
				isTransition:false,
				showlayer:false,
				defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
				msg:{
					pageIndex:1,
					pageSize:10,
					StartTime:'',
					EndTime:'',
					EmpId:'',
				},
				ideaMsg:{
					AdviceContent:'',
					EmployeeId:0,
					VisitDate:'',
				},
				currentPage:1,
				total:0,
				list:[],
				answerDetailList:[],
				visitIdDetailList:[],
				personMsg:[],
			}
		},
		methods:{
			getPersonMsg(){
				this.apipost('app_customer_GetPlanAuditForByEmployeeId',{EmpId:this.$route.query.id},res=>{
					if(res.data.resultCode==1){
						this.personMsg=res.data.data
					}else{
						this.$message.error(res.data.message)
					}
				},err=>{})
			},
			getList(){
				this.loading=true
				this.apipost('app_customer_GetWedPlanAuditForEmpInfo',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=>{})
			},
			saveIdea(){
				this.apipost('app_today_visit_SetVisitAdvice',this.ideaMsg,res=>{
					if(res.data.resultCode==1){
						this.$message.success(res.data.message)
						this.getList()
						this.closeLayer()
					}else{
						this.$message.error(res.data.message)
					}
				},err=>{})
			},
			closeLayer() {
				let _this = this;
				setTimeout(function() {
					_this.showlayer = false;
				}, 300)
				this.isTransition = false;
				this.ideaMsg.AdviceContent=''
			},
			getDetail(obj){
				this.showlayer = true;
				this.isTransition = true;
				this.titleDate=this.ideaMsg.VisitDate=obj.expectVisitDate
				this.apipost('app_today_visit_GetVisitAdviceList',{EmployeeId:this.EmpId,VisitDate:obj.expectVisitDate},res=>{
					if(res.data.resultCode==1){
						this.answerDetailList=res.data.data
					}else{
						this.$message.error(res.data.message)
					}
				},err=>{})

				this.apipost('app_get_my_visit_plan_list',{empId:this.EmpId,visitDate:obj.expectVisitDate},res=>{
					if(res.data.resultCode==1){
						this.visitIdDetailList=res.data.data
					}else{
						this.$message.error(res.data.message)
					}
				},err=>{})
			},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList()
			},
			resetPageIndex() {
				this.msg.pageIndex = 1;
				this.currentPage = 1
			},
		},
		mounted(){
			this.getList()
			this.getPersonMsg()
			this.ideaMsg.EmployeeId=this.msg.EmpId=this.EmpId=this.$route.query.id
		}
	}
</script>
