<template>
  <div class="px-34px">
    
    <div class="border border-[#A6A8AF] rounded-6px p-24px mt-33px">
      <Title title="内容分类"></Title>
      <div class="grid grid-cols-2 gap-x-21px gap-y-27px py-37px">
        <CardItem
          v-for="(item, i) in contentTypes"
          :key="i"
          :data="item"
        ></CardItem>
      </div>
      <Title title="洞察趋势"></Title>
      <div class="h-300px">
        <swiper
          :effect="'coverflow'"
          :grabCursor="true"
          :centeredSlides="true"
          :slidesPerView="'auto'"
          :navigation="true"
          :coverflowEffect="{
            rotate: -20,
            stretch: 0,
            depth: 60,
            slideShadows: true,
          }"
          :pagination="true"
          :modules="modules"
          class="h-full cu-swiper"
        >
          <swiper-slide
            v-for="(item, i) in trendsList"
            :key="i"
            :data="item"
            class="text-black relative bg-white !w-427px"
          >
            <TrendItem :data="item">{{ item }}</TrendItem>
          </swiper-slide>
        </swiper>
      </div>
    </div>

    <div
      class="border border-[#A6A8AF] rounded-6px py-24px mt-62px max-h-1/2 overflow-hidden flex flex-col"
    >
      <div class="px-24px">
        <Title title="每周大事件" sub="new"></Title>
      </div>
      <van-divider class="my-20px" />
      <div class=" px-24px">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="weekNewOnLoad"
        >
          <NewsItem
            v-for="(item, i) in weekNewsList"
            class="my-48px"
            :key="i"
            :data="item"
          ></NewsItem>
        </van-list>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import http from '@/io/request'
import Title from './components/title.vue'
import NewsItem from './components/news-item.vue'
import CardItem from './components/card-item.vue'
import TrendItem from './components/trends-item.vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Mousewheel, Navigation, EffectCoverflow } from 'swiper/modules'
import 'swiper/scss'
import 'swiper/scss/mousewheel'
import 'swiper/css/effect-coverflow'
import 'swiper/css/navigation'

const modules = [Mousewheel, Navigation, EffectCoverflow]

const pagetSize = 20
const weekNewsPage = ref(1)
const weekNewsList = ref([])

const contentTypes = ref([])

const trendsList = ref([])

const loading = ref(false)
const finished = ref(false)

const weekNewOnLoad = () => {
  http
    .get('/api/topic', {
      params: {
        per_page: pagetSize,
        page: weekNewsPage.value,
      },
    })
    .then((res) => {
      loading.value = false
      const { total, data } = res
      if (weekNewsPage.value === 1) weekNewsList.value = []
      weekNewsList.value = weekNewsList.value.concat(data)
      if (total <= weekNewsList.value.length) finished.value = true
      weekNewsPage.value++
    })
}

function getContentTypes() {
  http
    .get('/api/keywords', {
      params: {
        type_key: 'government',
      },
    })
    .then((res) => {
      contentTypes.value = res
    })
}

function getTrendsList() {
  http
    .get('/api/banner', {
      params: {
        key: 'pc_trend_recommend',
      },
    })
    .then((res) => {
      trendsList.value = res
    })
}

onMounted(() => {
  getTrendsList()
  getContentTypes()
})
</script>
<style lang="scss">
.swiper-button-prev,.swiper-button-next{
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border: 1px solid white;
  border-radius: 50%;
  z-index: 99;
  &::after{
    font-size: 30px;
    color: white;
  }
}

.cu-swiper{
  .swiper-slide-prev,.swiper-slide-next{
    //禁止点击
    pointer-events: none;
  }
}
</style>