<template>
  <div class="company-verify">
    <el-breadcrumb separator="/" class="head-nav">
      <el-breadcrumb-item :to="{ path: '/userCenter' }"
        >用户中心</el-breadcrumb-item
      >
      <el-breadcrumb-item>企业认证</el-breadcrumb-item>
    </el-breadcrumb>
    <step-box :step="step"></step-box>
    <div class="step-content">
      <content-one v-if="step === 0" @success="getVerifyStep()"></content-one>
      <content-two v-if="step === 1" @success="getVerifyStep()"></content-two>
      <content-three
        v-if="step === 2"
        @success="getVerifyStep()"
      ></content-three>
      <content-four v-if="step === 3"></content-four>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import StepBox from "./VerifyStep.vue";
import ContentOne from "./StepOne.vue";
import ContentTwo from "./StepTwo.vue";
import ContentThree from "./StepThree.vue";
import ContentFour from "./StepFour.vue";
import { companyStatus } from "./Api.service";
export default Vue.extend({
  components: {
    StepBox,
    ContentOne,
    ContentTwo,
    ContentThree,
    ContentFour,
  },
  data() {
    return {
      step: 0,
    };
  },
  mounted() {
    this.getVerifyStep();
  },
  methods: {
    // 获取企业认证状态
    async getVerifyStep() {
      const res = await companyStatus(
        JSON.parse(String(sessionStorage.getItem("user"))).id
      );

      if (res && res.code === 200) {
        if (res.data.status === 1) {
          this.step = 1;
        } else if (res.data.uscd !== "" && res.data.status === 1) {
          this.step = 2;
        } else if (res.data.status === 2) {
          this.step = 3;
        }
      }
    },
  },
});
</script>

<style scoped>
.company-verify {
  padding: 16px;
  min-height: calc(100vh - 95px);
  min-width: 1200px;
  background: #f8fafb;
}
.head-nav {
  margin: 12px 0 40px 47px;
}
</style>

