<template>
  <div class="stepBox">
    <div class="stepBoxText" @click="hiddenStepStatus"><i class="el-icon-close"></i></div>
    <el-steps :active="activeNumber" align-center>
      <el-step title="填写模板基本信息" description="类型和网站底部信息" />
      <el-step title="选择模板风格" description="网站整体风格和样式" />
      <el-step title="构建模板模块" description="展示哪些模块到模板上" />
      <el-step title="应用网站模板" description="应用该模板到您的站点" />
    </el-steps>
  </div>
</template>

<script>
export default {
  props: {
    activeNumber: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      someData: '',
    };
  },
  methods: {
    //隐藏步骤
    hiddenStepStatus() {
      console.log(123)
      console.log(this.$store.state.template.stepStatus)
      this.$store.commit('template/hiddenStepStatus');
    },
  },
};
</script>

<style scoped lang="less">
  .stepBox {
    margin: 30px 30px 20px 30px;
    position: relative;
    .stepBoxText {
      position: absolute;
      right: -30px;
      top: -70px;
      color: #1C1D22;
      background: #FFF2E2;
      border-radius: 8px;
      width: 28px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      font-size: 18px;
      cursor: pointer;
    }
  }
</style>
