<template>
  <el-timeline style="padding-left: 2px">
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :="activity"
    >
      {{ activity.content }}
      <template #dot>
        <div v-if="!activity.checked" 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 "@/components/Icon/index.vue";

const activities = [
  {
    content: "Approved",
  },
  {
    content: "Event start",
    checked: true,
  },
  {
    content: "Approved",
  },
  {
    content: "Success",
  },
];
</script>

<style lang="scss" scoped>
.dot-timeLine {
  top: 7px;
  position: absolute;
  left: 5px;
  transform: translate(-50%, -50%);
  &.dot-normal {
    width: 7px;
    height: 7px;
    background: #ffffff;
    border: 2px solid #3662ec;
    border-radius: 50%;
  }
  &.dot-checked {
    width: 14px;
    height: 14px;
    // background: #16b141;
    border-radius: 50%;
  }
}
:deep(.el-timeline-item__tail) {
  top: 6px;
}
</style>
