<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>
      <syBusinessForm :formList="formList" class="formlayout1"></syBusinessForm>
    </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"
          size="large"
          @click="$router.push('/userCenter')"
          style="background-color: #409eff"
          >返回首页</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  ElLoading,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElButton,
  ElMessage,
} from "element-plus";
import { defineComponent } from "vue";
import { syBusinessForm } from "cqk-sy-ui";
import { generateFormList } from "./config";
import { get, personVerify } from "@/service/Api.service";
export default defineComponent({
  components: {
    ElButton,
    ElBreadcrumb,
    syBusinessForm,
    ElBreadcrumbItem,
  },
  data() {
    return {
      verstatus: false,
      timer: 0,
      timer2: 0,
      count: 0,
      count2: 0,
      time: 20,
      show: true,
      loading: null as any,
      intervalHandle: -1,
    };
  },
  computed: {
    formList() {
      const confirm = (this as any).confirm;
      return generateFormList(confirm);
    },
  },
  watch: {
    count(val) {
      if (val === 0) this.$router.push("/userCenter");
    },
  },
  methods: {
    countDowns2() {
      const TIME_COUNT = 60;
      if (!this.timer2) {
        this.count2 = TIME_COUNT;
        this.show = false;
        this.timer2 = window.setInterval(() => {
          if (this.count2 > 0 && this.count2 <= TIME_COUNT) {
            this.count2--;
          } else {
            this.show = true;
            clearInterval(this.timer2);
            this.timer2 = 0;
          }
        }, 1000);
      }
    },
    // 确认提交
    async confirm(
      valid: boolean,
      data: any,
      setError: (fieldName: string, errorMsg: string) => void
    ) {
      if (valid) {
        const res = await personVerify(data);
        console.log(res, 'show res')
        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) {
              ElMessage(date.data.message);
            } else if (date.data.status === 2) {
              this.verstatus = true;
              this.countDown();
            } else if (date.data.status === 1) {
              this.loading = ElLoading.service({
                lock: true,
                text: "认证中",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
              });
              this.intervalHandle = window.setInterval(() => {
                if (this.time > 0) {
                  this.time--;
                  this.getStatus();
                } else {
                  this.loading.close();
                  clearInterval(this.intervalHandle);
                  ElMessage("认证失败，请重新认证");
                  this.$router.push({
                    path: "/userCenter",
                  });
                }
              }, 3000);
            }
          }
        } else {
          if (res?.msg) {
              console.log(res)
            const config = [
              { p: /姓名/, fieldName: "真实姓名" },
              { p: /身份证/, fieldName: "身份证号" },
              { p: /银行卡/, fieldName: "银行卡号" },
              { p: /手机/, fieldName: "银行预留手机号" },
              { p: /验证码/, fieldName: "验证码" },
            ];
            const match = config.find((i) => i.p.test(res.msg));
            console.log(match, 'show match')
            match
              ? setError(match.fieldName, res.msg)
              : ElMessage.error(res.msg);
          }
        }
      } else {
        ElMessage("认证信息存在错误，请确认！");
        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);
          ElMessage({
            message: "恭喜您认证成功",
            type: "success",
          });
          this.loading.close();
          this.countDown();
        } else if (res.data.status === 3) {
          clearInterval(this.intervalHandle);
          ElMessage({
            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 = window.setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = 0;
          }
        }, 1000);
      }
    },
  },
});
</script>

<style scoped lang="scss">
.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: var(--text-gray);
    margin-top: 9px;
    margin-bottom: 19px;
    line-height: 17px;
  }
}
h2 {
  margin-top: 34px;
  font-size: 18px;
  height: 25px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: var(--sy-black);
  line-height: 25px;
}
</style>
