<template>
  <div v-loading.fullscreen.lock="loading" class="page-person-real-result">
    <page-title title="完成人脸识别"/>
    <section class="page-rnr-result">
      <main class="page-rnr-result-content">
        <div :class="[STATUS.FAIL, STATUS.TX_VALID_FAIL].includes(status) ? 'icon-result-fail' : 'icon-result-success'" class="page-rnr-result-icon" />
        <div v-if="status === STATUS.FAIL" class="page-rnr-result-title">认证失败</div>
        <div v-else-if="status === STATUS.MAN_WORK" class="page-rnr-result-title">已转入人工审核，请注意查询认证进度</div>
        <div v-else-if="status === STATUS.TX_VALID_FAIL" class="page-rnr-result-title">腾讯活体认证失败</div>
        <div v-else class="page-rnr-result-title">恭喜您认证成功</div>
      </main>
      <div class="next-step">
        <el-button v-if="status === STATUS.TX_VALID_FAIL" size="small" plain @click.stop="handleToTxVerify">重新认证</el-button>
        <el-button v-else size="small" type="primary" @click.stop="handleToNextPage(status === STATUS.FAIL ? 'PersonRealnameStep1' : 'HomePage')">{{ status === STATUS.FAIL ? '重新认证' : '返回首页' }}</el-button>
      </div>
    </section>
  </div>
</template>

<script>
import { livenessCallback } from '@/api/realname-person'

// 状态
const STATUS = {
  // 加载中
  PENDING: -1,
  // 腾讯活体认证失败
  TX_VALID_FAIL: 2,
  // 成功
  SUCCESS: 0,
  // 人工审核中
  MAN_WORK: 1,
  // 失败
  FAIL: 3
}

export default {
  name: 'MarkupPersonResult',
  data() {
    return {
      STATUS,
      status: STATUS.PENDING,
      h5LivenessUrl: '',
      loading: true
    }
  },
  mounted() {
    // 开始提交实名信息
    this.fetchRnrCallback(this.$route.query)
  },
  methods: {
    /**
     * 提交实名认证的接口
     */
    async fetchRnrCallback(query) {
      // 标记当前在loading中
      this.loading = true
      try {
        // 开始提交数据
        const { status, h5LivenessUrl } = await livenessCallback({
          ...(query || {}),
          source: 'PAD'
        })
        // 标记当前提交成功
        this.status = status
        // h5活体验证的链接
        this.h5LivenessUrl = h5LivenessUrl
        // 标记当前loading结束
        this.loading = false
        return
      } catch (error) {
        console.error(error)
      }
      // 标记当前loading结束
      this.loading = false
      // 标记当前提交失败
      this.status = STATUS.FAIL
    },

    /**
     * 跳转到活体认证
     */
    handleToTxVerify() {
      // 跳转到活体认证页面
      window.location.href = this.h5LivenessUrl
    },

    /**
     * 跳转到下一个页面
     * @param pageName 页面名称
     */
    handleToNextPage(pageName) {
      this.$router.push({ name: pageName })
    }
  }
}
</script>

<style lang="scss">
.page-person-real-result {
  padding-bottom: 64px;
  .next-step {
    z-index: 5;
  }
  .page-rnr-result {
    .page-rnr-result-content {
      padding-top: 72px;
      .page-rnr-result-icon {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 324px;
        height: 245px;
        margin: 0 auto;
        &.icon-result-success {
          background-image: url(../../assets/rnr/ico_success.png);
        }
        &.icon-result-fail {
          background-image: url(../../assets/rnr/ico_fail.png);
        }
      }
      .page-rnr-result-title {
        color: #212026;
        font-size: 36px;
        font-weight: 500;
        text-align: center;
        margin-top: 24px;
      }
    }
    .page-rnr-main-fixed-btn-group {
      background-color: #ffffff;
      bottom: 0px;
      height: 148px;
      padding: 20px 32px;
      position: fixed;
      left: 0px;
      right: 0px;

      .page-rnr-main-btn-next {
        font-size: 30px;
        height: 96px;
      }
    }
  }
}
</style>
