<template>
  <div class="m-steps">
    <div
      class="item uni-flex"
      v-for="(item, index) of list"
      :key="`step-item-${index}`"
      :class="index == active ? ['active'] : ''"
    >
      <div class="time">{{ item.time | formatTime }}</div>
      <div class="step">
        <m-icon
          v-if="item.icon"
          :icon="item.icon"
          :size="20"
          className="icon"
        />
        <div v-else class="dot" />
        <div class="line" />
      </div>
      <div class="content">
        <div class="title" v-if="item.title">{{ item.title }}</div>
        <div class="label">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils";
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    active: {
      type: Number,
      default: 0,
    },
  },
  filters: {
    formatTime(val) {
      if (!val || val.length == 0) {
        return "";
      }
      return formatTime(val, "MM-dd hh:mm");
    },
  },
};
</script>

<style lang="less">
.m-steps {
  > .item {
    .time {
      width: 41px;
      color: #999999;
      font-size: 10px;
      line-height: 14px;
      margin-right: 5px;
      text-align: center;
    }
    .step {
      width: 21px;
      margin-right: 9px;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .step .icon {
      position: absolute;
      top: 3px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      background-color: #ffffff;
    }
    .step .dot {
      position: absolute;
      top: 9px;
      left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 6px;
      background: #aeaeae;
      border-radius: 50%;
      z-index: 2;
    }
    .step .line {
      width: 1px;
      height: 100%;
      background: #e5e5e5;
      margin: 0 auto;
      transform: translateY(9px);
    }
    .content {
      flex: 1;
      color: #999999;
      padding: 4px 0 25px 0;
    }
    .content .title {
      font-size: 14px;
      line-height: 16px;
      margin-bottom: 8px;
    }
    .content .label {
      font-size: 12px;
      line-height: 16px;
    }
  }
  > .item.active {
    .content {
      color: #140603;
    }
    .content .title {
      font-weight: bold;
    }
  }
  > .item:nth-last-of-type(1) {
    .step .line {
      display: none;
    }
    .content {
      padding-bottom: 0;
    }
  }
}
</style>