<template>
  <div class="timeline-container">
    <div class="timeline" ref="timelineRef">
      <div class="timeline-dot start"></div>
      <div class="timeline-line" :style="{ width: timelineWidth }"></div>
      <div class="timeline-dot end"></div>
    </div>
    <div class="timeline-info">
      <div class="start-time">
        <p class="timeline-info-title">事件启动时间</p>
        <p>{{ props.startTime }}</p>
      </div>
      <div class="duration">
        <p>{{ props.duration }}</p>
      </div>
      <div class="end-time">
        <p class="timeline-info-title">处置完成时间</p>
        <p>{{ props.completeTime }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';

  const props = defineProps<{
    startTime?: string;
    completeTime?: string;
    duration?: string;
  }>();

  const timelineRef = ref<HTMLDivElement | null>(null);
  const timelineWidth = ref('0%');

  // 在组件挂载后，设置动画宽度
  onMounted(() => {
    if (timelineRef.value) {
      setTimeout(() => {
        timelineWidth.value = '100%';
      }, 100); // 短暂延迟以确保动画生效
    }
  });
</script>

<style scoped lang="scss">
  .timeline-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px;
  }

  .timeline {
    width: 100%;
    max-width: 680px;
    height: 20px;
    position: relative;
  }

  .timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #1777ff;
    position: absolute;
    top: 4px;
  }

  .timeline-dot.start {
    left: 0;
  }

  .timeline-dot.end {
    right: 0;
  }

  .timeline-line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-top: 2px dashed #1777ff;
    transition: width 2s ease-in-out; /* 添加过渡效果 */
  }

  .timeline-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    margin-top: 10px;
    position: relative;
  }

  .start-time,
  .end-time {
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    color: #999999;
  }

  .timeline-info-title {
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    margin-bottom: 6px;
  }

  .duration {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 400;
    font-size: 14px;
    color: #1777ff;
  }
</style>
