<template>
  <Row id="home" class="home">
    <loading v-show='showLoading'></loading>
    <Col span="3" class="aside" style="width:17%;height:100%;overflow: auto;">
      <img src="https://o7oe0d6qz.qnssl.com/image/homelogo.png" alt="" style="height:70px">
      <Menu style="width: 100%;" ref='subMenu' :active-name="levelThreeName" :open-names="levelTwoName" @on-select="go">
        <template v-for="(menu) in childMenu" >
          <Submenu :name="menu.name" :key="menu.name" v-show='!(isAdmin==false&&menu.item=="账户管理")'>
          <template slot="title">
            <Icon :type="menu.icon" style="font-size:20px;font-weight:bold"/>
            {{menu.item}}
          </template>
          <MenuItem v-for="(child,index) in menu.child" :key="index" :name="child.name" @click="go" :active-name="levelThreeName">{{child.item}}</MenuItem>
        </Submenu>
        </template>
      </Menu>
    </Col>
    <Col span="21" class="content" style="width:83%;height:100%">
      <Row class="header" style="height:50px">
        <Col span="20">
          <Menu mode="horizontal" :active-name="levelOneName" @on-select="selectMenu">
            <MenuItem v-for="menu in menuList" :name="menu.name" :key="menu.name" >
              {{menu.item}}
            </MenuItem>
          </Menu>
        </Col>
        <Col span="2" class="account" style="text-align:right;">
         <span style="display:inline-block;line-height:6%;margin-left:30%;">{{massage}}</span>
        </Col>
        <Col span="1" class="sign-out" >
          <a @click="loginOut" style="margin-left:38%">退出</a>
        </Col>
      </Row>
      <Row style="height:94%">
        <router-view></router-view>
      </Row>
    </Col>
  </Row>
</template>
<script>
import {getpersonMassage,loginOUT,adoptOneSeeResumeList,getChannelMassage,judeAdmin} from '../api/home.server.js'
import localstorage from '../service/localstorage.service.js'
import loading from '../components/loading.vue'
import {mapState} from 'vuex'
  export default{
    data() {
      return {
        massage:'',
        isAdmin: false,
        arr:[],
        biaoshi:'',
        channelARR:[],
        isadmin:'',
        pageindex:0,
        pageSize:10,
        condition:'',
        xiabiao:'',
        itemSelect:'',
        type:'',
        levelOneName: '1',
        levelTwoName: ['1-1', '2-1', '3-1', '4-1'],
        levelThreeName: '1-1-1',
        menuList: [
          { name: '1', 
            item: '简历管理',
            loadMenu: true,
            child: [
             { 
              name: '1-1', 
              item: '全部管理', 
              icon: 'ios-apps-outline',
                child: [
                  { 
                    name: '1-1-1', 
                    item:'全部简历', 
                    route: '/allResume' 
                  }
                ] 
              },
              { name: '1-2', 
                item: '渠道简历',
                icon: 'ios-list',
                child: [] 
              }]
            },
            { name: '2', 
              item: '面试管理', 
              child: [
               { name: '2-1', 
                 item: '面试管理',
                 icon: 'ios-paper-outline',
                 child: [
                  { name: '2-1-1', 
                    item:'全部简历', 
                    route: '/interview' 
                  }] 
                }] 
              },
           {  name: '3', 
              item: '上传简历', 
              child: [{ 
               name: '3-1', 
               item: '上传简历',
               icon: 'ios-cloud-upload-outline',
               child: [
                 { name: '3-1-1', 
                   item:'上传简历', 
                   route: '/upload' 
                 }]
               }] 
             },
           { name: '4', 
             item: '系统管理',
             isAdmin: true, 
             child: [{ 
               name: '4-1', 
               item: '账户管理', 
               icon: 'ios-contact-outline',
               show: true,
               child: [{ 
                name: '4-1-1', 
                item:'账户管理', 
                route: '/account'
               }]
              }, 
               { name: '4-2', 
                item: '邮箱管理', 
                icon:'ios-mail-outline',
                child: [{ 
                  name: '4-2-1', 
                  item:'邮箱管理', 
                  route: '/emailMange' 
                }]},
               { name: '4-3', 
                item: '二维码管理', 
                icon: 'ios-qr-scanner',
                child: [
                 { name: '4-3-1', 
                  item:'二维码管理', 
                  route: '/QRcode' 
                }]}
          
          ] },
        ],
        childMenu: []
      }
    },
    watch:{
      $route(to,from){
        if (to.params.fromInterview){
          this.getActiveName()
        }
        
      }
    },
    computed: {
    ...mapState({
      showLoading: state => state.loading
    })
   },
   components: {
    loading
   },
    methods: {
      go(name) {
        this.levelThreeName = name
        this.childMenu.map(par => {
          par.child.map(child => {
            if (child.name == name) {
              this.$router.push(child.route)
            }
          })
        })
      },
      async selectMenu(name, refesh) {
        // // refesh是否为刷新页面
        this.levelOneName = name
        const menus = this.menuList.filter(v => name === v.name)
        this.childMenu = menus.length >0? menus[0].child : this.menuList[0].child
        if (!refesh) { // 点击菜单默认展示第一个菜单
          this.levelTwoName = []
          let initName = this.getInitName(name, menus[0])
          this.levelTwoName.push(initName.levelTwoName)
          this.levelThreeName = initName.levelThreeName
        }
        if (menus[0].loadMenu) { // 简历管理模块需要加载渠道简历
          await this.getChannelMenu()
        }
        if (refesh&&this.$route.path.indexOf('channel') > -1) {
          this.levelThreeName = this.$route.path.split('/')[2]
        }
        this.$nextTick(() => {
          this.$refs.subMenu.updateOpened();
          this.$refs.subMenu.updateActiveName();
        })
        this.go(this.levelThreeName)
      },
      // 获取个人信息
      getmassage(){
        getpersonMassage().then(res=>{
         this.massage=res.data.body&&res.data.body.userName || ''
        })
      },
     // 用户退出
      loginOut(){
        loginOUT().then(res=>{
          if(res.data.success==true){
            localstorage.remove('token')
            localstorage.remove('isADMIN')
            this.$router.replace('/login') 
          }
        })
      },
      getChannelMenu(){
        this.menuList[0].child[1].child = []
        return getChannelMassage().then(res=>{
          if (res.data.status == false || !res.data.success) {
            return
          }
          this.channelARR=res.data.body || []
          this.channelARR.map((item,index) => {
          var obj = {
            name: `${item.sourceName}`,
            item: item.sourceName,
            route: `/channel/${item.sourceCode}`
          }
          this.menuList[0].child[1].child.push(obj)
         })
        })
      },
      getActiveName (change) {
        let pathName = this.$route.path
        if (pathName.indexOf('channel') > -1) {
          this.levelOneName = '1'
          this.levelThreeName = pathName.split('/')[2]
          this.levelTwoName = []
          this.levelTwoName.push('1-2')
          this.selectMenu(this.levelOneName, 'refresh')
          return
        }
        this.menuList.map(parent => {
          parent.child.map(child => {
              child.child.map(grandson => {
                if (grandson.route == pathName) {
                  this.levelThreeName = grandson.name
                  this.levelOneName = parent.name
                  this.levelTwoName = []
                  this.levelTwoName.push(child.name)
                }
              })
              
          })
        })
        this.selectMenu(this.levelOneName, 'refresh')
      },
      getInitName (name, menu, child) {
         // 超级管理员
         let isAdmin = menu.isAdmin
         let hightMenu = {
            levelTwoName: '',
            levelThreeName: ''
         }
         if (isAdmin  || isAdmin == undefined) { // 默认展示一级菜单
            hightMenu.levelTwoName = menu.child[0].name
            hightMenu.levelThreeName = menu.child[0].child[0].name
         } else if(isAdmin == false){ //展示二级菜单
            hightMenu.levelTwoName = menu.child[1].name
            hightMenu.levelThreeName = menu.child[1].child[0].name
         }
         return hightMenu
      },
      // 判断是否为超级管理员
      judgeadmin(){
        judeAdmin().then(res=>{
          this.isAdmin = res.data.body
          this.menuList[3].isAdmin = this.isAdmin
        })
      },
      goBack () {
        this.getActiveName()
      }
    },
    mounted() {
      this.getmassage()
      this.getActiveName()
      this.judgeadmin()
      if (window.history && window.history.pushState) {
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);
      }
    },
    destroyed(){
      window.removeEventListener('popstate', this.goBack, false);
    }
  }
</script>

<style lang="less" scoped>
  .home{
    height: 100%;
    overflow: hidden;
    .aside{
      border-right: 1px solid #dcdee2;
      box-shadow: #dcdee2 0 0 6px 1px;
      height: 100%;
      img{
        height: 49px;
        width: 100%;
        padding: 3% 28%;
      }
      .ivu-menu{
        .ivu-menu-item{
          padding-left: 49px !important;
        }
      }
    }
    .content{
      .header{
        display: flex;
        align-items: center;height: 55px;
        border-bottom: 1px solid #dcdee2;
        line-height: 55px;
        border-bottom: 1px solid rgb(220, 222, 226);
        font-size: 14px;
        overflow:hidden;
        .sign-out{
          line-height: 6%
        }
        .ivu-menu{
          height: 43px;
          line-height: 43px;
          .ivu-menu-item{
            padding: 0 13px;
            margin: 0 49px;
          }
          &:after{
            height: 0;
          }
        }
      }
    }
  }
</style>
