<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-show="stepActive === 0"></step0>
      <step1 ref="step1Ref" v-show="stepActive === 1"></step1>
      <step2 ref="step2Ref" v-show="stepActive === 2"></step2>
      <step3 v-show="stepActive === 3" :form-data="formData"></step3>
      <step4 v-show="stepActive === 4"></step4>

      <div v-if="stepActive < 4" class="footer-bar">
        <el-button @click="prev">上一步</el-button>

        <el-button v-if="stepActive < 3" type="primary" @click="next">下一步</el-button>
        <el-button v-if="stepActive === 3" type="primary" @click="submit">提交</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'
import { enterpriseAudit } from '@/api/console.js'

export default {
  name: 'Authentication',
  components: {
    step0,
    step1,
    step2,
    step3,
    step4
  },
  data () {
    return {
      stepActive: 0,
      formData: {}
    }
  },
  methods: {
    prev () {
      if (this.stepActive > 0) {
        this.stepActive -= 1
      }
    },
    next () {
      this.$refs[`step${this.stepActive}Ref`].$refs.formRef.validate().then(res => {
        this.stepActive += 1
        if (this.stepActive === 3) {
          this.formData = {...this.$refs.step0Ref.ruleForm, ...this.$refs.step1Ref.ruleForm, ...this.$refs.step2Ref.ruleForm}
        }
      }).catch(err => {
      })
    },
    submit () {
      enterpriseAudit(this.formData).then(res => {
        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>
