<template>
  <div>
    <div ref="mySwiper" class="swiper" id="swiper">
      <!-- Slides -->
      <div class="swiper-wrapper">
        <div style="padding: 20px 6px" class="swiper-slide" v-for="item in slideData" :key="item.id">
          <div class="ach-item bg-f" @click="onSelectItem(item)">
            <div class="card">
              <div class="card-title">
                <img :src="item.icon" style="width: 20px;height: 20px;margin-right: 8px"></img>
                <span >{{ item.title }}</span>
              </div>
              <div class="card-description">{{ item.description }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- Navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Swiper from 'swiper';
import { Navigation, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import icon_hot from '@/assets/imgs/jyh/ai/icon_hot.png';
import icon_yj from '@/assets/imgs/jyh/ai/icon_yj.png';
import icon_jh from '@/assets/imgs/jyh/ai/icon_jh.png';

const mySwiper = ref(null);
const slideData = [
  { id: 1, title: '热门开源软件', description: '列出热门开源软件',icon:icon_hot },
  { id: 2, title: '预警公告', description: '列出最近预警公告',icon:icon_yj },
  { id: 3, title: '你可以帮我做什么', description: '了解当前AI助手可以帮忙干什么',icon:icon_jh },
  { id: 4, title: '热门开源软件', description: '列出热门开源软件',icon:icon_hot },
  { id: 5, title: '预警公告', description: '列出最近预警公告',icon:icon_yj },
  { id: 6, title: '你可以帮我做什么', description: '了解当前AI助手可以帮忙干什么',icon:icon_jh }
];

const onSelectItem = (item) => {
  console.log('Selected item:', item);
};

onMounted(() => {
  new Swiper(mySwiper.value, {
    // Swiper选项
    observer: true,
    observeParents: true,
    modules: [Navigation, Autoplay],
    slidesPerView: 3,
    spaceBetween: 20,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    }
  });
});
</script>

<style scoped>
.swiper {
  width: 100%;
  margin: 0 auto;
}

.card {
  border-radius: 24px;
  background: #FFFFFF;
  padding: 24px;
}

.card-title {
  display: flex;
  align-items: center;
  color: #191919;
  font-family: HarmonyOS Sans SC;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: left;

}

.card-title i {
  margin-right: 8px;
}

.card-description {
  margin-left: 28px;
  margin-top: 4px;
  color: #595959;
  font-family: HarmonyOS Sans SC;
  font-weight: regular;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: left;

}

.swiper-button-prev {
  left: -18px;
}
.swiper-button-next {
  right: -18px;
}

.swiper-button-prev, .swiper-button-next {
  top: 55%;
  width: 40px;
  height: 40px;
  display: inline-flex;
  padding: 12px;
  align-items: center;
  gap: 10px;

  border-radius: 100px;
  border: 2px solid #FFF;
  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(5px);
}

.swiper-button-prev:after, .swiper-button-next:after {
  color: #4E5969;
  font-family: swiper-icons;
  font-size: 16px;
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
</style>
