<template>
  <div class="step-form-main">
    <el-steps space="1" v-bind="$attrs" :active="active" :simple="true">
      <el-step
        v-bind="childAttr"
        v-for="(item, key) in stepList"
        :title="item.title"
        :key="key"
        :icon="item.icon"
      ></el-step>
    </el-steps>
    <div class="step-form-content">
      <slot v-for="item in stepList" :name="item.name"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "CmsSteps",
  props: {
    active: {
      type: Number,
      default: 0,
    },
    stepList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    childAttr: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
};
</script>

<style scoped lang="less">
.step-form-main {
  display: flex;
  height: 100%;
  flex-direction: column;

  .el-steps--simple {
    height: 50px;
    width: 100%;
  }
  .step-form-content {
    height: calc(100% - 50px);
  }
  .cms-form {
    flex: 1;
    height: calc(100%);
  }
}
</style>
