<!--步骤-->
<template>
  <div class="step-content-compontent">
    <el-row class="step-content">
      <el-col :span="12">
        <el-steps :active="active" simple class>
          <span class="step-num" v-bind:class="{ 'on-step': active==0 }">1</span>
          <el-step title="基础信息"></el-step>
          <span class="step-num" v-bind:class="{ 'on-step': active==1 }">2</span>
          <el-step title="选择项目组件">3</el-step>
        </el-steps>
      </el-col>
      <el-col :span="7" :offset="5">
        <el-button v-if="!fished" size="small" type="primary" @click="nextStep">下一步</el-button>
        <el-button v-if="fished" size="small" type="primary" @click="complete">完成</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Number,
      default: 0,
    },
    fished: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
    }
  },
  created() {},
  methods: {
    nextStep() {
      this.$emit('nextStep')
    },
    complete() {
      this.$emit('complete')
    }
  }
}
</script>

<style lang="scss">
  .step-content-compontent {
    background: #fff;
    z-index: 1001;
    background: #fff;
    position: fixed;
    right: 30px;
    left: 285px;
    .step-content {
      overflow: hidden;
      height: 60px;
      // margin-top: 66px;
      padding: 15px 0 50px 0;
      border-bottom: 1px solid #efefef;
      .is-text {
        display: none;
      }
      .el-steps--simple {
        background: #fff;
      }
      .button-green {
        color: #ffffff;
        background: #449284;
        border-color: #bfdad5;
        border-radius: 2px;
      }
      .button-white {
        color: #606266;
        background: #ffffff;
        border-color: #ecedf1;
        border-radius: 2px;
      }
      .step-num {
        display: block;
        // margin-top: 1.5px;
        font-size: 12px;
        border: 1px solid #999 !important;
        border-radius: 50%;
        width: 25px;
        height: 18px;
        line-height: 16px;
        text-align: center;
        color: #999;
      }
      .el-step__title.is-wait {
        color: #999;
      }
      .el-step__title.is-process {
        color: #449284;
      }
      .is-finish {
        color: #999 !important;
      }
      .on-step {
        color: #449284;
        border: 1px solid #449284 !important;
      }
    }
  }
</style>
