<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-18 10:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-18 14:20:50
 -->
<!--
<active-step :activeStep="activeStep" :stepData="stepData" ></active-step>

import activeStep from '@/components/active-config/active-step.vue';
-->
<template>
  <div class="active-step-content font-0">
    <div
      :class="['active-step-cell inline-block border-box', index + 1 == activeStep ? 'active-step' : '', item.hasSet ? 'active-hasset': '']"
      v-for="(item, index) in stepData"
      :key="index + item.stepName"
      :style="{ width: 100 / stepData.length + '%', 'max-width': 100 / stepData.length + '%' }"
    >
      <div class="active-step-cell_inner border-box">
        <div
          v-if="index < stepData.length - 1"
          class="active-step-cell_line"
        ></div>
        <div class="active-step-cell_title">
          <div class="el-step__icon is-text inline-block text-center">
            <i
              v-if="item.hasSet"
              class="el-icon-check font-14 color-1890ff flex flex-pack-center flex-align-center"
            ></i>
            <div
              v-else
              class="el-step__icon-inner font-14 flex flex-pack-center flex-align-center"
            >{{ index + 1 }}</div>
          </div>
          <div class="active-step-cell_txt p-lr-10 bg-fff inline-block font-16">{{ item.stepName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'active-step',
  props: {
    activeStep: {
      type: [Number, String],
      default() {
        return 1;
      }
    },
    stepData: {
      type: [Array, Object],
      default() {
        return []
      }
    }
  },
  data() {
    return {
      /* activeStep: 1,
      stepData: [
        {
          stepName: '基础信息',
          hasSet: false
        },
        {
          stepName: '前端配置',
          hasSet: false
        },
        {
          stepName: '后端配置',
          hasSet: false
        },
        {
          stepName: '定义返回',
          hasSet: false
        }
      ], */
    }
  },
  methods: {

  },
}
</script>
<style lang="less" scoped>
.active-step-content {
  .active-step-cell {
    padding: 0 10px;
    .bg-fff {
      background: #fff;
    }
    .active-step-cell_inner {
      position: relative;
      width: 100%;
      padding-right: 10px;
      .active-step-cell_line {
        position: absolute;
        height: 1px;
        top: 11px;
        left: 0;
        right: 0;
        background: #c0c4cc;
        z-index: 0;
      }
      .active-step-cell_title {
        position: relative;
        z-index: 1;
        .el-step__icon {
          border: 1px solid #c0c4cc;
          color: #c0c4cc;
          .el-step__icon-inner {
            width: 22px;
            height: 23px;
          }
        }
        .active-step-cell_txt {
          position: relative;
          z-index: 1;
          color: #909399;
        }
      }
    }
    &.active-step {
      .active-step-cell_inner {
        .active-step-cell_line {
          background: #1890ff;
        }
        .active-step-cell_title {
          .el-step__icon {
            color: #fff;
            border-color: #1890ff;
            background: #1890ff;
          }
          .active-step-cell_txt {
            color: #303133;
          }
        }
      }
    }
    &.active-hasset {
      .active-step-cell_inner {
        .active-step-cell_line {
          background: #1890ff;
        }
        .active-step-cell_title {
          .el-step__icon {
            color: #fff;
            border-color: #1890ff;
            background: #1890ff;
          }
          .el-icon-check {
            width: 98%;
            height: 98%;
            color: #1890ff;
            background: #fff;
            border-radius: 50%;
          }
          .active-step-cell_txt {
            color: #606266;
          }
        }
      }
    }
  }
}
</style>
