<template>
  <div class="alumni-content">
    <div :class="isScale ? 'title-content max-width scale' : 'title-content max-width'">
      <div class="left-title">
        <div class="line"></div>
        <div class="text">{{ $t('home.alumni.title') }}</div>
      </div>
      <div class="right-text" @click="$router.push({ path: '/alumnus/story' })">
        {{ $t('viewMore') }}
      </div>
    </div>
    <div :class="isScale ? 'small-tit max-width scale' : 'small-tit max-width'">{{ $t('home.alumni.des') }}</div>
    <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 :item="{
              news: {
                data: item,
                path: '/alumnus/story'
              }
            }">
              <img :src="item.web_img_uri">
              <div class="text">{{ item.title }}</div>
            </app-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import appLink from '@/components/Link'
export default {
  components: {
    appLink
  },
  data () {
    const _this = this
    return {
      isScale: false,
      listData: [],
      swiperOption: {
        observer: true,
        observeParents: true,
        speed: 400,
        autoplay: true,
        delay: 3000,
        loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 20,
        on: {
          init() {
            _this.swiper.slideNext()
          }
        }
      }
    }
  },
  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
    })
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    swiperStop() {
      this.swiper.autoplay.stop()
    },
    swiperStart() {
      this.swiper.autoplay.start()
    },
    goPage(item) {
      if (item.source === '') {
        this.$router.push({
          path: '/about/news-detail',
          query: {
            id: item.id
          }
        })
      } else {
        window.open(item.source)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.max-width{
  width: 1200px;
  margin: 0 auto;
}
.alumni-content{
  min-width: 1200px;
  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;
      }
    }
    .right-text{
      margin-left: auto;
      margin-top: 18px;
      font-size: 16px;
      font-weight: 300;
      line-height: 34px;
      color: #9B9B9B;
      cursor: pointer;
    }
  }
  .small-tit{
    font-size: 24px;
    font-weight: bold;
    line-height: 34px;
    color: #424242;
    margin-top: 12px;
  }
  .swiper-content{
    padding-top: 37px;
    // overflow: auto;
    // width: 100%;
    .swiper-slide{
      position: relative;
      width: 388px;
      height: 244px;
      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%;
      }
    }
    .swiper-slide-active {
      width: 423px;
      height: 266px;
      margin-top: 0;
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
.scale{
  transform: scale(0.85);
}
</style>
