<template>
  <div class="authentication">
    <el-steps
        class="steps"
        :active="stepActive"
        simple>
      <el-step title="提交个人身份资料">
        <template #icon>
          <div class="step-icon">1</div>
        </template>
      </el-step>
      <el-step title="提交企业资料">
        <template #icon>
          <div class="step-icon">2</div>
        </template>
      </el-step>
      <el-step title="提交承诺书">
        <template #icon>
          <div class="step-icon">3</div>
        </template>
      </el-step>
      <el-step title="确认信息">
        <template #icon>
          <div class="step-icon">4</div>
        </template>
      </el-step>
      <el-step title="认证完成">
        <template #icon>
          <div class="step-icon">5</div>
        </template>
      </el-step>
    </el-steps>
    <div class="step-content">
      <step0 ref="step0Ref" v-if="stepActive === 0"></step0>
      <step1 ref="step1Ref" v-if="stepActive === 1"></step1>
      <step2 ref="step2Ref" v-if="stepActive === 2"></step2>
      <step3 ref="step3Ref" v-if="stepActive === 3"></step3>
      <step4 ref="step4Ref" v-if="stepActive === 4"></step4>

      <div class="footer-bar">
        <el-button @click="prev">上一步</el-button>
        <el-button type="primary" @click="next">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import step0 from './components/step-0.vue'
import step1 from './components/step-1.vue'
import step2 from './components/step-2.vue'
import step3 from './components/step-3.vue'
import step4 from './components/step-4.vue'

export default {
  name: 'Authentication',
  components: {
    step0,
    step1,
    step2,
    step3,
    step4
  },
  data () {
    return {
      stepActive: 0
    }
  },
  methods: {
    prev () {
      if (this.stepActive > 0) {
        this.stepActive -= 1
      }
    },
    next () {
      if (this.stepActive < 4) {
        this.stepActive += 1
      }
    }
  }
}


</script>

<style scoped lang="scss">
.authentication {
  height: 100%;
}

.step-content {
  padding: 20px;
  height: calc(100% - 58px);
  box-sizing: border-box;
  position: relative;
}

.el-steps {
  background-color: #FFFFFF;

  :deep(.el-step.is-simple) {
    .el-step__head {
      &.is-process {
        .step-icon {
          border-color: var(--el-text-color-primary);
          color: var(--el-text-color-primary);
        }
      }

      &.is-finish {
        .step-icon {
          background-color: var(--el-color-primary);
          border-color: var(--el-color-primary);
          color: #FFFFFF;
        }
      }
    }

    .el-step__title.is-finish {
      font-weight: 700;

      & + .el-step__arrow {
        &::before {
          background-color: var(--el-color-primary);
        }

        &::after {
          background-color: var(--el-color-primary);
        }
      }
    }

    .el-step__icon {
      width: 32px;
      height: 32px
    }
  }

  .step-icon {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    border: 2px solid #D6D7D8;
    text-align: center;
    line-height: 30px;
    //display: flex;
    //align-items: center;
    //justify-content: center;
    font-size: 16px;
    color: #949899;
    font-weight: 500;
  }
}

.footer-bar {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #FFFFFF;
  width: 100%;
  padding: 20px;
  text-align: right;
}

</style>
