<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: '',
      isAdd: false,//是否为新增家长（新增学生不在此页面）
    }
  },
  mounted () {
    let editContact = JSON.parse(localStorage.getItem('editContact'))
    if (this.$route.query.add) {
      console.log('新增家长')
      this.userType = 2;
      this.userTypeName = '家长'
      this.isAdd = true;
    } else {
      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
      }
      if (editContact?.gender) {
        this.gender = String(editContact?.gender)
      }
      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 = {
        contactsName: this.travelerName,
        contactsMobile: this.phone,
        contactsIdCard: this.travelerIdCard,
        contactsType: this.userType,
        gender: Number(this.gender),
        loginMobile: userInfo?.phone
      };
      if (!this.isAdd) {//新增学生或家长
        postData.userNum = this.travelerNum;
      }
      this.$toast.loading({
        message: '加载中',
        duration: 0,
        forbidClick: true
      })
      this.mgop({
        api: 'mgop.sz.hswsy.addContacts', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'GET',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: postData,
        onSuccess: res => {
          this.$toast.clear()
          if (res.data.code == 200) {
            this.$toast.success('完善成功')
            this.$router.back()
          } else {
            this.$toast.fail(res.message)
          }
        },
        onFail: err => {
          console.log('err', err)
        }
      });
    },
    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>