<template>
  <!-- 步骤条组件 -->
  <div class="main">
    <div
      class="item"
      v-for="(item, index) in props.data"
      :key="index + item[props.time]"
    >
      <div
        class="item_l"
        :class="{ deftaultColor: true, selectColor: index == 0 }"
      >
        {{ item[props.time].split(" ")[0] }}<br />{{
          item[props.time].split(" ")[1]
        }}
        <van-icon class="icon" name="checked" color="#1f6cec"></van-icon>
      </div>
      <div class="item_r">
        <slot :scope="item"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";
const props = defineProps({
  time: { type: String, default: "time" },
  data: { type: Array, default: [] },
});
</script>
<style lang="scss" scoped>
@import "../assets/styles/mixin.scss";
.main {
  padding: 5vw;
  box-sizing: border-box;
  .item {
    display: flex;
    @include font_size($font_medium_s);
    .item_l {
      text-align: right;
      border-right: 1px dotted #808080;
      padding-right: 12px;
      margin-right: 16px;
      position: relative;
      .icon {
        position: absolute;
        top: 5px;
        right: -6px;
      }
    }
    .item_r {
      flex: 1;
    }
  }
}
.deftaultColor {
  color: #808080;
}
.selectColor {
  color: #1f6cec;
}
</style>