<template>
  <div>
    <div class="home-module-news content-max-width">
      <div class="slide-box" v-if="swiperList.length">
        <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`">
              <img :src="item.url" alt="" />
            </router-link>
          </swiper-slide>
        </swiper>
        <div class="assist" v-if="swiperList.length">
          <div class="text">{{ swiperList[swiperIndex].content }}</div>
          <div class="pagination">
            <span v-for="(item, index) in swiperList" :key="index" :class="index == swiperIndex && 'active'"></span>
          </div>
        </div>
      </div>
      <div class="news-box">
        <div class="tabs-btn">
          <div :class="!tabsIndex ? 'btn active' : 'btn'" @click="tabs(0)">新闻动态</div>
          <div :class="tabsIndex ? 'btn active' : 'btn'" @click="tabs(1)">活动公告</div>
        </div>
        <div class="news-content">
          <div class="title" v-if="list[0]"><router-link :to="`/news/detail?id=${list[0].id}&type=home`">{{ list[0].title }}</router-link></div>
          <ul>
            <template v-for="(item, index) in list">
              <template v-if="index >= 1 && index <= 4">
                <router-link :to="`/news/detail?id=${item.id}&type=home`" :key="index">
                  <li>
                    <span>
                      {{ item.title }}
                    </span>
                    <template v-if="list.length >= 5">
                      <div class="more" v-if="index == 4">
                        <router-link to="/news">更多</router-link>
                      </div>
                    </template>
                    <template>
                      <div class="more" v-if="list.length == index">
                        <router-link to="/news">更多</router-link>
                      </div>
                    </template>
                  </li>
                </router-link>
              </template>
            </template>
          </ul>
        </div>
      </div>
    </div>
    <div class="home-module-poster content-max-width">
      <img src="https://zws-imgs-pub.ezijing.com/static/public/e4abb49951a743fb6213ad4888a8bf28.png" alt="">
    </div>
    <div class="home-module-entrance content-max-width">
      <ul>
        <li>
          <div class="entrance">
            <div class="btn" @click="goPage('/train')">
              <span>活动报名</span>
              <div class="icon">→</div>
            </div>
            <div class="btn" @click="goPage('https://vslc.ncb.edu.cn/ncb_admin/#/login?systemType=3', 1)">
              <span>试点申报</span>
              <div class="icon">→</div>
            </div>
          </div>
        </li>
        <li>
          <div class="entrance one" @click="goPage('https://x-learning.ezijing.com/', 1)">
            <div class="btn">
              <span>学习平台入口</span>
            </div>
            <div class="btn">
              <div class="icon">→</div>
            </div>
          </div>
        </li>
        <li>
          <div class="entrance">
            <div class="btn" @click="goPage('/query')">
              <span>成绩查询</span>
              <div class="icon">→</div>
            </div>
            <div class="btn" @click="goPage('/query')">
              <span>证书查询</span>
              <div class="icon">→</div>
            </div>
          </div>
        </li>
        <li>
          <div class="entrance">
            <div class="btn" @click="goPage('https://x-exam.ezijing.com/login/6747074947782279168', 1)">
              <span>考试软件</span>
              <div class="icon">→</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import action from '@action'
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
  components: {
    swiper,
    swiperSlide
  },
  directives: {
    swiper: directive
  },
  data() {
    const _this = this
    return {//this.$store.state.classify
      articleClassify: this.$store.state.classify,
      tabsIndex: 0,
      swiperList: [
        {
          url: 'https://zws-imgs-pub.ezijing.com/static/public/5436086a25645f903303b4b9013a6a2d.png',
          content: '关于1+X金融数字化营销证书考核站点申报'
        },
        {
          url: 'https://zws-imgs-pub.ezijing.com/static/public/5436086a25645f903303b4b9013a6a2d.png',
          content: '关于1+X金融数字化营销证书考核站点申报2'
        }
      ],
      swiperOptions: {
        on: {
          slideChangeTransitionStart: function() {
            _this.swiperIndex = this.activeIndex
          }
        },
        observer:true,//修改swiper自己或子元素时，自动初始化swiper 
        observeParents:true,//修改swiper的父元素时，自动初始化swiper 
        // loop:true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        }
      },
      swiperIndex: 0,
      videoShow: false,
      list: []
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted() {
    this.newsList()
  },
  methods: {
    tabs(n) {
      this.tabsIndex = n
    },
    goPage(path, n) {
      if (n) {
        window.open(path)
      } else {
        this.$router.push({
          path: path
        })
      }
    },
    newsList() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'//
      })
      if (!Object.keys(this.$store.state.classify).length) {
        setTimeout(() => {
          this.articleClassify = this.$store.state.classify
          this.newsList()
        }, 2000)
      } else {
        const findId = this.articleClassify.children.find(item => {
          return item.display_name === '新闻动态'
        })
        action.articleAction.getArticle({ category_id: findId.id }).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
              })
              console.log(this.swiperList)
            }
          })
          loading.close()
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content-max-width{
  width: 1200px;
  margin: 0 auto;
}

.home-module-news{
  padding: 24px 0;
  display: flex;
  .slide-box{
    cursor: pointer;
    position: relative;
    width: 630px;
    height: 354px;
    .item-swiper{
      width: 100%;
      height: 100%;
      img{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .assist{
      display: flex;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 44px;
      background: rgba(0, 0, 0, .3);
      z-index: 99;
      .text{
        font-size: 14px;
        color: #FFFFFF;
        line-height: 44px;
        margin-left: 24px;
      }
    }
    .pagination{
      display: flex;
      margin-left: auto;
      align-items: center;
      padding-right: 40px;
      span{
        width: 8px;
        height: 8px;
        background: #000000;
        opacity: 0.2;
        border-radius: 50%;
        margin-left: 8px;
        &.active{
          opacity: 1;
          background: #fff;
        }
      }
    }
  }
  .news-box{
    width: 546px;
    margin-left: auto;
    .tabs-btn{
      display: flex;
      .btn{
        cursor: pointer;
        width: 273px;
        height: 74px;
        background: #F9F9F9;
        color: #666666;
        line-height: 74px;
        text-align: center;
        font-size: 24px;
        &.active{
          color: #fff;
          background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
        }
      }
    }
    .news-content{
      .title{
        cursor: pointer;
        width:510px;    
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        color: #C01540;
        line-height: 33px;
        margin-top: 24px;
      }
      ul{
        margin-top: 10px;
        li{
          cursor: pointer;
          display: flex;
          width: 100%;
          height: 49px;
          border-bottom: 1px solid #eee;
          align-items: center;
          span{
            font-size: 18px;
            color: #666666;
            width: 510px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap
          }
          .more{
            font-size: 18px;
            color: #5788D4;
            margin-left: auto;
          }
        }
      }
    }
  }
}
.home-module-poster{
  img{
    width: 100%;
    display: block;
  }
}
.home-module-entrance{
  padding: 24px 0;
  ul{
    display: flex;
    justify-content: space-between;
    li{
      width: 290px;
      height: 174px;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      &:nth-child(1){
        background-image: url(https://zws-imgs-pub.ezijing.com/static/public/aa5bf0eb195dbc6bb2c620516f98cd34.png);
      }
      &:nth-child(2){
        background-image: url(https://zws-imgs-pub.ezijing.com/static/public/7d12c495871f8a91ed0c153b68c7fb5f.png);
      }
      &:nth-child(3){
        background-image: url(https://zws-imgs-pub.ezijing.com/static/public/26e5eee05d46a73d332c517eeb3c3b72.png);
      }
      &:nth-child(4){
        background-image: url(https://zws-imgs-pub.ezijing.com/static/public/1f7235d8d4120b76ef051267f8feac0f.png);
      }
      .entrance{
        padding-left: 16px;
        &.one{
          .btn{
            &:nth-child(1){
              margin-bottom: 12px;
            }
            .icon{
              margin-left: 0;
            }
          }
        }
        .btn{
          cursor: pointer;
          display: flex;
          &:nth-child(1){
            margin-bottom: 24px;
          }
          span{
            font-size: 24px;
            font-weight: bold;
            color: #FFFFFF;
          }
          .icon{
            font-size: 20px;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 33px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
