<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="http://xyqbui.lkbang.net/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="float:right">退出</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 = [];
        const 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}?handUpload=${item.handUpload == null ? '' : item.handUpload}`,
          };
          this.menuList[0].child[1].child.push(obj);
        });
      });
    },
    getActiveName(change) {
      const 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) {
      // 超级管理员
      const isAdmin = menu.isAdmin;
      const 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>
