<template>
	<view class="edit-bg" v-show="showPop">
		<view class="edit-wrap">
			<view  class="return" @click="showPop = false">
				<view>
					新增/编辑联系人
				</view>
				
				<view class="return-icon">
					<u-icon name="close" bold></u-icon>
				</view>
			</view>
			<view class="editTop">
			
			</view>
			<view class="editBottom">
				<view class="bottomContent">
					<view>
						<text class="bottom-title">
							姓名
						</text>
						<input v-model.trim="name" placeholder="请输入姓名,必填" placeholder-class="placeholderStyle" />
					</view>
					
					<view @click="showIdType=true" v-if="credentialList.length>1">
						<text class="bottom-title">
							证件类型
						</text>
						<!-- 0和空用全等防止出现bug -->
						<text style="flex: 1;" v-if="credentialType===''">请选择证件类型</text>
						<text style="flex: 1;" v-if="credentialType===0">身份证</text>
						<text style="flex: 1;" v-if="credentialType==1">护照</text>
						<text style="flex: 1;" v-if="credentialType==2">港澳通行证</text>
						<text style="flex: 1;" v-if="credentialType==3">台胞通行证</text>
						<text style="flex: 1;" v-if="credentialType==4">台胞证</text>
						<text style="flex: 1;" v-if="credentialType==5">回乡证</text>
						<text style="flex: 1;" v-if="credentialType==6">外国人永久居留证</text>
						<text style="flex: 1;" v-if="credentialType==7">学生证</text>
						<text style="flex: 1;" v-if="credentialType==8">军官证</text>
						<text style="flex: 1;" v-if="credentialType==9">残疾军人证</text>
						<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
					</view>
					
					<view>
						<text class="bottom-title">
							证件号
						</text>
						<input v-model.trim="credentialNumber" :placeholder="placeholderText"  />
					</view>
					<view>
						<text class="bottom-title">
							联系电话
						</text>
						<input type="number" v-model.trim="phone" maxlength="11" placeholder="用于接收行程信息" />
					</view>
					<view>
						<text class="complete" @click="keepSave()">完成</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 证件类型弹窗 -->
		<u-popup  :show="showIdType" :round="20" @close="showIdType = false" closeable>
			<view style="padding: 24rpx;">
				<view style="text-align: center;padding-bottom:20rpx;">
					证件类型
				</view>
				<view v-for="(item,index) in credentialList" :key='index' class="idList" @click="chooseCredential(item)">
					<text v-if="item==0">身份证</text>
					<text v-if="item==1">护照</text>
					<text v-if="item==2">港澳通行证</text>
					<text v-if="item==3">台胞通行证</text>
					<text v-if="item==4">台胞证</text>
					<text v-if="item==5">回乡证</text>
					<text v-if="item==6">外国人永久居留证</text>
					<text v-if="item==7">学生证</text>
					<text v-if="item==8">军官证</text>
					<text v-if="item==9">残疾军人证</text>
					<!--用全等防止为空时出现bug -->
					<u-icon name='checkmark' size='48' color='#3688FF' v-if="credentialType===item"></u-icon>
				</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
export default {
  props: ['editContactData','credential'],
  data() {
    return {
      showPop: false, //控制组件显示隐藏
      name: '', //姓名
      credentialNumber: '', //身份证号
      phone:'',//手机号码
      reviseContactId: '', //被修改人id
      showIdType:false,//证件类型弹窗显示隐藏
      credentialList:[],//证件类型列表
      credentialType:'',//选中的证件类型
      placeholderText:'',//提示输入什么证件
    }
  },
  watch: {
    editContactData: { //编辑联系人数据
      handler(newValue, oldValue) {
        this.name = newValue.name||''
        this.credentialNumber = newValue.credentialNumber||''
        this.reviseContactId = newValue.id||''
        this.phone=newValue.phone||''
        if(typeof newValue.credentialType === 'undefined'){
          //补充证件信息时，没有证件类型，直接置为空
          this.credentialType=''
        }else{
          this.credentialType=newValue.credentialType
        }
      },
      deep: true,
      immediate: false
    },
    credential: {//该产品对应联系人可以添加的证件类型
		  handler(newValue, oldValue) {
        this.credentialList=newValue.split(',')||[]
        this.credentialList.forEach((item,index)=>{
          //转化成数字类型，防止上面证件类型，编辑选择身份证时出现bug
          this.credentialList[index]=parseFloat(item)
        })
        if(this.credentialList.length==1){
          let type=this.credentialList[0]
          if(type=='0'){this.placeholderText='请输入身份证，必填'}
          if(type=='1'){this.placeholderText='请输入护照，必填'}
          if(type=='2'){this.placeholderText='请输入港澳通行证，必填'}
          if(type=='3'){this.placeholderText='请输入台胞通行证，必填'}
          if(type=='4'){this.placeholderText='请输入台胞证，必填'}
          if(type=='5'){this.placeholderText='请输入回乡证，必填'}
          if(type=='6'){this.placeholderText='请输入外国人永久居留证，必填'}
          if(type=='7'){this.placeholderText='请输入学生证，必填'}
          if(type=='8'){this.placeholderText='请输入军官证，必填'}
          if(type=='9'){this.placeholderText='请输入残疾军人证，必填'}
        }
        if(this.credentialList.length>1){
          this.placeholderText='请输入证件号码，必填'
        } 
		  },
		  deep: true,
		  immediate: false
    }
  },
  methods: {
    //---选择证件类型
    chooseCredential(item){
      this.credentialType=item
      this.showIdType=false
    },
    //---保存
    keepSave() { 
      if(!this.name){
        uni.showToast({
				  title:'请输入姓名',
				  icon:'none'
        })
        return
      }
      let credentialType=''
      //当只有一个证件类型时取第一个
      if(this.credentialList.length==1){
        credentialType=this.credentialList[0]
      }
      //当有多个证件类型时取选中的那一个
      if(this.credentialList.length>1){
        credentialType=this.credentialType
      }
      if(credentialType===''){
        uni.showToast({
      	  title:'请选择证件类型',
      	  icon:'none'
        })
        return
      }
      if(!this.credentialNumber){
        uni.showToast({
				  title:'请输入证件号码',
				  icon:'none'
        })
        return
      }
      if (this.phone&&!this.$commonjs.phoneReg().test(this.phone)) {
			  uni.showToast({
			    title:'请输入正确电话号码',
			    icon:'none'
			  })
			  return
      }
      
      let data = {
        name: this.name, //保存姓名
        phone:this.phone, //电话号码
        credentialNumber: this.credentialNumber, //身份证号
        openid: uni.getStorageSync('openid'), //用户Id
        merchantType: 1, //商户类型，1.景区，2.酒店，3.餐饮
        id: this.reviseContactId, //被修改人id
        category: '', //成人或者儿童
        credentialType, //证件类型
      }
      let queryUrl=''
      if(this.reviseContactId){
        queryUrl='wechatUser/contact/updateContact'
      }else{
        queryUrl='wechatUser/contact/saveContact'
      }
      this.$request(queryUrl, data).then((res) => {
        if (res.code == '00') {
          uni.showToast({
            title:'保存成功',
            icon:'none'
          })
          if(!this.reviseContactId){
            this.$parent.addChoose()
            //显示联系人列表弹窗
            this.$parent.$refs.contactList.showPop = true
            //成功之后清空数据，防止下次新增的时候出现之前的数据
            this.name = '' 
            this.credentialNumber = ''
            this.phone=''
          }else{
            this.$parent.getContactList()
          }
          //关闭当前弹窗
          this.showPop = false
        } else {
          uni.showToast({
            title:res.message,
            icon:'none'
          })
        }
      })
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
	.edit-bg{
		background:rgba(0,0,0,0.4);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		padding-top: 100rpx;
	}
	.edit-wrap{
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #ffffff;
		border-radius: 20rpx;
	}
	.return {
		height: 100rpx;
		display: flex;
		align-items: center;
		background: #FFF1E8;
		color: #FC771D;
		justify-content: center;
		font-weight: bold;
		font-size: 32rpx;
		position: relative;
		border-radius: 20rpx 20rpx 0 0;
	}
	.return-icon{
		position: absolute;
		right: 24rpx;
	}
	.editTop {
		height:200rpx;
		background: linear-gradient(to bottom, #2984ef, #d8eaf6);
	}
	.editBottom {
		position: relative;
		top: -80rpx;
		padding: 0 20rpx;
	}
	.bottomContent {
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 20rpx 20rpx 60rpx 20rpx;
	}
	.bottomContent view {
		height: 100rpx;
		align-items: center;
		display: flex;
		border-bottom: 1px solid #f0f0f0;
	}
	.bottom-title{
		display: inline-block;
		width: 140rpx;
		text-align-last: justify;
		margin-right: 20rpx;
	}
	.bottomContent view input {
		flex: 1;
	}
	.bottomContent view:last-child {
		margin-top: 60rpx;
		border: none;
	}
	.complete{
		width:100%;
		height:70rpx;
		border-radius:16rpx;
		color: #FFFFFF;
		text-align: center;
		line-height:70rpx;
		background:$theme;
		display: inline-block;
	}
	.idList{
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		align-items: center;
		border-bottom: 1px solid #f3f3f3;
	}
	.placeholderStyle{
		color: $theme !important;
	}
	input::-webkit-input-placeholder {
	  color: $theme;
	}
	input::-moz-placeholder { /* Firefox 18- */
	  color: $theme; 
	  opacity: 1; /* 修复Firefox的不透明度问题 */
	}
	input:-moz-placeholder { /* Firefox 19+ */
	  color: $theme; 
	  opacity: 1; /* 修复Firefox的不透明度问题 */
	}
	input:-ms-input-placeholder {
	  color:$theme; 
	}
</style>
