<template>
  <div class="hall-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>
    <student-help v-show="offsetTabIndex == 0"></student-help>
    <teacher-help v-show="offsetTabIndex == 1"></teacher-help>
    <school-help v-show="offsetTabIndex == 2"></school-help>
  </div>
</template>
<script>
import merge from 'webpack-merge'
import haedBanner from '@/components/headBanner'
import studentHelp from './components/studentHelp'
import teacherHelp from './components/teacherHelp'
import schoolHelp from './components/schoolHelp'
export default {
  components: {
    haedBanner,
    studentHelp,
    teacherHelp,
    schoolHelp
  },
  data() {
    return {
      offsetTabIndex: 0,
      offsetBtn: ['我是考生', '我是老师', '我是学校'],
      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',
          textActive: '注册后方可报名',
          pathType: 3
        },
        {
          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&point=5',
          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&home=1',
        //   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&point=s5',
          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: '统计学员后统一报名'
        }
      ],
    }
  },
  mounted() {
    this.offsetTabIndex = parseInt(this.$route.query.role) || 0
  },
  methods: {
    register() {
      this.$router.push({
        query: merge(this.$route.query, { register: this.$route.query.register ? this.$route.query.register++ : 1 })
      })
    },
    offsetTab(n) {
      this.offsetTabIndex = n
      this.$router.push({
        query:merge({},{'role': n })
      })
    },
    goPage(path, n) {
      if (n) {
        window.open(path)
      } else {
        this.$router.push({
          path: path
        })
      }
    }
  },
  computed: {
    passport() {
      return this.$refs.passport
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal){
        this.offsetTabIndex = this.$route.query.role || 0
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.hall-box{
  background: #F8F8F9;
}
.content-max-width{
  width: 1200px;
  margin: 0 auto;
}
.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;
        }
      }
    }
  }
}
</style>
