
<style>
    .MyCustomerDetail {}
    .MyCustomerDetail .saleMate{width: 346px; height: auto; background: #E6E6E6; border-radius: 4px; margin:20px 0; padding: 16px;}
    .MyCustomerDetail .approvalNav{height: 52px;width: 100%; margin: 20px 0;}
    .MyCustomerDetail .approvalNav>li{float: left; width: 116px; font-size: 14px; height: 52px; color: #666; text-align: center; line-height: 52px; background: #E9E9E9; cursor: pointer;}
	.MyCustomerDetail .approvalNav>li.active{background: #fff; color: #333;}
	.MyCustomerDetail .approvalNav .divActive{margin: -3px auto; width: 26px; height: 3px; background: #E95252;}
	.MyCustomerDetailTable{width: 100%; font-size:14px; color: #333;}
	.MyCustomerDetailTable tr{border-bottom: 2px solid #333;}
	.MyCustomerDetailTable tr th{background: #E6E6E6;height:30px; font-size: 12px; text-align: left; text-indent: 25px;}
	.MyCustomerDetailTable tr{background: #fff;text-align: left;}
	.MyCustomerDetailTable tr td{height: 60px; padding-left:25px; border-bottom:1px solid #f5f5f5; font-size: 14px; color: #333;}	  
	.MyCustomerDetailbottomLayer{overflow: auto; position:absolute;height:200px;
	 z-index:50;bottom:0;left: 0;border-top:1px solid #d1d1d1;background-color:#FFFFFF;padding: 20px 20px 0;width: 100%;}
	.MyCustomerDetailbottomLayer>p{border-left: 3px solid #E95252; text-indent: 15px; height: 14px; font-size: 14px; margin-bottom:20px; line-height: 14px; color: #000;}
	.MyCustomerDetailbottomLayer .el-form-item__label{font-size: 12px!important;}
    
    .MyCustomerDetailbottomLayer .avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	.MyCustomerDetailbottomLayer  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	.MyCustomerDetailbottomLayer  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 148px;
	    height: 148px;
	    line-height: 148px;
	    text-align: center;
	  }
	.MyCustomerDetailbottomLayer  .avatar {
	    width: 148px;
	    height: 148px;
	    display: block;
	  }	
	
</style>

<template>
      <div class="MyCustomerDetail">
      	    <div class="MyCustomerDetailbottomLayer ownScrollbarStyle" style="height:500px;" v-show="addLayer1">
      	    		<p>修改客户信息</p>
      	    		<p class="fz12 color333 fbold" style="border: none; padding-left: 3px;">可直接保存</p>
      	    		<el-form label-width="80px">
		      	    	<el-row :gutter="20">
		  	    			<el-col :span="6">
								<el-form-item  label="门店名称：">   
								   	<el-input class='w200' v-model='updateMsg.CustomerName'></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="18">
							</el-col>
		      	    	</el-row>	
	      	       <el-row :gutter="20" style='margin-top:13px;'>
		      	       	<el-col :span="24">
		      	    	<p class="fz12 color333 fbold" style="border: none; margin-bottom: 15px; padding-left: 20px;">需审核信息<span class="colorE95252 fz12 fwnormal">
		      	    		(编辑门店地址后，客户将重新进入审核流程)
		      	    	</span>
		      	    	</p>
		      	    	</el-col>
		      	    </el-row>	
		      	    <el-row :gutter="20">
		      	    	<el-col :span="12">
		      	    		<el-form-item  label="区域：">   
		      	    			<el-select class='w200' filterable  v-model='updateMsg.Province' @change='getCity'>
									<el-option v-for='item in provinceList' 
										:label='item.Name'
										:value='item.ID'
										:key='item.ID'>
									</el-option>
								</el-select>
								<el-select class='w200' filterable  v-model='updateMsg.City'  @change='getRegion'>
									<el-option v-for='item in cityList' 
										:label='item.Name'
										:value='item.ID'
										:key='item.ID'>
									</el-option>
								</el-select>
								<el-select  class='w200' filterable  v-model='updateMsg.District'>
									<el-option v-for='item in regionList' 
										:label='item.Name'
										:value='item.ID'
										:key='item.ID'>
									</el-option>
								</el-select>	
							</el-form-item>
		      	    	</el-col>	
	  	    			<el-col :span="6">
							<el-form-item  label="详细地址：">   
							   	<el-input v-model='updateMsg.Address' ></el-input>
							</el-form-item>
		      	    	</el-col>	
		      	    	<el-col :span="6">
		      	    	</el-col>		
	      	    	</el-row>	
	      	    	<el-row :gutter="20">
						<el-col :span="6">
								<el-form-item label="名片照片：">
								<el-upload class="avatar-uploader" 
									action="" 
									:http-request="uploadImg" 
									 accept="image/jpeg,image/gif,image/png,image/bmp"			
									:show-file-list="false"
									>
								  <img v-if="BusinessCardPhotos" :src="BusinessCardPhotos" class="avatar">
								  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>	
								</el-form-item> 
						</el-col>
						<el-col :span="6">
							<el-form-item  label="门牌照片："> 
							<el-upload class="avatar-uploader" 
								action="" 
								:http-request="uploadImg1" 
								 accept="image/jpeg,image/gif,image/png,image/bmp"			
								:show-file-list="false"
								>
							  <img v-if="HousePhotos" :src="HousePhotos" class="avatar">
							  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item  label="营业执照：">   
								<el-upload class="avatar-uploader" 
									action="" 
									:http-request="uploadImg2" 
									 accept="image/jpeg,image/gif,image/png,image/bmp"			
									:show-file-list="false"
									>
								  <img v-if="Images" :src="Images" class="avatar">
								  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</el-form-item>
						</el-col>
	      	    	</el-row>	
	      	    	<el-row :gutter="20">
	      	    		<el-col :span="24">
							 <input type="button" class="normalBtn" value="保存" @click="saveUpdate()"/>
							 <input type="button" class="hollowFixedBtn" value="取消" @click="addLayer1=false"/>		      	    			
	      	    		</el-col>	
	      	    	</el-row>		
      	    	</el-form>
      	    </div>	
      	
      	
      		<div class="MyCustomerDetailbottomLayer ownScrollbarStyle" v-show="addLayer">
      			<p>添加联系人</p>
      			<el-form  :model="addMsg" ref="addMsg"  label-position="right" :rules="rules" label-width="80px">
      				<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item  label="姓名：" prop="contactName">   
							   	<el-input v-model='addMsg.contactName'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item  label="职务：" prop="contactDuty">   
							   <el-select v-model='addMsg.contactDuty'   filterable placeholder="请选择">
									<el-option
						                v-for="item in dutyList"
						                :label='item.Name'
						                :value='item.ID'
						                :key='item.ID'>
						            </el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item   label="电话：" prop="contactPhone">   
							   	<el-input v-model='addMsg.contactPhone' ></el-input>
							</el-form-item>
							<el-form-item>
								<p style="line-height: 18px; color: #E95252;">电话不可修改</p>
							</el-form-item>
						</el-col>
						<el-col :span="6">
						</el-col>	
					</el-row>
					 <el-row :gutter="20">
						<el-col :span="24">
						 <input type="button" class="normalBtn" value="保存" @click="submitForm('addMsg')"/>
						 <input type="button" class="hollowFixedBtn" value="取消" @click="resetForm('addMsg');addLayer=false"/>
						</el-col>
					  </el-row>	
      			</el-form>	
      		</div>	
      	
      	
      	    <div class="saleMate">
      	    	<p>
      	    		<span class="fz16 color333">{{customerInfo.customerName}}</span>
      	    		<span class="fr">
      	    			<i class="iconfont icon-xiugai color999 fz14 cursorpointer" @click="addLayer1=true,addLayer=false,getMyCustomerInfo()"></i>
      	    		</span>
      	    	</p>
      	    	<p class="mt5">
      	    		<span v-for="item in customerInfo.brandNames" style="font-size: 12px; color: #666; background: #ccc; padding: 2px 3px; margin-right: 5px;">{{item}}</span>
      	    	</p>
      	    	<p class="mt5">
  	    			<i class="iconfont icon-img_dianhua fz14" style="color: #09d49d;"></i>
  	    			<span class="fz12 color333">{{customerInfo.contactNumber}}</span>
      	    	</p>
      	    	<p>
      	    		<i class="iconfont icon-img_dizhi_small color999 fz14"></i>
      	    		<span class="fz12 color333">{{customerInfo.address}}</span>
      	    	</p>
      	    </div>
  			<div class="approvalNav">
				<li :class="{active:type==1}" @click="type=1">
					通讯录
					<div class="divActive" v-show="type==1"></div>
				</li>
				<li :class="{active:type==2}"  @click="type=2">
					拜访记录
					<div class="divActive" v-show="type==2"></div>
				</li>
				<li :class="{active:type==3}"  @click="type=3">
					交易记录
					<div class="divActive" v-show="type==3"></div>
				</li>
				
				<input type="button" class="fr normalBtn" value="新增通讯录" @click="addLayer=true;addLayer1=false"/>
			</div>
			
		<table class="MyCustomerDetailTable"  border="0" cellspacing="0" cellpadding="0" v-show="type==1">
			<tr>
				<th width="20%">姓名</th>
				<th width="30%">职务</th>
				<th width="50%">电话</th>
			</tr>
			<tr v-for="item in contact">
				<td class="fz16">{{item.contactName}}</td>
				<td>{{item.dutyName}}</td>
				<td>
					<i class="iconfont icon-img_dianhua fz14" style="color: #09d49d;"></i>
					{{item.contactPhone}}
				</td>
			</tr>
			<tr v-show="contact.length==0">
				<td colspan="5" align="center">暂无</td>
			</tr>
		</table>
		
		<table class="MyCustomerDetailTable"  border="0" cellspacing="0" cellpadding="0" v-show="type==2">
			<tr>
				<th width="20%">门店</th>
				<th width="20%">联系人</th>
				<th width="20%">电话</th>
				<th width="20%">状态</th>
				<th width="20%">时间</th>
			</tr>
			<tr v-for="item in visitList">
				<td class="fz16">{{item.contact}}</td>
				<td>{{item.customerName}}</td>
				<td>
					<i class="iconfont icon-img_dianhua fz14" style="color: #09d49d;"></i>
					{{item.contactNumber}}
				</td>
				<td>
					<i class="iconfont icon-yiqueren fz14" style="color: #09d49d;"></i>
					{{item.visitState=='1'?'未访问':'已沟通'}}
				</td>
				<td>
					{{item.visitDateTime}}
				</td>
			</tr>
			<tr v-show="visitList.length==0">
				<td colspan="5" align="center">暂无</td>
			</tr>
			
		</table>	
		<el-pagination  v-show="type==2"
			background
			@current-change="handleCurrentChange"
			:current-page.sync="currentPage"
			layout="total,prev, pager, next, jumper" 
			:page-size=msg.pageSize 
			:total=total>
		</el-pagination>			
		
		<table class="MyCustomerDetailTable"  border="0" cellspacing="0" cellpadding="0" v-show="type==3">
			<tr>
				<th width="25%">团名</th>
				<th width="15%">人数</th>
				<th width="20%">金额</th>
				<th width="20%">状态</th>
				<th width="20%">时间</th>
			</tr>
			<tr>
				<td colspan="5" align="center">暂无</td>
			</tr>
		</table>			
		
		
      </div>

</template>

<script>
	export default {
		data (){
			return{
				//辅助
	        	BusinessCardPhotos:'',
	        	HousePhotos:'',
	        	Images:'',				
				addLayer:false,
				addLayer1:false,
				HousePhoto:[],
				BusinessCardPhoto:[],
				Image:[],
				type:1,
				id:0,
				//请求
				addMsg:{
				 infoID:0,	
				 contactName:'',
				 contactPhone:'',
				 contactDuty:'',
				},
				updateMsg:{
					CustomerName:'',
					CustomerId:0,
					Address:'',
					Country:2,
					Province:0,
					City:0,
					District:0,
					HousePhotos:[],
					BusinessCardPhotos:[],
					Images:[],
				},
				rules:{
					contactName:[
					  { required: true, message: '请输入姓名', trigger: 'blur' }
					],
					contactDuty:[
					  { required: true, message: '请选择职务', trigger: 'change' }
					],
					contactPhone:[
					  { required: true, message: '请输入联系人电话', trigger: 'blur' },
					  {pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[012356789]|18[0-9]|19[0-9]|14[57])[0-9]{8}$/, message: '请输入正确的手机'}
					],
				},
				 msg:{
				 	pageIndex:1,
				 	pageSize:10,
				 	customerId:0,
				 },
				currentPage:1,
				total:0,				 
				//返回
				CustomerBrandList:[],
				customerInfo:{},
				contact:[],
				visitList:[],
				dutyList:[],
			    provinceList:[],
			    cityList:[],
			    regionList:[],				
			}
		},
		methods:{
		    uploadImg(file) {
		      //上传
		      let newArr = [];
		      newArr.push(file.file);
		      let path = "/Upload/Temporary/";
		      this.UploadSelfFileT(path, newArr, x => {
		      	this.BusinessCardPhotos= this.domainManager().ViittoFileUrl + x.data.FilePath
		      });
		    },
		    uploadImg1(file) {
		      //上传
		      let newArr = [];
		      newArr.push(file.file);
		      let path = "/Upload/Temporary/";
		      this.UploadSelfFileT(path, newArr, x => {
		        this.HousePhotos= this.domainManager().ViittoFileUrl + x.data.FilePath
		      });
		    },
		    uploadImg2(file) {
		      //上传
		      let newArr = [];
		      newArr.push(file.file);
		      let path = "/Upload/Temporary/";
		      this.UploadSelfFileT(path, newArr, x => {
		         this.Images= this.domainManager().ViittoFileUrl + x.data.FilePath
		      });
		    },			
			resetForm(formName) {//弹出框取消 初始化谈框内表单
		         this.$refs[formName].resetFields();
		       },
			submitForm(addMsg) {//提交创建、修改表单
	            this.$refs[addMsg].validate((valid) => {
	                if (valid) {
	                    this.addCustomerInfo()
	                } else {
	                    return false;
	                }
	            });
	        },
	         getCustomerBrandList(){  // 获取品牌
	            this.apipost('app_get_customer_brand',{},res=>{
	                if(res.data.resultCode==1){
	                    this.CustomerBrandList = res.data.data;
	                }else{
	                    this.$message.error(res.data.message)
	                }
	            },err=>{})
	        },
			addCustomerInfo(){
				this.addMsg.infoID=this.id
				this.apipost('app_AddCustomerContact',this.addMsg,res=>{
					if(res.data.resultCode==1){
						this.$message.success(res.data.message)
						this.getMyCustomerInfo()
						this.addLayer=false
					}else{
						this.$message.error(res.data.message)
					}
				},err=>{})
			},
			getMyCustomerInfo(){
				this.apipost('app_GetMyCustomerInfo',{customerId:this.id},res=>{
					 if(res.data.resultCode==1){
					 	let x=res.data.data
					 	this.customerInfo=res.data.data
					 	if(this.customerInfo.address.indexOf(',')!=-1){
					 		this.customerInfo.address=this.customerInfo.address.split(',')[1]
					 	}else{
					 		this.customerInfo.address=this.customerInfo.address
					 	}
					 	this.contact=res.data.data.contact
					 	this.updateMsg.CustomerName=x.customerName
					 	this.updateMsg.CustomerId=x.customerId
					 	this.updateMsg.Address=x.address
					 	this.updateMsg.Province=x.province
					 	this.getCity1()
					 	this.updateMsg.City=x.city
					 	this.getRegion1()
					 	this.updateMsg.District=x.district
					 	this.updateMsg.customerName=x.customerName
					 	if(x.businessCardPhotos&&x.businessCardPhotos.length>0)
					 	{
					 		this.BusinessCardPhotos=x.businessCardPhotos[0]
					 	}
					 	if(x.images&&x.images.length>0)
					 	{
					 		this.Images=x.images[0]
					 	}
					 	if(x.housePhotos&&x.housePhotos.length>0)
					 	{
					 		this.HousePhotos=x.housePhotos[0]				
					 	}
								
					 }else{}
				},err=>{})
			},
			saveUpdate(){
            	if(this.updateMsg.District=='')
		        	{
		        		this.updateMsg.District=0
		        	}
		            if(this.BusinessCardPhotos)
		            {   this.updateMsg.BusinessCardPhotos=[]
		            	this.updateMsg.BusinessCardPhotos.push(this.BusinessCardPhotos)
		            }
		            if(this.HousePhotos)
		            {   this.updateMsg.HousePhotos=[]
		            	this.updateMsg.HousePhotos.push(this.HousePhotos)
		            }
		            if(this.Images)
		            {   this.updateMsg.Images=[]
		            	this.updateMsg.Images.push(this.Images)
		            }
		            let sheng=''
					let shi=''
					let qu=''
					if(this.updateMsg.District=='')
					{
						this.updateMsg.District=0
					}
					if(this.updateMsg.City=='')
					{
						this.updateMsg.City=0
					}
					this.provinceList.forEach(item=>{
						if(this.updateMsg.Province==item.ID)
						{
							sheng=item.Name
						}
					})
					this.cityList.forEach(item=>{
						if(this.updateMsg.City==item.ID)
						{
							shi=item.Name
						}
					})
					this.regionList.forEach(item=>{
						if(this.updateMsg.District==item.ID)
						{
							qu=item.Name
						}
					})
					let AreaName=sheng+shi+qu	   
				    this.updateMsg.Address=AreaName+','+this.updateMsg.Address
		            console.log(this.updateMsg)
				this.apipost('app_customer_UpdateCustomerAddress',this.updateMsg,res=>{
					if(res.data.resultCode==1){
						this.$message.success(res.data.message)
						this.getMyCustomerInfo()
						this.addLayer1=false
					}else{
						this.$message.error(res.data.message)
					}
				},err=>{})
			},
			getVisitList(){
				this.msg.customerId=this.id
				this.apipost('app_customer_GetWebCustomerVisitListPage',this.msg,res=>{
					if(res.data.resultCode==1){
						//console.log(res.data.data)
						this.total=res.data.data.count
						this.visitList=res.data.data.pageData
					}
					else{}
				},err=>{})
			},
			getDuty(){
				this.apipost('app_today_visit_GetCustomerDutyEnum',{},res=>{
					if(res.data.resultCode==1){
						this.dutyList=res.data.data
					}else{}
				},err=>{})
			},
			getProvince(){
				this.apipost('app_customer_GetChildList',{Id:2,"level":1},res=>{
					if(res.data.resultCode==1){
						this.provinceList=res.data.data
					}
				},err=>{})
			},    	
			getCity(){
				this.apipost('app_customer_GetChildList',{Id:this.updateMsg.Province,"level":2},res=>{
					if(res.data.resultCode==1){
						this.cityList=res.data.data
						this.regionList=[]
						this.updateMsg.City=''
						this.updateMsg.District=''
					}
				},err=>{})
			},
			getRegion(){
				this.apipost('app_customer_GetChildList',{Id:this.updateMsg.City,"level":3},res=>{
					if(res.data.resultCode==1){
						this.regionList=res.data.data
						this.updateMsg.District=''
					}
				},err=>{})
			},
			getCity1(){
				this.apipost('app_customer_GetChildList',{Id:this.updateMsg.Province,"level":2},res=>{
					if(res.data.resultCode==1){
						this.cityList=res.data.data
					}
				},err=>{})
			},
			getRegion1(){
				this.apipost('app_customer_GetChildList',{Id:this.updateMsg.City,"level":3},res=>{
					if(res.data.resultCode==1){
						this.regionList=res.data.data
					}
				},err=>{})
			},				
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getVisitList()				
			},
		},
		mounted(){
		  this.id=this.$route.query.id
		  this.getCustomerBrandList()
		  this.getMyCustomerInfo()
		  this.getVisitList()
		  this.getDuty()
		  this.getProvince()
		},
	}


		
</script>