<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <template v-if="!isMobile">
      <div class="alumni-content max-width">
        <card :title="$t('home.course.title')">
          <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="`/news/hot/${item.id}`">
                    <img :src="item.web_img_uri" />
                    <div class="text">{{ item.title }}</div>
                  </app-link>
                </div>
              </div>
            </div>
          </div>
        </card>
      </div>
    </template>
    <template v-else>
      <card :title="$t('home.course.title')">
        <van-swipe class="my-swipe" :loop="true" :autoplay="5000" :show-indicators="false">
          <template v-for="(item, index) in listData">
            <van-swipe-item :key="index">
              <div class="case">
                <app-link :data="item" :to="`/news/hot/${item.id}`">
                  <img :src="item.web_img_uri" class="case-pic" />
                  <p class="case-title">{{ item.title }}</p>
                </app-link>
              </div>
            </van-swipe-item>
          </template>
        </van-swipe>
      </card>
    </template>
  </div>
</template>
<script>
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
  name: 'openClass',
  components: {
    Card,
    AppLink
  },
  data() {
    const _this = this
    return {
      isScale: false,
      listData: [],
      swiperOption: {
        observer: true,
        observeParents: true,
        speed: 400,
        autoplay: true,
        delay: 3000,
        loop: true,
        slidesPerView: 3,
        centeredSlides: true,
        spaceBetween: 20,
        on: {
          init() {
            _this.swiper.slideNext()
          }
        }
      }
    }
  },
  async fetch() {
    const params = { project_id: process.env.newProjectId, type_tag: 'article_publish_class' }
    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    },
    isMobile() {
      return this.$store.state.isMobile
    }
  },
  created() {},
  mounted() {},
  methods: {
    swiperStop() {
      this.swiper.autoplay.stop()
    },
    swiperStart() {
      this.swiper.autoplay.start()
    }
  }
}
</script>
<style lang="scss" scoped>
.is-pc {
  .max-width {
    width: 1200px;
    margin: 0 auto;
  }
  .alumni-content {
    padding-top: 89px;
    .title-content {
      display: flex;
      .left-title {
        display: flex;
        .line {
          width: 6px;
          height: 34px;
          background: #aa1941;
        }
        .text {
          font-size: 34px;
          font-weight: bold;
          line-height: 34px;
          color: #424242;
          margin-left: 9px;
        }
      }
    }
    .small-tit {
      font-size: 24px;
      font-weight: bold;
      line-height: 34px;
      color: #424242;
      margin-top: 12px;
    }
    .swiper-content {
      padding-top: 37px;
      // width: 100%;
      .swiper-slide {
        position: relative;
        width: 360px;
        height: 230px;
        margin-top: 10px;
        .text {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 40px;
          line-height: 40px;
          background: rgba(0, 0, 0, 0.5);
          padding: 0 20px;
          box-sizing: border-box;
          font-size: 20px;
          color: #fefefe;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .swiper-slide-active {
        width: 438px;
        height: 246px;
        margin-top: 0;
      }
    }
  }
}
.is-h5 {
  .case {
    position: relative;
  }
  .case-pic {
    display: block;
    width: 100%;
    // height: 1.17rem;
    // object-fit: cover;
  }
  .case-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.24rem;
    padding: 0 0.1rem;
    font-size: 0.1rem;
    line-height: 0.24rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
</style>
