<template>
  <div class="home-alumni">
    <AppCard title="校友故事" class="max-width">
      <template #header-aside><nuxt-link to="/alumnus/story">查看更多+</nuxt-link></template>
      <p class="tips">You are What you together，结识6000+ 同样优秀的人！</p>
    </AppCard>
    <div class="swiper-content">
      <div v-swiper:mySwiper="swiperOptions" ref="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
            <app-link :data="item" :to="`/alumnus/story/${item.id}`">
              <img :src="item.web_img_uri" loading="lazy" />
              <div class="text">{{ item.title }}</div>
            </app-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default {
  components: { AppCard, AppLink },
  data() {
    return {
      listData: [],
      swiperOptions: {
        autoplay: true,
        delay: 5000,
        loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 10
      }
    }
  },
  async fetch() {
    const params = {
      project_id: process.env.projectId,
      type_tag: 'article_alumni'
    }
    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
      return res.data.data
    })
  }
}
</script>
<style lang="scss" scoped>
.max-width {
  max-width: 1200px;
  margin: 0 auto;
}
.home-alumni {
  padding-top: 60px;
  .tips {
    font-size: 24px;
    font-weight: bold;
    line-height: 34px;
    color: #424242;
    margin-bottom: 12px;
  }
  .swiper-content {
    ::v-deep .swiper-wrapper {
      align-items: center;
    }

    .swiper-slide {
      position: relative;
      width: 388px;
      height: 244px;
      overflow: hidden;
      .text {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        line-height: 40px;
        background: rgba(0, 0, 0, 0.5);
        padding: 0 20px;
        font-size: 20px;
        color: #fefefe;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
      }
    }
    .swiper-slide-active {
      width: 424px;
      height: 266px;
    }
  }
}
.is-h5 {
  .home-alumni {
    margin: 0.2rem 0.15rem;
    padding: 0;
    .tips {
      font-size: 0.1rem;
      font-weight: 500;
      margin-bottom: 0.1rem;
    }
    .swiper-slide {
      position: relative;
      width: 2.1rem;
      height: 1.22rem;
    }
    .swiper-slide-active {
      width: 2.1rem;
      height: 1.34rem;
    }
  }
}
</style>
