<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="getVerifyStepOne()"
      ></content-one>
      <content-two
        v-if="step === 1"
        @success="getVerifyStepTwo()"
      ></content-two>
      <content-three
        v-if="step === 2"
        @success="getVerifyStepThree()"
      ></content-three>
      <content-four v-if="step === 3"></content-four>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } 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 { ElBreadcrumb, ElBreadcrumbItem } from "element-plus";

export default defineComponent({
  components: {
    StepBox,
    ContentOne,
    ContentTwo,
    ContentThree,
    ContentFour,
    ElBreadcrumb,
    ElBreadcrumbItem,
  },
  data() {
    return {
      step: 0,
      first: true,
    };
  },
  mounted() {},
  methods: {
    getVerifyStepOne() {
      this.step = 1;
    },
    getVerifyStepTwo() {
      this.step = 2;
    },
    getVerifyStepThree() {
      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>
