<template>
  <div id="newContact">
    <div class="box">
      <van-cell-group>
        <van-field v-model="userTypeName" label="身份类型" readonly />
        <van-field v-model="travelerName" label="姓名" placeholder="需与证件姓名一致" />
        <van-cell title="性别">
          <template #right-icon>
            <van-radio-group v-model="gender" direction="horizontal" style="width:67%;">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <van-field v-model="phone" label="手机号码" maxlength="11" placeholder="请填写手机号码" />
        <van-field v-model="travelerIdCard" label="身份证" maxlength="18" placeholder="请填写证件号码" />
      </van-cell-group>
    </div>
    <p class="tip">*请认真核对信息并确保无误</p>
    <van-button class="btn" type="primary" @click="addContact">确定</van-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      id: '',
      userType: '',
      userTypeName: '',
      travelerName: '',
      phone: '',
      gender: '',
      travelerIdCard: '',
      travelerNum: ''
    }
  },
  mounted () {
    let editContact = JSON.parse(localStorage.getItem('editContact'))

    this.userType = editContact?.userType
    this.userTypeName = editContact?.userType == 1 ? '学生' : '家长'
    if (editContact?.travelerIdCard) {
      this.travelerIdCard = editContact?.travelerIdCard
    }
    if (editContact?.travelerMobile) {
      this.phone = editContact?.travelerMobile
    }
    if (editContact?.travelerName) {
      this.travelerName = editContact?.travelerName
    }
    this.userType = editContact?.userType
    this.travelerNum = editContact?.travelerNum
  },
  methods: {
    // 确认
    addContact () {
      if (!this.gender) {
        this.$toast('请选择性别')
        return;
      }
      if (!this.phone) {
        this.$toast('请输入手机号')
        return;
      }
      if (!this.checkPhone(this.phone)) {
        this.$toast('请输入正确的手机号')
        return;
      }
      if (!this.travelerIdCard) {
        this.$toast('请输入身份证');
        return;
      }
      if (!this.checkCard(this.travelerIdCard)) {
        this.$toast('请输入正确的身份证号')
        return;
      }
      let userInfo = localStorage.getItem('userInfo')
      userInfo = userInfo ? JSON.parse(userInfo) : userInfo;
      let postData = {
        userNum: this.travelerNum,
        contactsName: this.travelerName,
        contactsMobile: this.phone,
        contactsIdCard: this.travelerIdCard,
        contactsType: this.userType,
        gender: Number(this.gender),
        loginMobile: userInfo?.phone
      }
      this.$toast.loading({
        message: '加载中',
        duration: 0,
        forbidClick: true
      })
      this.yxAxios.post(`${this.baseUrl}/prod/user/info/addContacts`, postData).then((res) => {
        this.$toast.clear()
        if (res.data.code == 200) {
          this.$toast.success('完善成功')
          this.$router.back()
        } else {
          this.$toast.fail(res.message)
        }
      })
    },
    checkPhone (phone) {
      if ((/^1[3456789]\d{9}$/.test(phone))) {
        return true
      } else {
        return false
      }
    },
    checkCard (card) {
      // 18位身份证校验
      if ((/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(card))) {
        return true
      } else {
        return false
      }
    },
  }

}
</script>
<style lang="scss" scoped>
#newContact {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 16px 0;
  background: #f6f7fa;
  .box {
    width: 702px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 16px;
    .checkbox:not(:last-of-type) {
      margin-right: 30px;
    }
  }
  .tip {
    margin-top: 16px;
    margin-left: 24px;
    font-size: 24px;
    color: #ff3838;
  }
  .btn {
    position: fixed;
    bottom: 100px;
    left: 24px;
    width: 702px;
    height: 90px;
    background: #4092ff;
    border: 1px solid #4092ff;
    box-shadow: 0px 10px 40px 0px #a0c9ff;
    border-radius: 45px;
  }
}
</style>