<template>
	<view class="edit-bg" v-show="showEdit">
		<view class="edit-wrap">
			<view  class="return">
				<!-- 新增的时候 -->
				<view v-if="!reviseContactId">
					已新增{{contactTotal.length}}位联系人
				</view>
				
				<view @click="showEdit = false" class="return-icon">
					<u-icon name="close" bold></u-icon>
				</view>
			</view>
			<view class="editTop">
			
			</view>
			<view class="editBottom">
				<view class="bottomContent">
					<view>
						<text>
							姓名：
						</text>
						<input v-model.trim="name" placeholder="请输入中文姓名,必填" />
					</view>
			
					<view>
						<text>
							身份证：
						</text>
						<input type="idcard" v-model.trim="credentialNumber" maxlength="18" placeholder="请输入身份证号码,必填" />
					</view>
					<view>
						<text>
							联系电话：
						</text>
						<input type="number" v-model.trim="phone" maxlength="11" placeholder="用于接收行程信息" />
					</view>
					<view>
						<a class="complete" @click="keepSave()">完成</a>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  props: ['editContact','contactTotal'],
  data() {
    return {
      showEdit: false, //控制组件显示隐藏
      name: '', //姓名
      credentialNumber: '', //身份证号
      phone:'',//手机号码
      reviseContactId: '', //被修改人id
    }
  },
  watch: {
    editContact: { 
      handler(newValue, oldValue) {
        this.name = newValue.name||''
        this.credentialNumber = newValue.credentialNumber||''
        this.reviseContactId = newValue.id||''
        this.phone=newValue.phone||''
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    //---保存
    keepSave() { 
      if (!this.$commonjs.nameReg().test(this.name)) {
        uni.showToast({
          title:'请输入正确的中文名字',
          icon:'none'
        })
        return
      }
      if (!this.$commonjs.idReg().test(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: '', //成人或者儿童
        credentialsType: '', //证件类型
      }
      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.name = '' 
            this.credentialNumber = ''
            this.phone=''
          }else{
            this.$parent.getContactList()
          }
          this.showEdit = 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;
	}
	.bottomContent view text {
		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;
	}
</style>
