<template>
  <div class="step_content">
    <ul class="step_content_list">
      <li class="step_content_list_item" v-for="(item, index) in stepList" :key="index">
        <div class="item_top">
          <div :class="activeStep === index ? 'item_top_circle_active' : 'item_top_circle_inactive'"></div>
          <div class="item_top_num" :class="activeStep === index ? 'item_top_num_active' : 'item_top_num_inactive'">
            {{ '0' + (index + 1) }}
          </div>
        </div>
        <div class="item_bottom" :class="activeStep === index ? 'item_bottom_active' : 'item_bottom_inactive'">
          {{ item.stepName }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    activeStep: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      stepList: [{ stepName: '确定用户群' }, { stepName: '制定方案' }, { stepName: '明确主题' }, { stepName: '预览' }]
    }
  }
}
</script>

<style lang="scss" scoped>
.step_content {
  // margin-top: 40px;
  .step_content_list {
    width: 170px;
    .step_content_list_item {
      display: flex;
      flex-direction: column;
      .item_top {
        display: flex;

        .item_top_circle_active {
          width: 22px;
          height: 22px;
          background: #fff;
          border-radius: 50%;
          border: 5px solid #49bba2;
          margin-left: -10px;
        }
        .item_top_circle_inactive {
          width: 7px;
          height: 7px;
          background: #49bba2;
          border-radius: 50%;
          margin: 5px 2px 0px -3px;
        }
        .item_top_num {
          margin-left: 18px;
          font-size: 28px;
          font-weight: bold;
          line-height: 11px;
          margin-top: 5px;
        }
        .item_top_num_active {
          color: #49bba2;
        }
        .item_top_num_inactive {
          color: #cacaca;
        }
      }
      .item_bottom {
        height: 106px;
        border-left: 1px dashed #c5c5c5;
        padding-left: 28px;
        padding-top: 10px;
        font-size: 16px;
        font-weight: 400;
      }
      .item_bottom_active {
        color: #333333;
      }
      .item_bottom_inactive {
        color: #999999;
      }
    }
    .step_content_list_item:last-child {
      .item_bottom {
        border-left: none;
      }
    }
  }
}
</style>
