<style>
	.customerApproval{}
    .customerApproval .approvalNav{height: 52px;width: 100%; margin: 30px 0 20px;}
    .customerApproval .approvalNav>li{float: left; width: 116px; font-size: 14px; height: 52px; color: #666; text-align: center; line-height: 52px; background: #E9E9E9; cursor: pointer;}
	.customerApproval .approvalNav>li.active{background: #fff; color: #333;}
	.customerApproval .approvalNav .divActive{margin: -3px auto; width: 26px; height: 3px; background: #E95252;}	
	.customerApprovalDetailTable{width: 100%; font-size:14px; color: #333;}
	.customerApprovalDetailTable tr th{background: #E6E6E6;height:30px; font-size: 12px; text-align: left; text-indent: 25px;}
	.customerApprovalDetailTable tr{background: #fff;text-align: left;}
	.customerApprovalDetailTable tr td{height: 60px; padding-left:25px; border-bottom:1px solid #eee; font-size: 14px; color: #333;}
	.customerApprovalLayer{position: fixed; z-index: 99; background: rgba(0,0,0,.1); width: 100%; height: 100%; left: 0; top: 0;}
	.customerApprovalLayer .rightZero{right: 0px;}
	.customerApprovalLayercontentDiv{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;}
	.customerApprovalLayercontentDiv .title{width:420px; height:48px; line-height: 48px; text-indent: 20px; font-size: 16px; color: #333; background:#EDEEF0;}
	.customerApprovalLayercontentDiv  .item{width: 380px;height: auto; overflow: hidden; border:1px solid #E6E6E6; margin: 20px 0 20px 20px; padding: 20px;}
	.customerApprovalLayercontentDiv  .item .topMsg{overflow: hidden;padding-bottom: 20px; border-bottom: 1px solid #E6E6E6;}
	.customerApprovalLayercontentDiv  .item .topMsg>img{float: left; margin-right: 13px;} 
	.customerApprovalLayercontentDiv  .item .bottomMsg{padding: 15px 0;} 
	.customerApprovalLayercontentDiv  .item .bottomMsg .pImg{margin-top: 10px;}
	.customerApprovalLayercontentDiv  .item .bottomMsg .pImg img{cursor: pointer;}
	.customerApprovalLayercontentDiv  .answerItem{ overflow: hidden; padding: 15px 0;}
	.customerApprovalLayercontentDiv  .answerItem>img{float: left;width: 28px; height: 28px; border-radius: 14px;margin-right: 10px;}		
	.customerApprovalLayercontentBtn{position: fixed; bottom: 0; background: #f5f5f5; width:420px; height:70px; line-height: 70px; text-align: right; padding: 0 20px;}	
	.customerApprovalLayercontentBtn>div{border-bottom: 1px solid #D9D9D9; height: 40px; line-height: 40px; text-align: left; overflow: hidden;}
	.customerApprovalLayercontentBtn>span{display: inline-block;  line-height: 18px; color: #333; font-size: 12px; text-align: center;border:2px solid #fff; cursor: pointer; background: #fff; height: 110px; width: 110px; margin-top: 20px;box-sizing: border-box; }
	.customerApprovalLayercontentBtn>span.cked{border:2px solid #E95252;box-sizing: border-box;}
	.customerApprovalLayercontentBtn>span>img{float: left; margin:10px 23px; width: 63px; height: 63px;}
	.customerApproval .lastVisitContent{background: #f5f5f5; font-size: 12px; padding: 5px 12px; margin-top: 8px;}
	.customerApproval ._class_b{
	color: #257BF1 !important
}
</style>

<template>
	<div class="customerApproval">
		
		<div :class="{viewBigPicLayer:true,viewBigPicLayerDisplayNone:dspNone}" @click="closePicLayer">
		    <i @click="closePicLayer" class="el-icon-circle-close-outline clolseViewBigPicLayer" ></i>
		    <el-carousel height="600px" :initial-index='initialIndex' :interval="5000" trigger="click">
		      <el-carousel-item v-for="(item,index) in picObj" :key="index">
		         <div class="inlineDiv ownScrollbarStyle"><img :src="item" /></div>
		      </el-carousel-item>
		    </el-carousel>
		</div>
		
		
		<div :class="{customerApprovalLayer:showlayer}"  @click="closeLayer">
			<div :class="{customerApprovalLayercontentDiv:true,rightZero:isTransition}" class="ownScrollbarStyle" @click.stop>
				<div class="title">{{meta}}详情</div>
				<div class="item">
					<div class="topMsg">
						<img v-if='!detailList.photo' src="../../assets/img/litheader.png"/>
			    		<img v-if='detailList.photo' :onerror="defaultImg" :src='detailList.photo'/>
						<p>{{detailList.customerName}}</p>
						<p class="mt5">
							<i class="iconfont icon-img_dianhua fz12" style="color: #09d49d;"></i>
							<span class="fz14 color333">{{detailList.contact}}</span>
							&nbsp;&nbsp;&nbsp;
							<span class="fz14 color333">{{detailList.contactNumber}}</span>
						</p>
						<p class="fz12 color999 mt5">{{detailList.expectVisitDateTime}}</p>
					</div>
						<p  v-if="lastVisitObj.visitId>0" class="fz14 mt10 color666">
							<i class="iconfont icon-shijian  colorccc" ></i>&nbsp;历史访问&nbsp;
							<span class="color666 fz12">{{lastVisitObj.timestr}}</span>
						</p>
						<div v-if="lastVisitObj.visitId>0" style="border-bottom: 1px solid #ccc; padding-bottom: 10px;">
							<p class="fz12 mt10">流程类型：{{lastVisitObj.salesProcess}}</p>
							<p class="fz12 mt10">访问记录：</p>
							<p v-if="lastVisitObj.remark!=''" class="lastVisitContent">{{lastVisitObj.remark}}</p>
							<p class="fz12 mt10">沟通内容：</p>
							<p v-if="lastVisitObj.visitRecord!=''" class="lastVisitContent">{{lastVisitObj.visitRecord}}</p>
						</div>
					<div class="bottomMsg">
						<p class="fz14 color666 mt10">
							<i class="iconfont icon-ico-mingpianzhaopian fz14 colorccc" ></i>&nbsp;
							名片照片
						</p>
						<p class="pImg"  v-if="!detailList.businessCardPhotos"><span class="fz12 color333">暂无</span></p>
						<p class="pImg" v-else>
							<img @click="getPic(detailList.businessCardPhotos,index)"   v-if='detailList.businessCardPhotos.length==1' v-for="(i,index) in detailList.businessCardPhotos" :src="i+'?x-oss-process=image/resize,m_mfit,h_100,w_300'"/>
							<img @click="getPic(detailList.businessCardPhotos,index)"   v-if='detailList.businessCardPhotos.length==2||detailList.businessCardPhotos.length==4' v-for="(i,index) in detailList.housePhotos"  :src="i+'?x-oss-process=image/resize,m_pad,w_169,h_150,color_333333'"/>		
							<img @click="getPic(detailList.businessCardPhotos,index)"   v-if='detailList.businessCardPhotos.length==3||detailList.businessCardPhotos.length>=5' v-for="(i,index) in detailList.housePhotos"  :src="i+'?x-oss-process=image/resize,m_pad,h_100,w_100,color_333333'"/>		
						</p>
						<p class="fz14 color666 mt10">
							<i class="iconfont icon-ico-menpaizhaopian fz14 colorccc" ></i>&nbsp;
							门牌照片
						</p>
						<p class="pImg"  v-if="!detailList.housePhotos"><span class="fz12 color333">暂无</span></p>
						<p class="pImg" v-else>
							<img @click="getPic(detailList.housePhotos,index)"   v-if='detailList.housePhotos.length==1' v-for="(i,index) in detailList.housePhotos" :src="i+'?x-oss-process=image/resize,m_mfit,h_100,w_300'"/>
							<img @click="getPic(detailList.housePhotos,index)"   v-if='detailList.housePhotos.length==2||detailList.housePhotos.length==4' v-for="(i,index) in detailList.housePhotos"  :src="i+'?x-oss-process=image/resize,m_pad,w_169,h_150,color_333333'"/>		
							<img @click="getPic(detailList.housePhotos,index)"   v-if='detailList.housePhotos.length==3||detailList.housePhotos.length>=5' v-for="(i,index) in detailList.housePhotos"  :src="i+'?x-oss-process=image/resize,m_pad,h_100,w_100,color_333333'"/>		
						</p>
						<p class="fz14 color666 mt10">
							<i class="iconfont icon-ico_yingyezhizhao fz14 colorccc" ></i>&nbsp;
							营业执照
						</p>
						<p class="pImg"  v-if="!detailList.images"><span class="fz12 color333">暂无</span></p>
						<p class="pImg" v-else>
							<img @click="getPic(detailList.images,index)"   v-if='detailList.images.length==1' v-for="(i,index) in detailList.images" :src="i+'?x-oss-process=image/resize,m_mfit,h_100,w_300'"/>
							<img @click="getPic(detailList.images,index)"   v-if='detailList.images.length==2||detailList.images.length==4' v-for="(i,index) in detailList.images"  :src="i+'?x-oss-process=image/resize,m_pad,w_169,h_150,color_333333'"/>		
							<img @click="getPic(detailList.images,index)"   v-if='detailList.images.length==3||detailList.images.length>=5' v-for="(i,index) in detailList.images"  :src="i+'?x-oss-process=image/resize,m_pad,h_100,w_100,color_333333'"/>		
						</p>
						<p class="fz14 color666 mt10">
							<i class="iconfont icon-fangwenjilu fz14 colorccc" ></i>&nbsp;
							开发说明
						</p>
						<p class="fz12 color333 mt10">
							{{detailList.remark==''?'暂无':detailList.remark}}
						</p>
						<p class="fz14 color666 mt10">
							<i class="iconfont icon-goutongneirong fz14 colorccc" ></i>&nbsp;
							拜访结果
						</p>
						<p class="fz12 color333 mt10">
							{{detailList.visitRecord==''?'暂无':detailList.visitRecord}}
						</p>
						<p class="fz14 mt10" style="color: #4779FF;"  v-show="customerStatus==2||customerStatus==3"> 
							<i class="iconfont icon-shenpiyijian fz14" style="color: #4779FF;"></i>&nbsp;
							审批意见
						</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="mt5" style="color: #E95252;" v-show='item.adviceStatus==2'>审批已拒绝</p>
							<p style="color: #09D49D;" v-show='item.adviceStatus==1'>审批已通过</p>
							<p class="fz12 color333 mt5" style="margin-left: 35px; background: #f5f5f5; padding: 10px;">{{item.adviceContent}}</p>
						</div>
					</div>
				</div>
				
				<div class="customerApprovalLayercontentBtn" v-show="(customerStatus==0||customerStatus==1)&&isOk==-1">
					<input type="button" class="normalBtn" value="通过" @click="isOk=1;addMsg.AdviceStatus=1"/>
					<input type="button" class="hollowFixedBtn" value="拒绝" @click="isOk=0;addMsg.AdviceStatus=2"/>
				</div>
				
				<div class="customerApprovalLayercontentBtn" style="height: 190px;" v-show="isOk==0">
					<div>
						<span class="fz14 color333">审批意见(拒绝)</span>
					</div>
					<p class="mt10">
						<el-input type="textarea" v-model='addMsg.AdviceContent' maxlength='200'></el-input>
					</p>
					<input type="button" class="normalBtn" value="发布" @click="saveApproval()"/>
					<input type="button" class="hollowFixedBtn" value="取消" @click="isOk=-1"/>
				</div>				
				
				<div class="customerApprovalLayercontentBtn" style="height: 250px; text-align: center;" v-show="isOk==1">
					<div>
						<span class="fz14 color333">选择客户类型</span>
					</div>
					<span :class="{cked:addMsg.IsMember==2}" @click="addMsg.IsMember=2">
						<img src="../../assets/img/notVip.png" />
						普通客户
					</span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span :class="{cked:addMsg.IsMember==1}" @click="addMsg.IsMember=1">
						<img src="../../assets/img/isVip.png" />
						会员客户
					</span>
					<p class="clearfix"></p>
					<input type="button" class="normalBtn mg0" value="确认" @click="saveApproval()"/>
					&nbsp;&nbsp;
					<input type="button" class="hollowFixedBtn mg0" value="取消" @click="isOk=-1"/>
				</div>	
				
				
			</div>	
		</div>
		
		<div class="approvalNav">
			<li :class="{active:type==-1}" @click="type=-1;clickGetList(-1)">
				全部审批
				<div class="divActive" v-show="type==-1"></div>
			</li>
			<li :class="{active:type==1}"  @click="type=1;clickGetList(1)">
				待审批
				<div class="divActive" v-show="type==1"></div>
			</li>
			<li :class="{active:type==2}"  @click="type=2;clickGetList(2)">
				已审批
				<div class="divActive" v-show="type==2"></div>
			</li>
		</div>
		<table class="customerApprovalDetailTable"  border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
			<tr>
				<th width="20%">门店</th>
				<th width="10%">联系人</th>
				<th width="15%">电话</th>
				<th width="15%">提交时间</th>
				<th width="10%">来源</th>
				<th width="15%">状态</th>
				<th width="15%">操作</th>
			</tr>
			<tr v-for="item in list">
				<td class="fz16">{{item.customerName}}<i class="iconfont icon-shimingrenzheng" :class="{'_class_b': item.RealNameAuthentication===1}"></i></td>
				<td>
					{{item.contact}}
				</td>
				<td>{{item.contactNumber}}</td>
				<td>{{item.expectVisitDateTime}}</td>
				<td>{{item.emName}}</td>
				<td>
					<img src="../../assets/img/dsp.png" v-show="item.customerStatus==0||item.customerStatus==1"/>
					<img src="../../assets/img/ysp.png" v-show="item.customerStatus==2||item.customerStatus==3"/>
				</td>
				<td>
					<input type="button" value="查看详情"  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{
	        	lastVisitObj:{},
	        	meta:'',
	        	isOk:-1,
	        	type:-1,
	        	loading:false,
				isTransition:false,
				showlayer:false,	
				msg:{
					pageIndex:1,
					pageSize:10,
					CustomerStatus:-1,
				},
				addMsg:{
					CustomerId:0,
					AdviceStatus:0,
					AdviceContent:'',
					VisitId:-1,
					IsMember:2,
				},
				customerStatus:-1,
				picObj: [],
     			dspNone: true,
     			initialIndex: 0,
				defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
				currentPage:1,
				total:0,
				list:[],
				detailList:{},
				answerDetailList:[]
	        }
	    },
	    methods:{
	    	saveApproval(){
	    		if(this.addMsg.AdviceStatus==1)
	    		{
	    			this.addMsg.AdviceContent=''	
	    		}else{
	    			this.addMsg.IsMember=2	
	    		}
	    		this.apipost('app_today_visit_SetCustomerAdvice',this.addMsg,res=>{
	    			if(res.data.resultCode==1){
	    				this.$message.success(res.data.message)
	    				this.closeLayer()
	    				this.getList()
	    			}else{
	    				this.$message.error(res.data.message)
	    			}
	    		},err=>{})
	    	},
	    	closePicLayer() {
		      this.dspNone = true;
		    },
	    	getPic(obj, index) {
		      this.initialIndex = index;
		      this.picObj = obj;
		      this.dspNone = false;
		    },
	    	getDetail(obj){
	    		this.meta=obj.customerName
	    		this.addMsg.VisitId=obj.visitID
	    		this.addMsg.CustomerId=obj.customerId
	    		this.customerStatus=obj.customerStatus
	    		this.apipost('app_today_visit_GetVisitByCustomerIDEntity',{customerId:obj.customerId},res=>{
	    			if(res.data.resultCode==1){
	    				this.openLayer()
	    				this.detailList=res.data.data.customerInfo
	    			}else{}
	    			
	    		},err=>{})
	    		
	    		this.apipost('app_today_visit_GetCustomerAdvice',{CustomerId:obj.customerId},res=>{
	    			if(res.data.resultCode==1){
	    				this.answerDetailList=res.data.data
	    				console.log(res.data.data)
	    			}
	    			else{}
	    		},err=>{})
	    		
	    		
	    		this.apipost('app_get_my_GetVisitPlanLastList',{empId:obj.creatBy,customerId:obj.customerId},res=>{
	    			if(res.data.resultCode==1){
	    			  console.log(res.data)
	    			  this.lastVisitObj=res.data.data
	    			}
	    			else{}
	    		},err=>{})
	    	},
	    	clickGetList(type){
	    		this.msg.CustomerStatus=type
	    		this.msg.pageIndex=1
	    		this.currentPage = 1
	    		this.getList()
	    	},
	    	getList(){
	    		this.loading=true
	    		this.apipost('app_today_visit_GetMyDeptCustomerList',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=>{})
	    	},
	    	openLayer(){
	    		this.showlayer = true;
	    		this.isTransition = true;
	    	},
	    	closeLayer() {
				let _this = this;
				setTimeout(function() {
					_this.showlayer = false;
				}, 300)
				this.isTransition = false;
				this.isOk=-1
				this.addMsg.AdviceContent=''
				this.addMsg.IsMember=2
			},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList()				
			},
			resetPageIndex() {
				this.msg.pageIndex = 1;
				this.currentPage = 1
			},			
	    },
	    mounted(){
	    	this.getList()
	    }
   }
</script>

