<template>
  <AppCard :title="$t('home.msg.title')" class="home-headmaster">
    <template #header-aside
      ><nuxt-link to="/about/message">{{ $t('viewMore') }}</nuxt-link></template
    >
    <div class="gallery-top">
      <swiper :options="swiperOptionTop" ref="swiperTop">
        <swiper-slide v-for="(item, index) in listData" :key="index">
          <app-link :data="item" :to="`/about/message/${item.id}`">
            <img :src="item.web_img_uri" loading="lazy" />
          </app-link>
        </swiper-slide>
      </swiper>
    </div>
    <div class="gallery-thumbs">
      <swiper :options="swiperOptionThumbs" ref="swiperThumbs">
        <swiper-slide v-for="(item, index) in listData" :key="index">
          <div class="thumbs">
            {{ item.title }}
          </div>
        </swiper-slide>
      </swiper>
      <div class="swiper-btn swiper-button-prev">
        <img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png" />
      </div>
      <div class="swiper-btn swiper-button-next">
        <img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png" />
      </div>
    </div>
  </AppCard>
</template>
<script>
import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default {
  components: { AppCard, AppLink },
  data() {
    const that = this
    return {
      listData: [],
      swiperOptionTop: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  async fetch() {
    const params = {
      // project_id: process.env.projectId,
      project_id: '6800242743894343680',
      type_tag: 'img_text_school'
    }
    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.$swiper
      const swiperThumbs = this.$refs.swiperThumbs.$swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  }
}
</script>
<style lang="scss" scoped>
.home-headmaster {
  padding-top: 80px;
  max-width: 1200px;
  margin: 0 auto;

  .gallery-top {
    height: 500px;
    margin-top: 15px;
    overflow: hidden;
    img {
      display: block;
      width: 100%;
      object-fit: cover;
    }
  }
}
.gallery-thumbs {
  padding: 0 25px;
  margin-top: 5px;
  position: relative;
  .swiper-slide {
    width: 266px;
    height: 44px;
    padding: 0 20px;
    margin: 7px 0;
    line-height: 22px;
    font-size: 16px;
    cursor: pointer;
    border-right: 1px solid #a81840;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .swiper-slide-active,
  .swiper-slide:hover {
    color: #a81840;
  }
  .swiper-btn {
    width: 20px;
    height: 35px;
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    user-select: none;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .swiper-button-next {
    left: unset;
    right: -5px;
  }
}
.is-h5 {
  .home-headmaster {
    margin: 0.2rem 0.15rem;
    padding: 0;
    .gallery-top {
      height: 1.36rem;
    }
  }
}
</style>
