<template>
  <div class="wrapper">
    <div class="top">
      <img src="https://cdn.cunwuyun.cn/AppAuth/security.png" alt="">
      <span class="toast">请验证你的个人信息</span>
    </div>
    <div class="form">
      <u-input placeholder="请输入姓名" trim placeholder-style="color:#ccc;font-size:17px"
               :custom-style="{height:'72px',borderBottom:'1px solid #ddd'}" v-model="name"/>
      <u-input placeholder="请输入身份证号码" trim placeholder-style="color:#ccc;font-size:17px"
               :custom-style="{height:'72px'}" v-model="idNumber" maxlength="18"/>
    </div>
    <div class="btn" @click="confirm()">提交</div>
    <!-- <div class="promise">以上信息将为你严格保密</div> -->
    <div class="bottom-text">
      <u-checkbox v-model="isChecked"></u-checkbox>
      <span @click="isChecked=!isChecked">阅读并同意</span>
      <span class="deal" @click.stop="toAgreement()">《用户服务及隐私协议》</span>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex';

export default {
  name: "AppAuth",
  appName: "实名认证",
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      name: '',
      idNumber: '',
      isChecked: false,
    };
  },
  onLoad() {
    let {status} = this.user
    if (status == 2) {
      uni.redirectTo({url: "./authInfo"})
    } else if (status == 0) {
      //停留此页
    } else {
      uni.redirectTo({url: "./authSuccess"})
    }
  },
  methods: {
    toAgreement() {
      uni.navigateTo({url: "./agreement"})
    },
    confirm() {
      if(this.isChecked == flase) {
        return this.$u.toast('请勾选用户服务及隐私协议')
      }
      let {name, idNumber} = this
      if (!name) {
        return this.$u.toast('请填写姓名')
      }
      if (!idNumber) {
        return this.$u.toast('请填写身份证号码')
      }

      if (!this.$idCardNoUtil.checkIdCardNo(idNumber)) {
        return this.$u.toast('请输入正确的身份证号码')
      }
      this.$instance.post(`/app/appwechatuser/idNumberAttestation`, {
        idNumber, name
      }).then(res => {
        if (res.code == 0) {
          if (res.data == 2 || res.data == 0) {
            this.$store.commit('getUserInfo')
            uni.redirectTo({
              url: `./authSuccess?status=${res.data}`, success: () => {
                if (res.data == 0) {
                  uni.setStorageSync("authForm", {idNumber, name})
                }
              }
            })
          } else {
            uni.redirectTo({url: "./authSuccess"})
          }
        } else {
          this.$u.toast(res.msg);
          setTimeout(() => {
            uni.navigateBack();
          }, 500)
        }
      }).catch(err => {
        this.$u.toast(err)
      })
    },
  }
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";

.top {
  height: 480px;
  background: #4181FF;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 48px;

  & > img {
    width: 160px;
    height: 160px;
  }

  .toast {
    margin-top: 32px;
    font-size: 44px;
    font-weight: 600;
    color: #D9E5FF;
    line-height: 60px;
  }
}

.form {
  width: 686px;
  background: #FFFFFF;
  margin: -132px auto 0;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  box-sizing: border-box;
  padding: 0 48px;

  .input {
    width: 590px;
    height: 144px;
    border-bottom: 2px solid #DDDDDD;
  }
}

.btn {
  width: 686px;
  height: 88px;
  margin: 80px auto 0;
  background: #4181FF;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 500;
  color: #FFFFFF;
}

.bottom-text {
  padding: 0 48px;
  text-align: center;
  margin-top: 30px;
  .deal {
    color: #4181ff;
  }
}

.promise {
  font-size: 28px;
  font-weight: 400;
  color: #999999;
  line-height: 40px;
  text-align: center;
  margin-top: 48px;
}
</style>
