<template>
  <div class="studentAuth">
    <!-- <m-header /> -->
    <div class="containerAuth">
      <p class="input-label">真实姓名</p>
      <div class="input-group van-hairline--bottom">
        <!-- <input @blur="codeBlur" class="van-hairline--bottom input" @input="onKeyUp()" placeholder="请输入姓名" v-model="parentsName" > -->
        <van-field v-model="parentsName" placeholder="请输入姓名" />
      </div>
      <!-- <p class="input-label">证件类型</p>
      <div class="input-group van-hairline--bottom">
        <van-field
          v-model="cardType"
          readonly
          @click="showSheet = true"
          is-link
          placeholder="请选择证件类型"
        />
      </div> -->
      <p class="input-label">证件号码</p>
      <div class="input-group van-hairline--bottom">
        <!-- <input type="text" @blur="codeBlur" class="van-hairline--bottom input" @input="onKeyUp()" placeholder="请输入证件号码" v-model="idCardNo" > -->
        <van-field v-model="idCardNo" placeholder="请输入证件号码" />
      </div>

      <van-button round size="large" @click="onSubmit" :disabled="codeDisable"
        >确定</van-button
      >
      <p class="tips">
        根据<span style="color: red;">《合同法》、《电子签名法》</span
        >要求，请您据实填写相关身份信息，确保所签署文件真实有效，以保证您的合法权益。
      </p>

      <van-action-sheet
        v-model="showSheet"
        :actions="actions"
        cancel-text="取消"
        @select="select"
        close-on-click-action
      />
    </div>
  </div>
</template>
<script>
// 判断当前是否是app
import { postMessage } from '@/helpers/native-message'
import MHeader from "@/components/MHeader";
import { queryUserInfo, realNameAuthentication, teacherContractSign } from "./api";
// import { userInfoUpdate } from "@/api/login";
import { browser } from "@/common/common";
import {
  checkIDCard,
  checkPassport,
  checkPassportTaiwan,
} from "@/utils/validate";
export default {
  name: "studentAuth",
  components: {
    MHeader,
  },
  data() {
    return {
      headerStatus: false,
      parentsName: null,
      cardType: "身份证",
      cardName: "IDENTITY",
      idCardNo: null,
      showSheet: false,
      actions: [
        {
          name: "身份证",
          index: "IDENTITY",
        },
        {
          name: "港澳居民往来内地通行证",
          index: "HK_MAC",
        },
        {
          name: "台湾居民往来内地通行证",
          index: "TAIWAN",
        },
        {
          name: "外国护照",
          index: "FOREIGN_PASSPORT",
        },
      ],
    };
  },
  async mounted() {
    let params = this.$route.query;
    if (params.Authorization) {
        localStorage.setItem("Authorization", decodeURI(params.Authorization));
        localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
    if (!browser().android && !browser().iPhone) {
      this.headerStatus = true;
    }
    document.title = '实名认证'
    // const params = this.params;
    // this.parentsName = params.parentsName;
    // this.idCardNo = params.idCardNo;
    try {
      let res = await queryUserInfo()
      this.parentsName = res.data.realName;
      this.idCardNo = res.data.idCardNo;
    } catch(e) {
      // 
    }
    // postMessage({ api: 'authToBack', content: { }})
  },
  computed: {
    codeDisable() {
      return !this.idCardNo || !this.parentsName ? true : false;
    },
  },
  methods: {
    select(val) {
      this.cardType = val.name;
      this.cardName = val.index;
    },
    async onSubmit() {
      // 提交数据
      if (this.codeDisable) {
        return;
      }
      let nameReg = /^[\u4E00-\u9FA5]+$/;
      // if(this.parentsName)
      if (!nameReg.test(this.parentsName)) {
        this.$toast("真实姓名必须为中文");
        return;
      } else if (this.parentsName.length < 2 || this.parentsName.length > 15) {
        this.$toast("真实姓名必须为2~15个字");
        return;
      }
      // 判断身份证号是否完整
      if (this.cardType == "身份证") {
        if (!checkIDCard(this.idCardNo)) {
          this.$toast("身份证号输入有误");
          return;
        }
      }
      //  else if (this.cardType == "港澳居民往来内地通行证") {
      //   if (!checkPassport(this.idCardNo)) {
      //     this.$toast("港澳居民往来内地通行证输入有误");
      //     return;
      //   }
      // } else if (this.cardType == "台湾居民往来内地通行证") {
      //   if (!checkPassportTaiwan(this.idCardNo)) {
      //     this.$toast("台湾居民往来内地通行证输入有误");
      //     return;
      //   }
      // } else if (this.cardType == "外国护照" && !this.idCardNo) {
      //   return;
      // }
      try {
        await realNameAuthentication({ realName: this.parentsName, idcardNo: this.idCardNo })

        // await teacherContractSign()
        this.$toast("实名成功");
        // 协议生成之后返回
        setTimeout(() => {
          postMessage({ api: 'authToBack', content: { }})
          // postMessage({ api: 'back', content: { }})
        }, 1000);
      } catch(e) {
        //
      }
    }
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");

.studentAuth {
  min-height: 100vh;
  background: #fff;

  .containerAuth {
    padding: 0.28rem 0.28rem 0;

    .input-label {
      font-size: 0.16rem;
      color: #444;
    }
  }

  .input-group {
    position: relative;
    height: 0.4rem;
    border-radius: 0.5rem;
    // border: .02rem solid @whiteColor;
    display: flex;
    align-items: center;
    margin-bottom: 0.3rem;

    .input {
      line-height: 0.4rem;
      flex: 1;
      font-size: 0.14rem;
      background: transparent;
      border: none;
      // border-bottom: 1px solid #EBEBEB;
    }

    .code-text {
      position: absolute;
      right: 0;
      flex: 1;
      display: block;
      width: 0.94rem;
      text-align: center;
      border-left: 0.02rem solid @whiteColor;
      font-size: 0.14rem;
      color: @whiteColor;
      line-height: 0.3rem;
      height: 0.3rem;
    }
  }

  /deep/.van-count-down {
    font-size: 0.14rem;
    color: @whiteColor;
    line-height: 0.3rem;
    height: 0.3rem;
  }

  /deep/.van-button--large {
    height: 0.44rem;
    line-height: 0.42rem;
    color: @whiteColor;
    background: @mColor;
    border: 0;
  }

  /deep/.van-button:active::before {
    opacity: 0.05;
  }

  /deep/.van-button--disabled {
    opacity: 1;
    color: rgba(255, 255, 255, 0.55);
    background: #ccc;
  }

  .login-change {
    padding-top: 0.08rem;
    font-size: 0.14rem;
    color: @whiteColor;
    float: right;
  }

  .tips {
    color: #7c7c7c;
    font-size: 0.14rem;
    padding-top: 0.1rem;
  }

  /deep/.van-cell {
    padding: 0.12rem 0;
  }
}
</style>
