<template>
  <div class="person-verify">
    <el-breadcrumb separator="/" class="head-nav">
      <el-breadcrumb-item :to="{ path: '/userCenter' }"
        >用户中心</el-breadcrumb-item
      >
      <el-breadcrumb-item>个人认证</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="verify-form" v-if="!verstatus">
      <p class="title">请提交您的实名认证信息：</p>
      <el-form
        hide-required-asterisk
        label-position="right"
        label-width="120px"
        :model="verForm"
        class="form"
        :rules="rules"
        ref="verForm"
      >
        <el-form-item label="真实姓名" class="form-item" prop="name">
          <el-input
            v-model="verForm.name"
            placeholder="请输入您的真实姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号" class="form-item" prop="id_card">
          <el-input
            v-model="verForm.id_card"
            placeholder="请输入您的身份证号"
            maxlength="18"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="银行卡号" class="form-item" prop="bank_card">
          <el-input
            v-model="verForm.bank_card"
            placeholder="请输入您的银行卡号"
            maxlength="19"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="银行预留手机号"
          class="form-code"
          prop="bank_phone"
        >
          <el-input
            v-model="verForm.bank_phone"
            placeholder="请输入您的银行卡预留手机号"
            clearable
          ></el-input>
          <div class="code-btn">
            <el-button
              type="primary"
              @click="getCode()"
              class="send-btn"
              :disabled="!show"
              >{{ show ? "获取验证码" : "重新发送" + count2 }}</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="验证码" class="form-item" prop="code">
          <el-input
            v-model="verForm.code"
            placeholder="请输入验证码"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button class="confirm-btn" type="primary" @click="confirm('verForm')"
        >提交审核</el-button
      >
    </div>
    <div class="verify-success g-flex-center" v-if="verstatus">
      <div class="success-box">
        <i class="iconfont icondg"></i>
        <h2>恭喜你顺利通过个人实名认证</h2>
        <p>{{ count }}s后为您自动返回首页</p>
        <el-button type="primary" @click="$router.push('/userCenter')"
          >返回首页</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import CodeBtn from "./VerCode.vue";
import { Loading } from "element-ui";
import { smsPerson, personVerify, get } from "./Api.service";
export default {
  components: {
    CodeBtn,
  },
  data() {
    // 校验身份证
    let checkIdNumber = (rule, value, callback) => {
      const checkReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!checkReg.test(value)) callback(new Error("身份证号码格式不正确！"));
      else callback();
    };
    // 校验银行卡
    let checkCard = (rule, value, callback) => {
      const checkReg = /^(\d{16}|\d{17}|\d{19})$/;
      if (!checkReg.test(value)) callback(new Error("银行卡位数不正确！"));
      else callback();
    };
    // 校验手机号
    let checkPhone = (rule, value, callback) => {
      const checkReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!checkReg.test(value)) callback(new Error("手机号格式不正确！"));
      else callback();
    };
    return {
      verForm: {
        name: "",
        id_card: "",
        bank_card: "",
        bank_phone: "",
        code: "",
      },
      verstatus: false,
      timer: 0,
      timer2: 0,
      count: 0,
      count2: 0,
      time: 20,
      show: true,
      rules: {
        name: [
          { required: true, message: "真实姓名不能为空", trigger: "blur" },
        ],
        id_card: [{ validator: checkIdNumber, trigger: "blur" }],
        bank_card: [{ validator: checkCard, trigger: "blur" }],
        bank_phone: [{ validator: checkPhone, trigger: "blur" }],
        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
      },
      loading: null,
    };
  },
  watch: {
    count(val) {
      if (val === 0) this.$router.push("/userCenter");
    },
  },
  created() {},
  methods: {
    countDowns2() {
      const TIME_COUNT = 60;
      if (!this.timer2) {
        this.count2 = TIME_COUNT;
        this.show = false;
        this.timer2 = setInterval(() => {
          if (this.count2 > 0 && this.count2 <= TIME_COUNT) {
            this.count2--;
          } else {
            this.show = true;
            clearInterval(this.timer2);
            this.timer2 = 0;
          }
        }, 1000);
      }
    },
    // 确认提交
    confirm(verForm) {
      this.$refs[verForm].validate(async (valid) => {
        if (valid) {
          const res = await personVerify(this.verForm);
          if (res && res.code === 200) {
            const date = await get(
              JSON.parse(String(sessionStorage.getItem("user"))).id
            );
            if (date) {
              if (date.data.status !== 1 && date.data.status !== 2) {
                this.$message(date.data.message);
              } else if (date.data.status === 2) {
                this.verstatus = true;
                this.countDown();
              } else if (date.data.status === 1) {
                this.loading = this.$loading.service({
                  lock: true,
                  text: "认证中",
                  spinner: "el-icon-loading",
                  background: "rgba(0, 0, 0, 0.7)",
                });
                this.intervalHandle = setInterval(() => {
                  if (this.time > 0) {
                    this.time--;
                    this.getStatus();
                  } else {
                    this.loading.close();
                    clearInterval(this.intervalHandle);
                    this.$message("认证失败，请重新认证");
                    this.$router.push({
                      path: "/userCenter",
                    });
                  }
                }, 3000);
              }
            }
          }
        } else {
          this.$message("认证信息存在错误，请确认！");
          return false;
        }
      });
    },
    async getStatus() {
      const res = await get(
        JSON.parse(String(sessionStorage.getItem("user"))).id
      );
      if (res) {
        // 个人认证状态（0:未认证 1:认证中 2:认证成功 3:认证失败
        if (res.data.status === 2) {
          clearInterval(this.intervalHandle);
          this.$message({
            message: "恭喜您认证成功",
            type: "success",
          });
          this.loading.close();
          this.countDown();
        } else if (res.data.status === 3) {
          clearInterval(this.intervalHandle);
          this.$message({
            message: res.data.message,
            type: "warning",
          });
          this.loading.close();
          this.$router.push({
            path: "/userCenter",
          });
        }
      }
    },
    // 倒计时返回个人中心
    countDown() {
      const TIME_COUNT = 3;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = 0;
          }
        }, 1000);
      }
    },
    // 发送验证码
    async getCode(ticket, randstr) {
      const checkReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (checkReg.test(this.verForm.bank_phone)) {
        const res = await smsPerson(this.verForm.bank_phone);
        if (res && res.code === 200) {
          this.$message({
            message: "验证码发送成功！",
            type: "success",
          });
          this.countDowns2();
        }
      } else this.$message("手机号格式不正确！");
    },
  },
};
</script>

<style scoped lang="less">
.person-verify {
  padding: 16px;
  min-height: calc(100vh - 95px);
  min-width: 1200px;
  background: #f8fafb;
}
.g-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.head-nav {
  position: absolute;
  margin: 12px 0 40px 47px;
}
.title {
  margin-top: 64px;
  margin-left: 47px;
  font-size: 20px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  color: rgba(53, 53, 53, 1);
  line-height: 40px;
}
.form {
  width: 900px;
}
.code-btn {
  display: inline-block;
  margin-left: 15px;
}
.send-btn {
  width: 112px;
}
.form .el-input {
  width: 610px;
}
.form-item {
  margin-bottom: 28px;
}
.form-code .el-input {
  width: 483px;
}
.confirm-btn {
  margin-top: 10px;
  margin-left: 50px;
}
.verify-success {
  min-height: calc(100vh - 95px);
}
.success-box {
  text-align: center;
  .icondg {
    font-size: 50px;
    color: #27cf72;
    margin-bottom: 37px;
  }
  p {
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #797d84;
    padding-top: 9px;
    padding-bottom: 19px;
    line-height: 17px;
  }
}
h2 {
  margin-top: 34px;
  font-size: 18px;
  height: 25px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #353535;
  line-height: 25px;
}
</style>
<style>
.person-verify .el-form-item__content {
  margin-left: 141px !important;
}
</style>
