<template>
  <div class="msg-content">
    <div class="title-content">
      <div class="left-title">
        <div class="line"></div>
        <div class="text">{{ $t('home.msg.title') }}</div>
      </div>
      <div class="right-text" @click="$router.push({ path: '/about/message', query: { type: 'img_text_school' } })">
        {{ $t('viewMore') }}
      </div>
    </div>
    <div class="swiper-content">
      <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: '/about/message' } }">
              <img :src="item.web_img_uri">
            </app-link>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
      </div>
    </div>
    <div class="title-swiper">
      <div v-swiper:secondSwiper="swiperOption1" ref="mySwiper1" @click="handleClick">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
            {{item.title}}
          </div>
        </div>
      </div>
      <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>
  </div>
</template>
<script>
import appLink from '@/components/Link'
export default {
  components: {
    appLink
  },
  data() {
    return {
      listData: [],
      swiperOption: {
        speed: 400,
        autoplay: false,
        delay: 3000,
        loop: false,
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true
        // },
        // direction: 'vertical',
        height: 500
        // autoHeight: true
      },
      swiperOption1: {
        observer: true,
        observeParents: true,
        speed: 400,
        autoplay: false,
        delay: 3000,
        loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 20,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      }
    }
  },
  async fetch() {
    const params = {
      project_id: process.env.projectId,
      type_tag: 'img_text_school'
    }
    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
      // console.log(res.data.data)
      return res.data.data
    })
  },
  computed: {
    // swiper() {
    //   return this.$refs.mySwiper.swiper;
    // }
  },
  mounted() {
  },
  methods: {
    handleClick() {
      const index = this.$refs.mySwiper1.swiper.clickedSlide.dataset.swiperSlideIndex
      this.$refs.mySwiper.swiper.slideTo(index)
    }
    // swiperStop() {
    //   this.swiper.autoplay.stop()
    // },
    // swiperStart() {
    //   this.swiper.autoplay.start()
    // }
  }
}
</script>
<style lang="scss" scoped>
.msg-content{
  padding-top: 90px;
  width: 1200px;
  margin: 0 auto;
  .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;
    }
  }
  .swiper-content{
    height: 500px;
    margin-top: 15px;
    overflow: hidden;
    img{
      width: 100%;
      height: 520px;
      display: block;
    }
    ::v-deep{
      .swiper-pagination-bullets{
        right: 34px !important;
      }
      .swiper-pagination-bullet{
        width: 6px;
        height: 6px;
        border-radius: 100%;
        border: 1px solid #fff;
        box-sizing: border-box;
        background: none;
        opacity: 1;
        margin: 10px 0;
      }
      .swiper-pagination-bullet-active{
        width: 6px;
        height: 31px;
        border-radius: 25px;
        background: #fff;
      }
    }
  }
  .title-swiper{
    padding: 0 25px;
    margin-top:5px;
    position:relative;
    // overflow: auto;
    // width: 100%;
    .swiper-slide{
      position: relative;
      width: 250px;
      height: 58px;
      margin-right:10px;
      padding:7px 10px;
      line-height:22px;
      font-size:16px;
      cursor: pointer;
    }
    .swiper-btn{
      width:20px;
      height:35px;
      position:absolute;
      left:-5px;
      top:50%;
      transform:translateY(-50%);
      z-index:2;
      img{
        width:100%;
        height:100%;
        display:block;
      }
    }
    .swiper-button-next{
      left:unset;
      right: -5px;
    }
  }
}
</style> 