<template>
  <el-timeline style="padding-left: 2px" class="syTimeLine">
    <el-timeline-item
      v-for="(activity, index) in list"
      :key="index"
      :="activity"
    >
      <div
        class="cursor-pointer timeLine-content overflow-hidden text-ellipsis"
        :class="{
          'timeLine-content-active': activeIndex === index,
        }"
        @click="$emit('update:activeIndex', index)"
      >
        {{ activity.content }}
      </div>
      <template #dot>
        <div v-if="activeIndex !== index" class="dot-normal dot-timeLine"></div>
        <div v-else class="dot-checked dot-timeLine">
          <Icon icon-name="icona-21"></Icon>
        </div>
      </template>
    </el-timeline-item>
  </el-timeline>
</template>

<script lang="ts" setup>
import { ElTimeline, ElTimelineItem } from "element-plus";
import Icon from "../Icon/index.vue";
defineProps<{
  list: { content: string }[];
  activeIndex: number;
}>();

defineEmits(["update:activeIndex"]);
</script>

<style lang="scss" scoped>
.syTimeLine {
  .timeLine-content {
    font-size: 16px;
    font-weight: 400;
    color: var(--sy-gray);
    line-height: 25px;
  }
  .timeLine-content-active {
    font-size: 18px;
    font-weight: 600;
    color: var(--sy-black);
  }
  .dot-timeLine {
    top: 9px;
    position: absolute;
    left: 5px;
    transform: translate(-50%, -50%);
    &.dot-normal {
      width: 7px;
      height: 7px;
      background: #ffffff;
      border: 2px solid var(--sy-blue);
      border-radius: 50%;
    }
    &.dot-checked {
      width: 14px;
      height: 14px;
      border-radius: 50%;
    }
  }
  :deep(.el-timeline-item__tail) {
    top: 6px;
    left: 4.4px;
    border-width: 0px;
    width: 1px;
    background-color: var(--sy-blue);
  }
}
</style>
