<template>
  <div>
    <div class="home-head">
      <swiper ref="mySwiper" :options="swiperOptions" class="item-swiper">
        <swiper-slide v-for="(item, index) in swiperList" :key="index">
          <!-- <router-link :to="`/news/detail?id=${item.id}&type=home`"> -->
          <a :href="item.url" target="_blank">
            <img :src="item.image_info.full_path" alt="" />
          </a>
          <!-- </router-link> -->
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
import action from '@action'
export default {
  components: {
    swiper,
    swiperSlide
  },
  directives: {
    swiper: directive
  },
  data() {
    const _this = this
    return {
      articleClassify: '',
      swiperList: [],
      swiperOptions: {
        on: {
          slideChangeTransitionStart: function() {
            _this.swiperIndex = this.activeIndex
          }
        },
        observer:true,//修改swiper自己或子元素时，自动初始化swiper 
        observeParents:true,//修改swiper的父元素时，自动初始化swiper 
        // loop:true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        }
      }
    }
  },
  created() {
    action.articleAction.getAllClassify({ tag: 'carousel-category' }).then(response => {
      const findId = response.data[0].children.find(item => {
        return item.display_name === '轮播1'
      })
      action.articleAction.getBanner({ category_id: findId.id }).then(res => {
        this.swiperList = res.data
      })
    })
  },
  mounted() {
    // if (!Object.keys(this.$store.state.classify).length) {
    //   setTimeout(() => {
    //     this.articleClassify = this.$store.state.classify
    //     this.newsList()
    //   }, 2000)
    // } else {
    //   const findId = this.articleClassify[0].children.find(item => {
    //     return item.display_name === (this.newsTabIndex ? '工作动态' : '新闻动态')
    //   })
    //   console.log(this.articleClassify[0].children, '123321')
    //   // action.articleAction.getArticle({ category_id: findId ? findId.id : 23 }).then(res => {
    //   //   this.list = res.data.list
    //   //   this.swiperList = []
    //   //   res.data.list.map((item, index) => {
    //   //     if (index <= 4) {
    //   //       this.swiperList.push({
    //   //         url: item.cover_pc_url,
    //   //         content: item.title,
    //   //         id: item.id
    //   //       })
    //   //     }
    //   //   })
    //   //   // loading.close()
    //   // })
    // }
    
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  }
}
</script>
<style lang="scss" scoped>
.home-head{
  img{
    width: 100%;
    display: block;
  }
}
</style>
