<template>
  <div class="home" :class="userType != 22&&initPage ? 'home-class' : ''" >
    <home-navbar />
    <div class="max-big-home-box" v-if="userType != 22&&initPage">
      <div class="max-home-button-box">
        <div class="max-home-box">
          <div class="max-bottom-box">
            <div class="top-button-box">
              <div class="left-box">
                <div class="position-button" v-if="item.switch"
                     v-for="(item,index) in homeConfigData.leftButtonList" @click="goPage(item)">
                  <div>
                    <img :src="item.imgUrl">
                    <p>{{item.buttonType?item.menuName:item.buttonName}}</p>
                  </div>
                </div>
              </div>
              <div class="center-box">
                <div class="position-button" v-if="item.switch"
                     v-for="(item,index) in homeConfigData.centerButtonList" @click="goPage(item)">
                  <div>
                    <img :src="item.imgUrl">
                    <p>{{item.buttonType?item.menuName:item.buttonName}}</p>
                  </div>
                </div>
              </div>
              <div class="right-box">
                <div class="position-button" v-if="item.switch"
                     v-for="(item,index) in homeConfigData.rightButtonList" @click="goPage(item)">
                  <div>
                    <img :src="item.imgUrl">
                    <p>{{item.buttonType?item.menuName:item.buttonName}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="center-button-box display-none-one"></div>
            <div class="bottom-button-box">
              <div class="null-button"></div>
              <div class="position-button" v-if="item.switch"
                   v-for="(item,index) in homeConfigData.bottomButtonList" @click="goPage(item)">
                <div>
                  <img :src="item.imgUrl">
                  <p>{{item.buttonType?item.menuName:item.buttonName}}</p>
                </div>
              </div>
              <div class="null-button"></div>
            </div>
          </div>
          <img class="img-1" src="~@/assets/ZDimages/basicsModules/img_sy_lf.png">
          <img class="img-2" src="~@/assets/ZDimages/basicsModules/img_yh_db.png">
          <img class="img-3" src="~@/assets/ZDimages/basicsModules/img_yh_zj.png">
          <img class="img-4" src="~@/assets/ZDimages/basicsModules/img_yh_dd.png">
          <img class="img-5" src="~@/assets/ZDimages/basicsModules/img_yh_zj.png">
          <img class="img-6" src="~@/assets/ZDimages/basicsModules/img_yh_db.png">
        </div>
      </div>
    </div>
    <backAnimation v-if="userType != '22'&&initPage"></backAnimation>
  </div>
</template>

<script>
  import store from '@/store'
  import router from '@/router'
  import backAnimation from "./components/backAnimation"
  import homeNavbar from './components/homeNavbar.vue'
  export default {
    name: "home",
    components: {
      homeNavbar,
      backAnimation
    },
    data() {
      return {
        userType:localStorage.getItem('userType'),
        initPage:JSON.parse(localStorage.getItem('initPage')),
        homeConfigData:JSON.parse(localStorage.getItem('homeConfig')),
        routeData:JSON.parse(localStorage.getItem("routeData")),
      };
    },
    created(){

    },
    mounted(){
      if (this.userType == '22'){
        //学生身份没有首页 直接判定跳转逻辑
        if(this.homeConfigData.studentsSkip){
          //开启了指定页面跳转
          this.appointSkip();
        }else{
          //自动跳转
          this.autoSkip();
        }
      }else if (!this.initPage){
        //老师身份 如果没有开启首页
        if(this.homeConfigData.teacherSkip){
          //开启了指定页面跳转
          this.appointSkip();
        }else{
          //自动跳转
          this.autoSkip();
        }
      }
    },
    methods: {
      //跳转按钮
      goPage(item){
        let self = this;
        if(item.buttonType){
          if(item.isFrame){
            //外部链接-暂定为获取当前大屏地址跳转
            for(let i=0;i<self.routeData.length;i++){
              if(item.path == self.routeData[i].name){
                window.open(localStorage.getItem('screenUrl') + '?identity=' + localStorage.getItem('identity'));
                return
              }
            }
            this.$alert('没有"'+item.menuName+'"系统权限，如有疑问，请联系管理员', {
              confirmButtonText: '确定',
              callback: action => {}
            });
          }else{
            let path = this.circularCallNameSkip(item.path,this.routeData,false);
            if(path){
              this.$router.push({ path: path });
            }else{
              this.$alert('没有"'+item.menuName+'"系统权限，如有疑问，请联系管理员', {
                confirmButtonText: '确定',
                callback: action => {}
              });
            }
          }
        }else{
          this.$alert(item.buttonName+'暂未开放', {
            confirmButtonText: '确定',
            callback: action => {}
          });
        }
      },
      //自动跳转
      autoSkip(){
        let path = this.circularCallSortSkip(this.routeData);
        if(path){
          this.$router.push({ path: path });
        }else{
          this.outLogin();
        }
      },
      //指定跳转
      appointSkip(){
        if(this.userType == '22'){
          //学生
          let path = this.circularCallIdSkip(this.homeConfigData.studentsSkipMenuId,this.routeData);
          if(path){
            this.$router.push({ path: path });
          }else{
            this.outLogin();
          }
        }else if(this.userType == '11'){
          //老师
          let path = this.circularCallIdSkip(this.homeConfigData.teacherSkipMenuId,this.routeData);
          if(path){
            this.$router.push({ path: path });
          }else{
            this.outLogin();
          }
        }
      },
      //循环调用 按照排序跳转
      circularCallSortSkip(list){
        let self = this;
        for(let i=0;i<list.length;i++){
          if(list[i].children){
            let text = self.circularCallSortSkip(list[i].children)
            if(text){
              return list[i].path + '/' + text
            }
          }else if(!list[i].alwaysShow && !list[i].hidden && !list[i].isFrame){
            return list[i].path
          }
        }
      },
      //循环调用 通过ID匹配跳转
      circularCallIdSkip(skipMenuId,list){
        let self = this;
        for(let i=0;i<list.length;i++){
          if(skipMenuId == list[i].menuId){
            return list[i].path
          }else if(list[i].children){
            let text = self.circularCallIdSkip(skipMenuId,list[i].children)
            if(text){
              return list[i].path + '/' + text
            }
          }
        }
      },
      //循环调用 通过name匹配跳转
      circularCallNameSkip(skipName,list,type){
        let self = this;
        for(let i=0;i<list.length;i++){
          if(type){
            if(list[i].children){
              let text = self.circularCallNameSkip(skipName,list[i].children,true)
              if(text){
                return list[i].path + '/' + text
              }
            }else if(!list[i].alwaysShow && !list[i].hidden){
              return list[i].path
            }
          }else{
            if(skipName == list[i].name){
              if(list[i].children){
                let text = self.circularCallNameSkip(skipName,list[i].children,true)
                if(text){
                  return list[i].path + '/' + text
                }
              }
            }
          }
        }
      },
      //权限异常未匹配到相关权限页面 提示并退出
      outLogin(){
        this.$alert('没有相关权限，请联系管理员', {
          confirmButtonText: '确定',
          callback: action => {
            store.dispatch('LogOutNoData').then(() => {
              localStorage.removeItem('serviceType');
              router.replace({
                path: '/login'
              })
            })
          }
        });
      },
    },
  };
</script>

<style scoped lang="scss">
  @-webkit-keyframes centerButtonMover  {
    0% {
      transform:scale(1);
    }
    30% {
      transform: rotate(0deg) scale(0.9);
    }
    40% {
      transform: rotate(-5deg) scale(1);
    }
    50% {
      transform: rotate(5deg) scale(1);
    }
    60% {
      transform: rotate(-5deg) scale(1.1);
    }
    70% {
      transform: rotate(0deg) scale(1.2);
    }
    100% {
      transform: rotate(0deg) scale(1);
    }
  }
  @-webkit-keyframes centerMover {
    0% {
      -webkit-transform: translateY(0);
    }
    50% {
      -webkit-transform: translateY(20px);
    }
    100% {
      -webkit-transform: translateY(0);
    }
  }
  @-webkit-keyframes ringMove {
    0% {
      -webkit-transform: translateY(0px);
      opacity:1;
    }
    50% {
      -webkit-transform: translateY(20px);
      opacity:0;
    }
    100% {
      -webkit-transform: translateY(0);
      opacity:0;
    }
  }
  @-webkit-keyframes buttonMove{
    50%{
      -webkit-transform:scale(0.8);
      transform:scale(0.8);
      -webkit-filter:brightness(90%)
    }
    100%{
      -webkit-transform:scale(1);
      transform:scale(1);
      -webkit-filter:brightness(100%)
    }
  }
  .home-class{
    background-color: #004d8c;
    background-image:url("../../assets/ZDimages/basicsModules/img_tydlpt_bg.png")!important;
    -webkit-background-size: 100%;
    background-size: 100%;

  }
  .home {
    height:100%;
    width:100%;
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    *{
      margin:0;
    }
    .max-big-home-box{
      position: relative;
      flex:1;
      overflow: hidden;
      .max-home-button-box{
        /*width:1462px;*/
        width:1300px;
        /*height:848px;*/
        height:760px;
        top:50%;
        left:50%;
        margin-top:-380px;
        margin-left:-650px;
        position: absolute;
        .max-home-box{
          /*background: #E65D6E;*/
          /*width:1462px;*/
          width:1300px;
          /*height:848px;*/
          height:760px;
          position: relative;
          display: flex;
          flex-direction: column;
          .img-1{
            position: absolute;
            /*width:863px;*/
            width:690px;
            /*height:504px;*/
            height:403px;
            top:191px;
            left:50%;
            margin-left:- 345px;
            -webkit-animation-name: centerMover;
            -webkit-animation-duration: 4s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-delay: 0s;
          }
          .img-2{
            position: absolute;
            /*width:463px;*/
            width:370px;
            /*height:106px;*/
            height:84px;
            top:391px;
            left:50%;
            margin-left:- 185px;
            -webkit-animation-name: ringMove;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-delay: 0s;
          }
          .img-3{
            position: absolute;
            /*width:493px;*/
            width:394px;
            /*height:107px;*/
            height:85px;
            top:319px;
            left:50%;
            margin-left:- 197px;
            -webkit-animation-name: ringMove;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-delay: 0.2s;
          }
          .img-4{
            position: absolute;
            /*width:554px;*/
            width:443px;
            /*height:118px;*/
            height:94px;
            top:231px;
            left:50%;
            margin-left:- 221px;
            -webkit-animation-name: ringMove;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-delay: 0.4s;
          }
          .img-5{
            position: absolute;
            width:394px;
            /*width:493px;*/
            /*height:107px;*/
            height:85px;
            /*width:644px;*/
            /*height:118px;*/
            top:141px;
            left:50%;
            //margin-left:-322px;
            margin-left:- 197px;
            -webkit-animation-name: ringMove;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-delay: 0.6s;
          }
          .img-6{
            position: absolute;
            width:354px;
            /*width:443px;*/
            /*height:106px;*/
            height:84px;
            /*width:734px;*/
            /*height:118px;*/
            top:051px;
            left:50%;
            //margin-left:-367px;
            margin-left:- 177px;
            -webkit-animation-name: ringMove;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-delay: 0.8s;
          }
          .max-bottom-box{
            width:1300px;
            margin:0 auto;
            flex:1;
            display: flex;
            flex-direction: column;
            .top-button-box{
              display: flex;
              .left-box{
                .position-button{
                  width:297px;
                  height:136px;
                  cursor: pointer;
                  position: relative;
                  z-index:5;
                  img{
                    width:297px;
                    height:136px;
                  }
                  p{
                    position: absolute;
                    top:43px;
                    left:142px;
                    text-align: center;
                    font-size:18px;
                    line-height:18px;
                    background: linear-gradient(to top, #06F6F7 , #FFFFFF );
                    -webkit-background-clip: text;
                    color: transparent;
                  }
                }
                .position-button:nth-child(1){
                  margin-top:0;
                }
                .position-button:nth-child(2){
                  margin:55px 0 0 40px;
                }
                .position-button:nth-child(3){
                  margin:55px 0 0 80px;
                }
              }
              .center-box{
                flex:1;
                .position-button{
                  width:147px;
                  height:105px;
                  cursor: pointer;
                  position: relative;
                  z-index:5;
                  margin:0 auto 0;
                  -webkit-animation-name: centerButtonMover;
                  -webkit-animation-duration: 3s;
                  -webkit-animation-iteration-count: infinite;
                  -webkit-animation-delay: 0s;
                  img{
                    width:147px;
                    height:105px;
                  }
                  p{
                    position: absolute;
                    top:66px;
                    left:30px;
                    text-align: center;
                    font-size:18px;
                    line-height:18px;
                    background: linear-gradient(to top, #06F6F7 , #FFFFFF );
                    -webkit-background-clip: text;
                    color: transparent;
                  }
                }
              }
              .right-box{
                .position-button{
                  width:297px;
                  height:136px;
                  cursor: pointer;
                  z-index:5;
                  position: relative;
                  img{
                    width:297px;
                    height:136px;
                  }
                  p{
                    position: absolute;
                    top:43px;
                    left:56px;
                    text-align: center;
                    font-size:18px;
                    line-height:18px;
                    background: linear-gradient(to top, #06F6F7 , #FFFFFF );
                    -webkit-background-clip: text;
                    color: transparent;
                  }
                }
                .position-button:nth-child(1){
                  margin:0 0 0 80px;
                }
                .position-button:nth-child(2){
                  margin:55px 0 0 40px;
                }
                .position-button:nth-child(3){
                  margin-top:55px;
                }
              }
            }
            .center-button-box{
              flex:1;
            }
            .bottom-button-box{
              display: flex;
              .null-button{
                flex:1;
              }
              .position-button{
                width:140px;
                height:200px;
                cursor: pointer;
                z-index:5;
                position: relative;
                margin-right:95px;
                img{
                  width:140px;
                  height:230px;
                }
                p{
                  position: absolute;
                  top:154px;
                  /*left:34px;*/
                  width:140px;
                  text-align: center;
                  font-size:18px;
                  line-height:18px;
                  background: linear-gradient(to top, #06F6F7 , #FFFFFF );
                  -webkit-background-clip: text;
                  color: transparent;
                }
              }
              .position-button:nth-last-child(2){
                margin-right:0;
              }
            }
            .position-button:hover{
              -webkit-animation-name: buttonMove;
              -webkit-animation-duration: 1.5s;
              -webkit-animation-iteration-count: infinite;
              -webkit-animation-delay: 0s;
            }
          }
        }
      }
    }
    .bottom-null-box{
      height:60px;
    }
  }
</style>

