<template>
  <div class="carousel-container">
    <div
      class="btn btn-left"
      @click="prevItem"
      :style="{ cursor: currentIndex === 0 ? 'not-allowed' : 'pointer' }"
    >
      <el-icon color="#fff"><ArrowLeftBold /></el-icon>
    </div>
    <div class="carousel-wrap">
      <div
        class="carousel"
        :style="{
          transform: `translateX(${-currentIndex * itemWidth}px)`,
          transition: 'transform 0.5s ease',
        }"
      >
        <div
          v-for="(item, index) in visibleItems"
          :key="index"
          @click="handleActive(item, item.indexAct)"
          :class="[
            'carousel-items',
            { 'carousel-items-active': active === item.indexAct },
          ]"
        >
          <img
            :src="item[srcKey]"
            alt="Item"
            :class="{ active: active === item.indexAct }"
            :style="{ marginRight: (index + 1) % 7 === 0 ? '0' : '10px' }"
          />
          <div class="overlay">{{item[dateKey]}}</div>
          <el-icon color="#00F6FF" size="22" class="caret" v-show="active === item.indexAct"><CaretTop /></el-icon>
        </div>
      </div>
    </div>
    <div
      class="btn btn-right"
      @click="nextItem"
      :style="{
        cursor:
          currentIndex * props.visibleCount + props.visibleCount >=
          props.items.length
            ? 'not-allowed'
            : 'pointer',
      }"
    >
      <el-icon color="#fff"><ArrowRightBold /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  items: {
    type: Array,
    default: () => [],
  },
  dateKey:{
    type: String,
    default: "date",
  },
  srcKey:{
    type: String,
    default: "src",
  },
  visibleCount: {
    type: Number,
    default: 7,
  },
});

const currentIndex = ref(0);
const itemWidth = 0;

// 计算当前应该显示的块数组
const visibleItems = computed(() => {
  const start = currentIndex.value * props.visibleCount;
  const end = start + props.visibleCount;
  //添加数组序列号，用于显示高亮
  const arr = props.items.map((item,index)=>{
    return {
      ...item,
      indexAct:index
    }
  })
  // 防止超出数组长度
  return arr.slice(start, Math.min(end, props.items.length));
});

// 计算总的块数
const totalItems = computed(() => props.items.length);

// 上一项
const prevItem = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  }
};

// 下一项
const nextItem = () => {
  // 确保不会超出最后一个完整的可见块组
  if (
    currentIndex.value + 1 <
    Math.ceil(props.items.length / props.visibleCount)
  ) {
    currentIndex.value++;
  }
};

const emit = defineEmits(['handleImage'])
const active = ref(0);
const handleActive = (v, i) => {
  active.value = i;
  emit('handleImage',v)
};
</script>

<style lang="scss" scoped>
.carousel-container {
  width: 100%;
  // height: 104px; /* 根据需要调整 */
  display: flex;
  align-items: center;
  overflow: hidden;
  .btn {
    background: #1680a1;
    cursor: pointer;
    width: 23px;
    height: 68px;
    line-height: 68px;
    text-align: center;
    &.btn-left {
      border-radius: 5px 0px 0px 5px;
    }
    &.btn-right {
      border-radius: 0px 5px 5px 0px;
    }
  }
  .carousel-wrap {
    overflow: hidden;
    width: 100%;
    margin: 0 10px;
    padding-bottom: 15px;


    .carousel {
      display: flex;
      white-space: nowrap;
      user-select: none;
      width: 100%;

      .carousel-items {
        position: relative;
        img {
          display: inline-block;
          width: 121.5px; /* 宽度应与itemWidth一致 */
          height: 100px;
          margin-right: 10px; /* 可选，根据需要调整 */
          vertical-align: top;
          border-radius: 5px;
          cursor: pointer;
          border: 2px solid rgba(29, 135, 140, 0.99);
          &.active {
            border: 2px solid rgba(81, 233, 240, 1);
          }
        }
        .overlay {
          position: absolute;
          bottom: 2px;
          left: 2px;
          text-align: center;
          background: rgba(3, 40, 52, 0.5);
          width: 121.5px;
          border-radius: 0 0 5px 5px;
          color: #fff;
        }
        &.carousel-items-active {
          .overlay {
            color: #50e7ed;
          }
          .caret{
            position: absolute;
            bottom: -20px;
            left: 40%;
            z-index: 9;
          }
        }
      }
    }
  }
}
</style>
