<template>
  <div class="time-axis-container">
    <i class="el-icon-arrow-right"></i>
    <ul class="time-axis-labels">
      <li
        v-for="(item, index) in timeList"
        :key="index"
        :class="{ active: index === currentTimeIndex && selected }"
        @click="handleTimeSelect(index)"
      >
        <i class="circle-icon"></i>
        <span>{{ item.time }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeList: [],
      currentTimeIndex: 12, // 当前选中的时间索引
    };
  },
  props: {
    isScene: {
      type: Boolean,
      default: false,
    },
    selected: {
      type: Boolean,
      default: false,
    },
    timeData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  mounted() {
    if (this.timeData && this.timeData.length) {
      this.timeList = this.timeData.map((item) => {
        return {
          time: item,
        };
      });
      // this.timeList.unshift(...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList,...this.timeList)
    } else {
      this.generateTimeList();
    }
    if (this.isScene) {
      this.handleTimeSelect(0);
    } else {
      this.handleTimeSelect(this.timeList.length - 1);
    }
  },
  methods: {
    // 生成时间列表
    generateTimeList() {
      const interval = 5 * 60 * 1000; // 时间间隔为5分钟
      const currentTime = new Date();
      const startTime = new Date(currentTime.getTime() - 60 * 60 * 1000); // 当前时间往前推一个小时
      
      for (
        let i = startTime.getTime();
        i <= currentTime.getTime() - interval;
        i += interval
      ) {
        const time = new Date(i);
        const timeStamp = time.getTime();
        const hour = time
          .getHours()
          .toString()
          .padStart(2, "0");
        const minute = time
          .getMinutes()
          .toString()
          .padStart(2, "0");
        this.timeList.push({
          time: `${hour}:${minute}`,
          timeStamp: timeStamp,
        });
      }
    },

    // 处理时间选择
    handleTimeSelect(index) {
      if (!this.selected) {
        return;
      }
      this.currentTimeIndex = index;
      const timeStamp = this.timeList[index].timeStamp;
      const time = this.timeList[index].time;
      // const time = new Date(
      //   new Date().getTime() -
      //     (this.timeList.length - index - 1) * 5 * 60 * 1000
      // ); //计算当前时间
      if (this.timeData.length) {
        this.$emit("time-selected", this.timeList[index].time);
      } else {
        this.$emit("time-selected", time);
      }
    },
  },
};
</script>

<style scoped lang="less">
.time-axis-container {
  position: relative;
  height: 50px;
  border-top: 1px dashed rgba(118, 203, 255, 1);
  i {
    position: absolute;
    right: -8px;
    top: -7px;
    color: rgba(118, 203, 255, 1);
  }
}

.time-axis-labels {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
}

.time-axis-labels li {
  position: relative;
  flex: 1;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  span{
    display: none;
  }
  .circle-icon {
    position: absolute;
    left: calc(50% - 5px);
    top: -3px;
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c8c8c8;
    border: 3px solid transparent;
  }
}
.time-axis-labels li:first-child {
  span{
    display: unset;
  }
}
.time-axis-labels li:last-child {
  span{
    display: unset;
  }
}
.time-axis-labels li:hover{
  span{
    display: unset;
  }
}

.time-axis-labels li.active {
  color: #1890ff;
  span{
    display: unset;
  }
  .circle-icon {
    position: absolute;
    left: calc(50% - 5px);
    top: -6px;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #1890ff;
  }
  /* background: rgba(122, 164, 255, 0.1); */
}
</style>
