<script setup>

import {ArrowLeftBold, ArrowRightBold} from "@element-plus/icons-vue";
import {computed, ref} from "vue";
import HonorItem from "@/components/about/HonorItem.vue";

const props=defineProps({
  honorData: {
    type: Array,
    default: () => []
  }
})

const groupedData = computed(() => {
  const groups = [];
  const data = props.honorData;

  for (let i = 0; i < data.length; i += 6) {
    const group = data.slice(i, i + 6);
    // 将分组后的数组添加到结果数组中
    groups.push(group);
  }

  // 返回分组后的二维数组
  return groups;
});

const carouselRef = ref(null);
// 上一张
const prev = () => {
  if (carouselRef.value) {
    carouselRef.value.prev()
  }
}

// 下一张
const next = () => {
  if (carouselRef.value) {
    carouselRef.value.next()
  }
}
</script>

<template>
  <div class="about-honor">
<div class="center">
  <span class="demonstration"></span>
  <el-button class="carousel-btn prev-btn" @click="prev"><el-icon><ArrowLeftBold /></el-icon></el-button>
  <el-button class="carousel-btn next-btn" @click="next"><el-icon><ArrowRightBold /></el-icon></el-button>
  <el-carousel height="1000px" arrow="never" :interval="5000" ref="carouselRef">
    <el-carousel-item v-for="(group, index) in groupedData" :key="index">
      <div class="item-container">
        <HonorItem
            v-for="(item,index) in group"
            :key=index
            :time="item.time"
            :image="item.image"
            :label="item.label" />
      </div>
    </el-carousel-item>
  </el-carousel>
</div>
  </div>
</template>

<style lang="less" scoped>
.about-honor {
  background-image: url("@/assets/img/about-honor-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  padding: 50px 0;
  box-sizing:border-box;
  height: 1080px;
  .center{
    width: 1160px;
    margin: 0 auto;
    position: relative; /* 设置为相对定位，作为按钮绝对定位的参考 */
  }

  // 轮播按钮样式
  .carousel-btn {
    --el-font-size-base:60px;
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 精确垂直居中 */
    z-index: 10; /* 确保按钮在轮播内容之上 */
    background-color: rgba(0, 0, 0, 0); /* 半透明背景 */
    color: #CFCFCF; /* 文字颜色 */
    border: none; /* 移除边框 */
    padding: 30px; /* 调整内边距 */
    cursor: pointer; /* 鼠标指针变为手型 */
    transition: background-color 0.3s; /* 背景色过渡效果 */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    &:hover {
      background-color: rgba(0, 0, 0, 0.1); /*  hover时背景色加深 */
    }
  }

  // 上一张按钮定位到左侧
  .prev-btn {
    left: -130px; /* 向左偏移 */
  }

  // 下一张按钮定位到右侧
  .next-btn {
    right: -130px; /* 向右偏移 */
  }
  .item-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

  }

}
</style>
