<template>
  <div class="timeline">
    <div class="timeline-head" v-if="head">
      <i
        class="iconfont icon-xt-add_default"
        v-if="headIcon"
        @mousemove="handleMouseMove"
        @click="handleClick"
      />
      <slot name="head" />
    </div>
    <div class="timeline-body">
      <div
        :class="['timeline-item', item.dot == '已转归' ? 'timeline-item--muted' : '']"
        v-for="item in data"
        :key="item.id"
      >
        <!-- 线 -->
        <div class="timeline-item-tail" />
        <!-- 圆点 -->
        <div class="timeline-item-dot"> {{ item.dot }} </div>
        <div class="timeline-item-cnt">
          <DescCard
            :id="item.cnt.id"
            :icon="item.cnt.icon"
            :type="item.cnt.type"
            :title="item.cnt.title"
            :data="item.cnt.data"
            @icon="handleIcon"
          >
            <template #headRight>
              <slot name="card" :data="item" />
            </template>
          </DescCard>
        </div>
        <div class="timeline-item-date"> {{ item.date }} </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import DescCard from '/@/components/XTCard/src/DescCard.vue';

  interface Props {
    head?: boolean;
    headIcon?: boolean;
    data: Array<{
      id?: string;
      dot?: string;
      date: string;
      icon?: string;
      cnt: any;
    }>;
  }
  withDefaults(defineProps<Props>(), {
    head: true,
    headIcon: true,
    data: () => [],
  });

  const emit = defineEmits(['icon', 'add', 'hover']);

  function handleIcon(data) {
    console.log('🚀 ~ file: TimeLine.vue:44 ~ handleIcon ~ data:', data);
    emit('icon', data);
  }
  function handleMouseMove() {
    console.log('mousemove');
    emit('hover');
  }

  function handleClick() {
    console.log('mousemove');
    emit('add');
  }
</script>

<style lang="less" scoped>
  .timeline {
    background-color: #fff;

    &-head {
      display: flex;
      font-size: 12px;
      line-height: 40px;
      font-weight: 600;
      text-align: center;
      margin: 0 0 20px 96px;

      & .iconfont {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: #fff;
        background: #0075ff;
        cursor: pointer;
      }
    }

    &-item {
      position: relative;
      margin: 0;
      padding-bottom: 20px;
      font-size: 14px;
      list-style: none;

      &--muted {
        filter: opacity(0.8) grayscale(1);
        color: #ccc;
      }

      &-tail {
        position: absolute;
        top: 10px;
        left: 115px;
        height: calc(100% - 10px);
        border-left: 2px solid #f0f0f0;
      }

      &-dot {
        position: absolute;
        width: 40px;
        height: 40px;
        font-size: 12px;
        line-height: 40px;
        font-weight: 600;
        color: #fff;
        background: #21c999;
        border-radius: 50%;
        text-align: center;
        left: 96px;
      }

      &-cnt {
        position: relative;
        left: 120px;
        text-align: left;
        top: -8px;
        margin: 0 0 0 26px;
        word-break: break-word;
        width: calc(100% - 162px);
      }

      &-date {
        width: 86px;
        margin: 0;
        text-align: right;
        position: absolute;
        top: 10px;
      }
    }
  }
</style>
