<template>
  <div class="Carousel-container" :style="styleContainer">
    <!-- 
      initialSlide：默认选中第几张
      modules：引入模块
      navigation：左右的按钮
      pagination：分页器导航
      autoplay：自动播放
      loop：循环
      swiperStyle：自定义样式
     -->
     
     <swiper id="swiper" ref="swiperRef" 
      :initialSlide="0"
      :modules="modules" 
      :navigation="{ clickable: true }"
      :pagination="{ clickable: true }" 
      :autoplay="{delay: 10000}" 
      :loop="true"
      :style="swiperStyle"
      class="carousel-box" 
    >
      <swiper-slide v-for="item in banner_list">
        <div class="carousel-items animate__animated animate__fadeIn animate__slow">
          <img alt="" :src="item.banner_img">
        </div>
      </swiper-slide>
    </swiper>
  </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 banner_list = ref([
  {
    // banner_img:`/img/loading.gif`,
  },
])
const params = reactive({
  page: 1,
  limit: 10
})
// const getBannerListFun = async () => {
//   await get("/Banner.Banner/getBannerList", params).then(res => {
//     let data = JSON.parse(res.value).data
//     banner_list.value = data
//   }).catch((err) => {
//   })
// }
//
// setTimeout(() => {
//   (async () => {
//     await getBannerListFun()
//   })()
// })
// 获取海报
useFetch('/api/banner/getBanner',{ params: { banner_location: 1 } }).then(res => {
  banner_list.value = JSON.parse(res.data.value).data
})


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






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