<template>
  <div class="home-box">
    <haedBanner></haedBanner>
    <div class="home-office-hall content-max-width">
      <div class="title">办事大厅</div>
      <div class="office-mian">
        <ul class="tab-btn-box">          
          <li
            v-for="(item, index) in offsetBtn"
            :class="offsetTabIndex == index && 'active'"
            :key="index"
            @click="offsetTab(index)"
            >{{ item }}</li>
        </ul>
        <ul class="item-box">
          <template v-if="offsetTabIndex == 0">
            <template v-for="(item, index) in examineeNav">
              <template v-if="item.pathType === 3">
                <li :key="index" @click="register">
                  <img :src="item.icon" alt="" class="img">
                  <img :src="item.iconActive" alt="" class="img-active">
                  <div class="text">
                    <span class="span1">{{ item.text }}</span>
                    <span class="span2">{{ item.textActive }}</span>
                  </div>
                </li>
              </template>
              <template v-else>
                <li :key="index" @click="goPage(item.path, item.pathType)">
                  <img :src="item.icon" alt="" class="img">
                  <img :src="item.iconActive" alt="" class="img-active">
                  <div class="text">
                    <span class="span1">{{ item.text }}</span>
                    <span class="span2">{{ item.textActive }}</span>
                  </div>
                </li>
              </template>
            </template>
          </template>
          <template v-if="offsetTabIndex == 1">
            <template v-for="(item, index) in teacherNav">
              <template v-if="item.pathType === 3">
                <li :key="index" @click="register">
                  <img :src="item.icon" alt="" class="img">
                  <img :src="item.iconActive" alt="" class="img-active">
                  <div class="text">
                    <span class="span1">{{ item.text }}</span>
                    <span class="span2">{{ item.textActive }}</span>
                  </div>
                </li>
              </template>
              <template v-else>
                <li :key="index" @click="goPage(item.path, item.pathType)">
                  <img :src="item.icon" alt="" class="img">
                  <img :src="item.iconActive" alt="" class="img-active">
                  <div class="text">
                    <span class="span1">{{ item.text }}</span>
                    <span class="span2">{{ item.textActive }}</span>
                  </div>
                </li>
              </template>
            </template>
          </template>
          <template v-if="offsetTabIndex == 2">
            <template v-for="(item, index) in schoolNav">
              <template v-if="item.pathType === 3">
                <li :key="index" @click="register">
                  <img :src="item.icon" alt="" class="img">
                  <img :src="item.iconActive" alt="" class="img-active">
                  <div class="text">
                    <span class="span1">{{ item.text }}</span>
                    <span class="span2">{{ item.textActive }}</span>
                  </div>
                </li>
              </template>
              <template v-else>
                <li :key="index" @click="goPage(item.path, item.pathType)">
                  <img :src="item.icon" alt="" class="img">
                  <img :src="item.iconActive" alt="" class="img-active">
                  <div class="text">
                    <span class="span1">{{ item.text }}</span>
                    <span class="span2">{{ item.textActive }}</span>
                  </div>
                </li>
              </template>
            </template>
          </template>
        </ul>
      </div>
    </div>
    <div class="notice-box content-max-width">
      <div class="tab-btn">        
        <div class="title">通知公告</div>
        <div :class="newsTabIndex == 0 ? 'btn active' : 'btn'" @click="newsTab(0)">通知公告</div>
        <div :class="newsTabIndex == 1 ? 'btn active' : 'btn'" @click="newsTab(1)">工作动态</div>
      </div>
      <div class="notice-mian">
        <ul class="assist-list">
          <template v-for="(item, index) in list">
            <template v-if="index >= 0 && index <= 3">
              <router-link :to="`/news/detail?id=${item.id}&type=home&tabs=${newsTabIndex}`" :key="index">
                <li>
                  <div class="text">{{ item.title }}</div>
                </li>
              </router-link>
            </template>
            <!-- <template v-if="list > 4">
              <router-link :to="`/news/detail?id=${item.id}&type=home&tabs=${newsTabIndex}`" :key="index">
                <li>
                  <div class="text">{{ item.title }}</div>
                </li>
              </router-link>
            </template> -->
          </template>
          <li class="border-none">
            <div class="text cen" @click="goNewsPage">更多通知</div>
          </li>
        </ul>
        <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>
    </div>
    <div class="advert-box">
      <poster v-if="false"/>
      <!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/3dceecce8df0a6dcb06d48c75ada807b.png" alt=""> -->
    </div>
    <div class="service-box content-max-width">
      <div class="title">
        教·学服务
      </div>
      <ul>
        <template v-for="(item, index) in serviceList">
          <li :key="index" @click="goPage(item.path, item.pathType)">
            <img :src="item.img" alt="" class="bg">
            <div class="mask">
              <img :src="item.icon" alt="" class="icon">
              <div class="content-box">
                <span class="tit">{{ item.title }}</span>
                <div class="desc">{{ item.desc }}</div>
                <div class="more">查看更多 ></div>
              </div>
            </div>
          </li>  
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import action from '@action'
import haedBanner from '@/components/headBanner'
import poster from '@/components/poster'
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
  components: {
    swiper,
    swiperSlide,
    haedBanner,
    poster
  },
  directives: {
    swiper: directive
  },
  data() {
    const _this = this
    return {
      articleClassify: this.$store.state.classify,
      tabsIndex: 0,
      newsTabIndex: 0,
      serviceList: [
        {
          img: 'https://zws-imgs-pub.ezijing.com/static/public/6b24bc351bcc28b48e2d86bc92f81eab.jpg',
          title: '教材中心',
          desc: '本系列教材紧跟金融各行业数字化转型和职业教育的人才培养发展的需求，随行业的数字化转型、数字化营销工具和专业升级等情况及时动态更新。......',
          path: '/service?id=0',
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/6f65b37439085217a8ff5f67038821a1.png'
        },
        {
          img: 'https://zws-imgs-pub.ezijing.com/static/public/90cf23d58250bc4959d3e5be66b7c5d1.jpg',
          title: '教学资源（老师）',
          desc: '',
          path: 'https://login.ezijing.com/xlearn/register',
          pathType: 1,
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/88a2da98b62ff7426cd0b6a383091f15.png'
        },
        {
          img: 'https://zws-imgs-pub.ezijing.com/static/public/2855f686addf67862a67fc8e4171a5d3.jpg',
          title: '课程学习（学生）',
          desc: '',
          path: 'https://login.ezijing.com/xlearn/register',
          pathType: 1,
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/c1c08807bb48275835778286b6482d04.png'
        },
        {
          img: 'https://zws-imgs-pub.ezijing.com/static/public/c178ccc3e41728ef24037b69e64a892a.jpg',
          title: '实操学习',
          desc: '',
          path: 'http://xtraining.ezijing.com/',
          pathType: 1,
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/6d6772401687fe44c41bc5832b34ec9e.png'
        }
      ],
      examineeNav: [
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/8617726397bcc6fa81020934c57d92bd.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/ef0878be9e9fa6deab5b9dcfac9af12b.png',
          text: '注册账号',
          path: '/register',
          pathType: 3,
          textActive: '注册后方可报名'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/5c7db419e6af3214fa53b1d4920cf7b5.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/76256d877bd6787af42d2f6010108a8b.png',
          text: '考生报名',
          path: '/hall?role=0',
          textActive: '可选择学校统一报名或在对应的考点报名'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/b5a6b0bf40f24545fd10cbf315e5839c.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/556e2554d2545d3d3a726dbcbaf20494.png',
          text: '学习课程',
          path: '/hall?role=0&point=1',
          textActive: '进入学习系统学习'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/9c4d618281f12680a367d212545cf041.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/53dd24cbf9c4c1a6ed078ab3b6049e95.png',
          text: '参加考试',
          path: '/hall?role=0&point=2',
          textActive: '考点和考场安排，准考证打印领取时间'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/6bf9fedcbff1d13de413667b33787db3.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/3639914b6dbe79d4b2e745159fd49230.png',
          text: '成绩查询',
          path: '/hall?role=0&point=3',
          textActive: '进入成绩查询系统'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/1e6d8f785a106b17eb698d1d563ff479.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/e3088887b1e2fc9711c7ad692e2e53cd.png',
          text: '证书查询',
          path: '/hall?role=0&point=4',
          textActive: '进入证书查询系统'
        }
      ],
      teacherNav: [
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/2da6e70cac93900bdb1867458c9b7449.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/c92aa5f2800a9a5bbedce54bfa0d499b.png',
          text: '注册账号',
          path: '/register',
          pathType: 3,
          textActive: '注册后方可报名'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/284f07548eb240cc384a102f1b7efdda.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/0c9823481d85f209b4a498945f31ea83.png',
          text: '师资培训报名',
          path: '/hall?role=1',
          textActive: '提交报名资料，等待审核通知和培训通知'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/b278993ee5c29349ff83d1d9b4b596c9.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8d24a5c20a8ab87d26db73ccfacd2fba.png',
          text: '师资学习平台',
          path: '/hall?role=1&point=t1',
          textActive: '提供师资培训资料，辅助老师学习'
        },
        // {
        //   icon: 'https://zws-imgs-pub.ezijing.com/static/public/6f9583c270a3302a352ae9bbba64099d.png',
        //   iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8a16c6cd1dc986075a002fe314f21d0d.png',
        //   text: '参加考试',
        //   path: '/hall?role=1&point=t1',
        //   textActive: '培训后参加统一考试'
        // },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/06f7b0220ab6d8d9d34f6d68258f2669.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/130affba0b6cefd278c31ddfab74acfc.png',
          text: '授权师资名单',
          path: '/hall?role=1&point=t2',
          textActive: '授予培训资格证书老师名单'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/70c3defef24fd1438ada43b3e1ccff87.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/fe6b2d4c31d7f6369468c675d5876671.png',
          text: '开班授课',
          path: '/hall?role=1&point=t3',
          textActive: '进入学习平台'
        }
      ],
      schoolNav: [
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/00e366f3cc15ab30c1fd285d10989bed.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/66dd597f670a07584897d03a4c6bd9ab.png',
          text: '注册账号',
          path: '/register',
          pathType: 3,
          textActive: '注册后方可申报'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/1dc324792168ee1e6a07b5975e6e3d8b.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/02e1e75b3aed4a92f3038589091be1f2.png',
          text: '试点申报',
          path: '/hall?role=2',
          textActive: '提交报名资料，等待审核通知'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/17e3d75022ee88d4661bff4ca61f0966.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/073a7d9317d0ff8d8876c4ce53d15bc2.png',
          text: '考点申报',
          path: '/hall?role=2&point=s1',
          textActive: '提交资料，等待审核通知'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/ea6a2917391444208d9084c3205227b2.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/55065b21e5ba9bc735a3d3527f07af79.png',
          text: '集中报名师训',
          path: '/hall?role=2&point=s2',
          textActive: '给老师分配帐号进入学习系统学习和线下统一培训'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/cc4885f2f4b6f566954cdb15381916f8.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/901044f1465a5497fef8135f9e2ce4ff.png',
          text: '统一实施教学',
          path: '/hall?role=2&point=s3',
          textActive: '发通知组织统一上课'
        },
        {
          icon: 'https://zws-imgs-pub.ezijing.com/static/public/1505fd4535d858b4939e46f2534bfcaf.png',
          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/3c3d204e15a400a7f74b4a9dad44cd55.png',
          text: '批量报名考试',
          path: '/hall?role=2&point=s4',
          textActive: '统计学员后统一报名'
        }
      ],
      offsetBtn: ['我是考生', '我是老师', '我是学校'],
      swiperList: [
        {
          url: 'https://zws-imgs-pub.ezijing.com/static/public/5436086a25645f903303b4b9013a6a2d.png',
          content: '关于1+X金融数字化营销证书考核站点申报'
        }
      ],
      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: [],
      offsetTabIndex: 0
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    },
    passport() {
      return this.$refs.passport 
    }
  },
  mounted() {
    if (this.$route.query.type) {
      this.offsetTabIndex = this.$route.query.type
    }
    this.newsList()
  },
  methods: {
    register() {
      this.$router.push({
        path: '/index',
        query: {
          register: this.$route.query.register ? this.$route.query.register++ : 1
        }
      })
    },
    goNewsPage() {
      this.passport.register()
    },  
    newsTab(n) {
      this.newsTabIndex = n
      this.newsList()
    },
    offsetTab(n) {
      this.$router.push({
        path: '/index',
        query: {
          type: n
        }
      })
      this.offsetTabIndex = n
    },
    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[0].children.find(item => {
          return item.display_name === (this.newsTabIndex ? '工作动态' : '新闻动态')
        })
        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
              })
              console.log(this.swiperList)
            }
          })
          // loading.close()
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content-max-width{
  width: 1200px;
  margin: 0 auto;
}
.home-box{
  background: #F8F8F8;
  .home-head{
    img{
      width: 100%;
      display: block;
      // height: 240px;
    }
  }
  .home-office-hall{
    .title{
      font-size: 24px;
      font-weight: bold;
      color: #444444;
      line-height: 33px;
      padding: 36px 0 16px;
    }
    .office-mian{
      display: flex;
    }
    .tab-btn-box{
      padding-top: 24px;
      li{
        width: 96px;
        height: 40px;
        background: none;
        border-radius: 23px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        color: #444444;
        cursor: pointer;
        &.active{
          color: #fff;
          background: #A81A42;
          border-radius: 23px;
        }
      }
    }
    .item-box{
      display: flex;
      margin-left: 7px;
      li{
        width: 168px;
        height: 168px;
        background: #FFFFFF;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.09);
        border-radius: 4px;
        margin-left: 16px;
        transition: all .5s;
        &:hover{
          background: #A81A42;
          transform: translateY(-10px);
          .img{
            display: none;
            margin: 43px auto 15px auto;
          }
          .img-active{
            display: block;
          }
          .text{
            color: #fff;
            .span1{
              display: none;
            }
            .span2{
              display: block;
            }
          }
        }
        img{
          height: 50px;
          display: block;
          margin: 43px auto 20px auto;
        }
        .img-active{
          display: none;
        }
        .text{
          text-align: center;
          font-size: 16px;
          color: #444444;
          line-height: 18px;
          .span2{
            display: none;
          }
          .span1{
            display: block;
          }
        }
      }
    }
  }
  .notice-box{
    padding-top: 39px;
    .tab-btn{
      display: flex;
      .title{
        font-size: 24px;
        font-weight: bold;
        color: #444444;
        line-height: 33px;
        margin-right: 23px;
      }
      .btn{
        cursor: pointer;
        width: 96px;
        height: 40px;
        background: none;
        border-radius: 23px;
        text-align: center;
        line-height: 40px;
        color: #444;
        text-align: center;
        &.active{
          color: #fff;
          background: #A81A42;
        }
      }
    }
    .notice-mian{
      display: flex;
      margin-top: 16px;
      .assist-list{
        width: 470px;
        background: #FFFFFF;
        border-radius: 4px;
        a{
          // &:nth-child(1){
          //   li{
          //     background: #A81A42;
          //     border-radius: 4px;
          //     .text{
          //       color: #fff;
          //     }
          //   }
          // }
        }
        li{
          &:hover{
            background: #A81A42;
            border-radius: 4px;
            .text{
              color: #fff;
            }
          }
          cursor: pointer;
          &.border-none{
            border: none;
          }
          .text{
            width: 423px;
            margin: 0 auto;
            height: 55px;
            border-bottom: 1px solid #eee;
            line-height: 55px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            font-size: 18px;
            color: #444444;
            &.cen{
              text-align: center;
            }
          }
        }
      }
      .slide-box{
        cursor: pointer;
        position: relative;
        width: 713px;
        height: 280px;
        margin-left: auto;
        .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;
            }
          }
        }
      }
    }
  }
  .advert-box{
    width: 1200px;
    margin: 36px auto;
    img{
      width: 1200px;
      display: block;
    }
  }
  .service-box{
    margin-bottom: 36px;
    .title{
      font-size: 24px;
      font-weight: bold;
      color: #444444;
      line-height: 33px;
    }
    ul{
      margin-top: 16px;
      display: flex;
      li{
        width: 300px;
        height: 400px;
        position: relative;
        .icon{
          position: absolute;
          top: 66px;
          left: 50%;
          -webkit-transform: translateX(-50%);
        }
        .bg{
          width: 100%;
          height: 100%;
          display: block;
        }
        // transition: all .5s;
        &:hover{
          .mask{
            background: rgba(168,26,66,0.5);
            .content-box{
              bottom: 20px;
              .tit{
                color: #fff;
                border-bottom: 1px solid #fff;
              }
              .desc{
                display: block;
              }
              .more{
                display: block;
                cursor: pointer;
              }
            }  
          }
        }
        .mask{
          transition: all .5s;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          // background: rgba(0,0,0,0.5);
          .content-box{
            position: absolute;
            left: 16px;
            bottom: 55px;
            .tit{
              width: auto;
              font-size: 18px;
              font-weight: bold;
              color: rgba(175, 28, 64, 1);
              line-height: 25px;
              border-bottom: 1px solid rgba(175, 28, 64, 1);
            }
            .desc{
              width: 212px;
              font-size: 14px;
              color: #FFFFFF;
              line-height: 20px;
              margin-top: 12px;
              display: none;
            }
            .more{
              font-size: 14px;
              color: #FFFFFF;
              line-height: 20px;
              margin-top: 20px;
              display: none;
            }
          }
        }
      }
    }
  }
}
</style>
