<template>
  <LoginLayout>
    <div class="pl-169">
      <h3 class="fs-34 mb-137">您的注册信息已提交</h3>
      <a-steps
      class="h-276 account-status-step-box"
      direction="vertical"
      :current="step"
      :items="[
        {
          title: '您已提交成功， 请等待审核',
          // description: '2024-12-12 20:00:00',
          icon: h(StepIcon, {type: 0, currentStep: step})
        },
        {
          title: '工作人员审核（约1-2个工作日）',
          // description: '2024-12-12 20:00:00',
          icon: h(StepIcon, {type: 1, currentStep: step})
        },
        {
          title: '注册成功，维护品牌产品信息',
          icon: h(StepIcon, {type: 2, currentStep: step})
        },
      ]"
    ></a-steps>
    </div>
  </LoginLayout>
</template>

<script setup lang="ts">
import { h } from 'vue';
import StepIcon from './components/stepIcon.vue'
import { useRoute } from 'vue-router';

const route = useRoute()
const step = ref<number>(Number(route.query.step))

</script>

<style lang="less">
@import '@/assets/styles/variables.less';
.account-status-step-box{
  .ant-steps-item{
    .ant-steps-item-title{
      font-size: 20px;
    }
  }
  .ant-steps-item-active{
    .ant-steps-item-content{
      .ant-steps-item-title{
        color: #00B386 !important;
        font-size: 24px;
        font-weight: bold;
      }
      .ant-steps-item-description{
        color: #999 !important;
      }
    }
  }
  .ant-steps-item-finish{
    .ant-steps-item-title{
        font-weight: bold;
      }
    .ant-steps-item-tail{
      &::after{
        background-color: #eee !important;
      }
    }
  }
}

</style>

