<template>
  <AppCard :title="$t('home.case.title')" class="home-case">
    <template #header-aside>
      <nuxt-link to="/services/college/case">{{ $t('viewMore') }}</nuxt-link>
    </template>
    <div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
      <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
            <app-link :data="item" :to="`/services/college/case/${item.id}`">
              <img :src="item.web_img_uri" />
              <div class="pop-txt-box">{{ item.title }}</div>
            </app-link>
          </div>
        </div>
      </div>
      <div class="prev-button"></div>
      <div class="next-button"></div>
    </div>
  </AppCard>
</template>
<script>
import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default {
  components: { AppCard, AppLink },
  data() {
    return {
      listData: [],
      swiperOption: {
        speed: 400,
        // autoplay: true,
        delay: 3000,
        observer: true,
        loop: true,
        observerParent: true,
        autoHeight: true,
        navigation: {
          nextEl: '.next-button',
          prevEl: '.prev-button'
        }
      }
    }
  },
  async fetch() {
    const params = {
      project_id: import.meta.env.VITE_PROJECT_ID,
      type_tag: 'service_case'
    }
    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
      return res.data.data
    })
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  methods: {
    swiperStop() {
      this.swiper.autoplay.stop()
    },
    swiperStart() {
      this.swiper.autoplay.start()
    }
  }
}
</script>
<style lang="scss" scoped>
.home-case {
  padding-top: 80px;
  max-width: 1200px;
  margin: 0 auto;

  .swiper-content {
    position: relative;
    .swiper-slide {
      position: relative;
      img {
        width: 100%;
        height: 500px;
        display: block;
      }
      .pop-txt-box {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        height: 76px;
        padding-left: 33px;
        line-height: 76px;
        font-size: 24px;
        color: #ffffff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .prev-button {
      position: absolute;
      top: 50%;
      left: 30px;
      width: 20px;
      height: 35px;
      background: url(https://zws-imgs-pub.ezijing.com/static/public/881f563105c3a04eb30e57094639eb33.png);
      background-size: 100% 100%;
      z-index: 999;
      cursor: pointer;
      transform: translateY(-50%);
    }
    .next-button {
      position: absolute;
      top: 50%;
      right: 30px;
      width: 20px;
      height: 35px;
      background: url(https://zws-imgs-pub.ezijing.com/static/public/87a93f0d579074213dc9014c9887ed38.png);
      background-size: 100% 100%;
      z-index: 999;
      cursor: pointer;
      transform: translateY(-50%);
    }
  }
}
</style>
