<template>
  <div>
    <div class="home-head">
      <h1 v-if="$route.path !== '/news'">
        教育部第四批1+X培训评价机构<br />
        金融产品数字化营销职业技能等级证书
      </h1>
      <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/x-new/banner.png" />
      <!-- <swiper ref="mySwiper" :options="swiperOptions" class="item-swiper">
        <swiper-slide v-for="(item, index) in swiperList" :key="index">
          <a :href="item.url" target="_blank">
            <img :src="item.image_info.full_path" alt="" />
          </a>
        </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 {
  position: relative;
  img {
    width: 100%;
    display: block;
  }
  h1 {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    font-weight: bold;
    color: #ffffff;
    line-height: 86px;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
  }
}
</style>
