<script setup>
import { ref, computed } from 'vue'; // 导入计算属性函数
import DynamicItem from "@/components/about/DynamicItem.vue";
import {ArrowLeftBold, ArrowRightBold} from "@element-plus/icons-vue";

// 接收父组件传递的动态数据
const props = defineProps({
  dynamicData:{
    type:Array,
    default:()=>[]
  }
});

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

  for (let i = 0; i < data.length; i += 2) {
    const group = data.slice(i, i + 2);
    // 将分组后的数组添加到结果数组中
    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="second-content">
    <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="573px" arrow="never" :interval="5000" ref="carouselRef">
        <!-- 遍历分组后的数据，每组数据渲染一个轮播项 -->
        <el-carousel-item v-for="(group, index) in groupedData" :key="index">
          <!-- 使用网格布局容器包裹每个轮播项内的多个DynamicItem -->
          <div class="item-container">
            <!-- 遍历当前组内的每个项目，渲染DynamicItem组件 -->
            <DynamicItem
              v-for="item in group"
              :key="item.title"
              :imgUrl="item.imgUrl"
              :title="item.title"
              :content="item.content"
              :time="item.time"
            />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style scoped lang="less">
.second-content{
  background-image:url("@/assets/img/aboutBg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  box-sizing: border-box;
  padding: 50px 0;
  height: 810px;
  .center{
    width: 1000px;
    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;
    background-color: #ffffffff;
  }
}
</style>
