<template>
  <div class="Carousel-container" :style="styleContainer">
    <!-- 
      initialSlide：默认选中第几张
      modules：引入模块
      navigation：左右的按钮
      pagination：分页器导航
      autoplay：自动播放
      loop：循环
      swiperStyle：自定义样式
     -->
    <div style="padding-top: 20px;">

      <swiper id="swiper" ref="swi perRef" :initialSlide="0" :modules="modules" :navigation="{ clickable: true }"
        :pagination="{ clickable: true }" :autoplay="{ delay: 10000 }" :loop="true" :style="swiperStyle"
        class="carousel-box">{{ banner_list }}
        <swiper-slide v-for="item in banner_list">
          <nuxt-link :to="item.banner_link" >
          <div class="carousel-items animate__animated animate__fadeIn animate__slow">

            <!-- <img alt="" src="img/home/banner2-2.jpg" > -->
            <img alt="" :src="item.banner_img">
          </div>
        </nuxt-link>
        </swiper-slide>
      </swiper>

    </div>

  </div>
</template>

<script setup>
// 引入模块
import { Pagination, Navigation, Autoplay } from 'swiper'
// noinspection ES6CheckImport
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'

const { t, locale } = useI18n()

// 获取轮播图列表
const banner_list = ref([
  {
    // banner_img:`img/home/banner2-2.jpg`,
  },
])
const params = reactive({
  page: 1,
  limit: 10
})
// await get("/api/banners/getBannerList", params).then(res => {
//   let data = JSON.parse(res.value).data
//   console.log(data);
//   banner_list.value = data
// })
const getBannerListFun = async () => {
  useFetch('/api/banner/getBanner', { params: { banner_location: 1, locale: locale.value } }).then(res => {
    banner_list.value = JSON.parse(res.data.value).data
    console.log(banner_list.value, '@@@@banner_list');
  })
    .catch((err) => {
      banner_list.value = [{
        banner_img: `img/home/banner2-2.jpg`,
        banner_img: `img/home/banner2-2.jpg`,
      }]
      // console.log(banner_list.value,'@');
    })
}

setTimeout(() => {
  (async () => {
    await getBannerListFun()
  })()
})
// 获取海报



/**整体轮播图样式*/
let styleContainer = reactive({
  height: '33vw',
})
const modules = ref([Pagination, Navigation, Autoplay])
const swiperStyle = conversionStyleVal(reactive({
  /**轮播图样式*/
  color: '',          //设置字体颜色
  height: '33vw',                        //设置高度
  width: '100%',                       //设置高度
  margin: '0',             //设置margin 按照上 右 下 左 或 上下 左右 设置
  padding: '0',                 //设置padding 按照上 右 下 左 或 上下 左右 设置
  background: '',           //设置背景颜色
  /**右边按钮样式*/
  buttonNext: {
    color: '#a8232a',          //设置字体颜色
    height: '',                        //设置高度
    width: '',                       //设置高度
    margin: '0',             //设置margin 按照上 右 下 左 或 上下 左右 设置
    padding: '0',           //设置padding 按照上 右 下 左 或 上下 左右 设置
    background: ''           //设置背景颜色
  },
  /**左边按钮样式*/
  buttonPrev: {
    color: '#a8232a',          //设置字体颜色
    height: '',                        //设置高度
    width: '',                       //设置高度
    margin: '0',             //设置margin 按照上 右 下 左 或 上下 左右 设置
    padding: '0',           //设置padding 按照上 右 下 左 或 上下 左右 设置
    background: ''           //设置背景颜色
  },
  /**小圆点样式*/
  pagination: {
    color: '#fff',          //设置字体颜色
    height: '8px',                        //设置高度
    width: '8px',                       //设置高度
    margin: '0 10px ',             //设置margin 按照上 右 下 左 或 上下 左右 设置
    padding: '0',           //设置padding 按照上 右 下 左 或 上下 左右 设置
    background: 'rgb(255, 255, 255)'           //设置背景颜色
  },
  /**选中的小圆点样式*/
  paginationActive: {
    color: '#a72027',          //设置字体颜色
    height: '8px',                        //设置高度
    width: '8px',                       //设置高度
    margin: '0 10px',             //设置margin 按照上 右 下 左 或 上下 左右 设置
    padding: '0',                 //设置padding 按照上 右 下 左 或 上下 左右 设置
    background: '#a72027'           //设置背景颜色
  }
}), 'swiper')






</script>
<style scoped src="~/assets/css/Carousel/index.scss"></style>
<style scoped src="~/assets/css/Carousel/media.scss"></style>