<template>
  <div class="dz-step-line-container">
    <div class="dz-step-item" v-for="(item, index) in data" :key="index">
      <div class="date">{{formatDate(item.date)}}</div>
      <div class="line">
        <div class="spot"></div>
        <div class="v-line"></div>
      </div>
      <div class="right" @click="handleClick(index)">
        <div class="label">{{item.title}}</div>
        <img :src="item.imgUrl" alt="" class="img" v-if="item.imgUrl"/>
        <slot :stepItem="item"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="DzStepLine">
import dayjs from 'dayjs'
import {computed} from 'vue'

interface dzStepItem { 
  title: string,
  date: string | number | Date,
  imgUrl?: string,
}

interface Props {
  data: dzStepItem[],
}


const props = withDefaults(defineProps<Props>(),
{
  data: () => [],
})


const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click')
}
const formatDate = (date) => {
  let str = ''
  if ( typeof date === 'string') {
    str = date
  } else if ( typeof date === 'number' ) {
    str = dayjs(new Date(date)).format('YYYY-MM-DD')
  } else if (date instanceof Date){
    str = dayjs(date).format('YYYY-MM-DD')
  }
  return str
}
</script>

<style lang='less' scoped>

  .dz-step-line-container {
    overflow-y: scroll;
    .dz-step-item {
      padding-left: 40px;
      display: flex;
      align-items: stretch;
      color: #fff;
      .date,
      .right {
        margin-top: -4px;
      }

      .date {
        width:100px;
        text-align: right;
      }

      .line {
        width: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 10px;
        margin-right: 10px;

        .spot {
          width: 10px;
          height: 10px;
          border-radius: 6px;
          background: #002046;
          border: 1px solid #0acdff;
        }

        .v-line {
          flex: 1;
          width: 1px;
          background: #0acdff;
        }
      }

      .right {
        flex: 1;
        margin-right: 30px;
        .img {
          margin-top: 10px;
          height: 160px;
          width: 100%;
          background: #03162f;
        }
      }
    }

    .dz-step-item:last-child {
      
      .line {
        .v-line {
          display: none;
          
        }
      }
    }
  }

  .dz-step-line-container::-webkit-scrollbar {
    // background: #03162f;
    // width: 8px;
    // border-radius: 5px;
    display: none;
  }

  // .dz-step-line-container::-webkit-scrollbar-thumb {
  //   background: #4f92d9;
  //   border-radius: 5px;
  // }

</style>
