<template>
  <div class="content">
    <div ref="newSwiper" class="swiper-container newSwiper">
      <div class="swiper-wrapper">
        <div v-for="item in data.banner" :key="item.id" class="swiper-slide">
          <a :href="item.jump_url" target="_blank" rel="noopener noreferrer">
            <img :src="item.img" alt="" />
          </a>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="newList">
      <div class="listNav">
        <div
          v-for="(item, index) in listNav"
          :key="item.text"
          :class="listNavId == item.id ? 'listNavActived' : ''"
          class="item"
          @click="checkNewsNav(item.id, index)"
        >
          {{ item.text }}
        </div>
      </div>
      <div class="listContent">
        <div v-if="!news[listNavId].length" class="none">
          暂无数据
        </div>
        <nuxt-link
          v-for="(item, index) in news[listNavId]"
          v-else
          :key="index + listNavId"
          class="listItem"
          :to="{ name: 'newsDetail', query: { id: item.id } }"
          target="_blank"
        >
          <div
            class="pic"
            :class="
              item.types == 1 ? 'notice' : item.types == 2 ? 'activity' : 'trends'
            "
          >
            {{ item.type_text }}
          </div>
          <div class="title">{{ item.title }}</div>
          <div class="date">{{ item.time.substring(0, 10) }}</div>
        </nuxt-link>
      </div>

      <nuxt-link
        class="moreNews"
        rel="noopener noreferrer"
        :to="{ name: 'news' }"
        target="_blank"
      >
        查看全部 >
      </nuxt-link>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";

export default {
  props: {
    news: {
      type: Object,
      default() {
        return {};
      },
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      listNav: [
        { text: "最新", id: "last" },
        { text: "公告", id: "notice" },
        { text: "活动", id: "activity" },
        { text: "动态", id: "trends" },
      ],
      listNavId: "last",
      newsChange: false,
    };
  },
  mounted() {
    this.newSwiper = new Swiper(".newSwiper", {
      // eslint-disable-line no-unused-vars
      notNextTick: true,
      setWrapperSize: true,
      autoHeight: true,
      slidesPerView: 1,
      resistanceRatio: 0,
      observer: true,
      observeParents: true,
      // loop : true,
      autoplay: true,
      speed: 600,
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        // type: "custom",
        clickable: true,
        // renderCustom(swiper, current, total) {
        //   let customPaginationHtml = "";
        //   for (let i = 0; i < total; i++) {
        //     // 判断哪个分页器此刻应该被激活
        //     if (i === current - 1) {
        //       customPaginationHtml +=
        //         '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
        //     } else {
        //       customPaginationHtml +=
        //         '<span class="swiper-pagination-customs"></span>';
        //     }
        //   }
        //   return customPaginationHtml;
        // },
      },
    });
  },
  methods: {
    checkNewsNav(id) {
      this.newsChange = true;
      clearTimeout(this.timeOut);
      this.listNavId = id;
      this.timeOut = setTimeout(() => {
        this.newsChange = false;
      }, 1000);
    },
  },
};
</script>
