<template>
  <div class = "app-container">
    <hs-menu ref = "hsMenu"
             :source = "menuSource"
             :active-menu = "activeMenu"
             :select = "select"
             :is-active-parent-menu = "isActiveParentMenu"
             :before-select = "beforeSelect"></hs-menu>
    <div class = "right-content">
      <input type = "text" v-model="activeMenu">
      <a href = "javascript:void(0)" @click = "setSource">刷新数据</a>
      <a href = "javascript:void(0)" @click = "hideMenu">隐藏菜单</a>
      <a href = "javascript:void(0)" @click = "showMenu">显示菜单</a>
    </div>
  </div>
</template>

<script>
  import HsMenu from '../lib/menu/menu';

  export default {
    components: {
      HsMenu,
    },
    props: {
    },
    data() {
      return {
        /**
         * 支持String
         * 支持Object
         * {
         *    menuCode: 'kpxmgl',
         *    params: ANY
         * }
        */
        activeMenu: {
          menuCode: '',
          params: {},
          triggerSelectEvent: true,
        },
        // activeMenu: '',
        menuSource: [],
        isActiveParentMenu: false,
      };
    },
    computed: {
    },
    mounted() {
      this.init();
      window.menu = this;
    },
    methods: {
      init() {
        setTimeout(() => {
          this.menuSource = [{
            "activeIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/52e5187ce8514f28baa4ff5060c6b097.png",
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "hoverIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/52e5187ce8514f28baa4ff5060c6b097.png",
            "menuCode": "home",
            "menuId": 45,
            "menuIndex": 20,
            "menuName": "常用工具",
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "normalIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/993ffbb90d694e27b88820c773c55e16.png",
            "popup": 0,
            "selected": true,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/home"
          },
          {
            "activeIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/abb75be0d5b24c98a3d4e4ef303693df.png",
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "hoverIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/abb75be0d5b24c98a3d4e4ef303693df.png",
            "menuCode": "employee",
            "menuId": 49,
            "menuIndex": 10,
            "menuName": "人员管理",
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "normalIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/1dbe078cce984a28a1755c2020c66428.png",
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": ""
          },
          {
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "menuCode": "salary.calc",
            "menuId": 121,
            "menuName": "智能算税",
            "needCertificate": false,
            "needLogin": true,
            "menuIndex": 1,
            "needXsb": false,
            "parentId": 53,
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/salary/calc"
          },
          {
            "appId": 517,
            "browser": 1,
            "groupId": 51,
            "menuCode": "salary.calc.third",
            "menuId": 221,
            "menuName": "智能算税三级菜单",
            "needCertificate": false,
            "needLogin": true,
            "menuIndex": 1,
            "needXsb": false,
            "parentId": 121,
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/salary/calc/third"
          },
          {
            "activeIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/7013b97cb8d24b7b9cbc6c5aa4c8a803.png",
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "hoverIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/7013b97cb8d24b7b9cbc6c5aa4c8a803.png",
            "menuCode": "salary",
            "menuId": 53,
            "menuName": "工资管理",
            "menuIndex": 30,
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "normalIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/658426b614da484bafef302d9f9a71fc.png",
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": ""
          },
          {
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "menuCode": "salary.send",
            "menuId": 55,
            "menuName": "工资条发放",
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "parentId": 53,
            "menuIndex": 2,
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/salary/send"
          },
          {
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "menuCode": "salary.ledger",
            "menuId": 54,
            "menuName": "工资表查询",
            "needCertificate": false,
            "needLogin": true,
            "menuIndex": 3,
            "needXsb": false,
            "parentId": 53,
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/salary/ledger"
          },
          {
            "activeIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/fcbf529f9d15401b93bc24318aadec12.png",
            "appId": 417,
            "browser": 1,
            // "groupId": '',
            "guideIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/afc8f13f59d04115afe904469833b188.png",
            "guideControl": 0,
            "hoverIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/fcbf529f9d15401b93bc24318aadec12.png",
            "menuCode": "selfhelp",
            "menuId": 52,
            "menuName": "员工服务",
            "menuIndex": 40,
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "normalIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/3064945158b54ce5a99058637fc92dc7.png",
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/selfhelp"
          },
          {
            "activeIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/ac11be938c83482cbd9da91d7d902655.png",
            "appId": 417,
            "browser": 1,
            // "groupId": '',
            "guideIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/new.png",
            "guideControl": 1,
            "hoverIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/ac11be938c83482cbd9da91d7d902655.png",
            "menuCode": "admin",
            "menuId": 63,
            "menuIndex": 50,
            "menuName": "邀请同事",
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "normalIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/7460b75db3f84d429298eaff644bcda8.png",
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/admin/account"
          },
          {
            "appId": 417,
            "browser": 1,
            "groupId": 12,
            "menuCode": "insurance",
            "menuId": 57,
            "menuName": "社保管理",
            "needCertificate": false,
            "menuIndex": 60,
            "needLogin": true,
            "needXsb": false,
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": ""
          },
          {
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "menuCode": "insurance.manager",
            "menuId": 58,
            "menuName": "社医保增减员",
            "menuIndex": 1,
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "parentId": 57,
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/insurance/manager"
          },
          {
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "menuCode": "insurance.pay",
            "menuId": 60,
            "menuIndex": 2,
            "menuName": "社医保费清单",
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "parentId": 57,
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/insurance/pay"
          },
          {
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "menuCode": "insurance.other",
            "menuId": 61,
            "menuIndex": 70,
            "menuName": "其他功能",
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "parentId": 57,
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/insurance/other"
          },
          {
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "subGroupId": 22,
            "menuCode": "employee.ledger",
            "menuId": 50,
            "menuName": "人员花名册",
            "menuIndex": 1,
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "parentId": 49,
            "popup": 0,
            "selected": true,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/employee/ledger"
          },
          {
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "subGroupId": 22,
            "menuCode": "employee.relation",
            "menuId": 51,
            "menuName": "入离职管理",
            "menuIndex": 2,
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "parentId": 49,
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/employee/relation"
          }
          ];
          // this.menuSource = [{
          //   "activeIcon": "http://192.168.150.189/ftp/appCenter/img/259bcc315de24a599707bf195322bb80.png",
          //   "appId": 602,
          //   "authCode": "",
          //   "browser": 0,
          //   "canTry": false,
          //   "groupId": 14,
          //   "guideIcon": "",
          //   "hoverIcon": "",
          //   "menuCode": "fpgjx",
          //   "menuId": 209,
          //   "menuIndex": 6,
          //   "menuName": "发票工具箱",
          //   "needCertificate": false,
          //   "normalIcon": "http://192.168.150.189/ftp/appCenter/img/08848387fc6f45739b12738e9c6444d2.png",
          //   "permitControl": 1,
          //   "popup": 0,
          //   "selected": false,
          //   "shell": 0,
          //   "showShade": false,
          //   "targetPath": "",
          //   "targetUrl": "/fpgjx"
          // }, {
          //   "activeIcon": "http://192.168.150.189/ftp/appCenter/img/73c7ba6723f341f48e0d5d393772fce4.png",
          //   "appId": 602,
          //   "authCode": "",
          //   "browser": 0,
          //   "canTry": false,
          //   "groupId": 12,
          //   "guideIcon": "",
          //   "hoverIcon": "",
          //   "menuCode": "xxfptz",
          //   "menuId": 204,
          //   "menuIndex": 0,
          //   "menuName": "销项台账",
          //   "needCertificate": false,
          //   "normalIcon": "http://192.168.150.189/ftp/appCenter/img/39a96e55d0654503b75dec5d5c6d0c4b.png",
          //   "permitControl": 1,
          //   "popup": 0,
          //   "selected": false,
          //   "shell": 0,
          //   "showShade": false,
          //   "targetPath": "",
          //   "targetUrl": "http://10.199.129.8:10000/fptz/tabs/xxfptz?activeName=xxfptz"
          // },
          // {
          //   "activeIcon": "http://192.168.150.189/ftp/appCenter/img/6d240a03959d4419a47870aa995b988f.png",
          //   "appId": 602,
          //   "authCode": "",
          //   "browser": 0,
          //   "canTry": false,
          //   "groupId": 12,
          //   "guideIcon": "",
          //   "hoverIcon": "",
          //   "menuCode": "kpgl",
          //   "menuId": 169,
          //   "menuIndex": 1,
          //   "menuName": "开票管理",
          //   "needCertificate": false,
          //   "normalIcon": "http://192.168.150.189/ftp/appCenter/img/d311ecf04c35407b9768dcc08053e57e.png",
          //   "permitControl": 1,
          //   "popup": 0,
          //   "selected": false,
          //   "shell": 0,
          //   "showShade": false,
          //   "targetPath": "",
          //   "targetUrl": "/kpgl"
          // },
          //   {
          //     "activeIcon": "http://192.168.150.189/ftp/appCenter/img/44fe763fbbe242eaa68b80c6612149a7.png",
          //     "appId": 602,
          //     "authCode": "",
          //     "browser": 0,
          //     "canTry": false,
          //     "groupId": 13,
          //     "guideIcon": "",
          //     "hoverIcon": "",
          //     "menuCode": "jxfptz",
          //     "menuId": 205,
          //     "menuIndex": 2,
          //     "menuName": "进项台账",
          //     "needCertificate": false,
          //     "normalIcon": "http://192.168.150.189/ftp/appCenter/img/d96e11ffc5be42e8b4b45fdd8ae4e50d.png",
          //     "permitControl": 1,
          //     "popup": 0,
          //     "selected": false,
          //     "shell": 0,
          //     "showShade": false,
          //     "targetPath": "",
          //     "targetUrl": "http://10.199.129.8:10000/fptz/tabs/jxfptz"
          //   },
          //   {
          //     "activeIcon": "http://192.168.150.189/ftp/appCenter/img/7313786619e1447cae55d27991ade0d3.png",
          //     "appId": 602,
          //     "authCode": "",
          //     "browser": 0,
          //     "canTry": false,
          //     "groupId": 13,
          //     "guideIcon": "",
          //     "hoverIcon": "",
          //     "menuCode": "jxrzzx",
          //     "menuId": 206,
          //     "menuIndex": 3,
          //     "menuName": "进项认证",
          //     "needCertificate": false,
          //     "normalIcon": "http://192.168.150.189/ftp/appCenter/img/19daf17e33404f3992bdff076460d7f9.png",
          //     "permitControl": 1,
          //     "popup": 0,
          //     "selected": false,
          //     "shell": 0,
          //     "showShade": false,
          //     "targetPath": "",
          //     "targetUrl": "/jxrzzx"
          //   },
          //   {
          //     "activeIcon": "",
          //     "appId": 602,
          //     "authCode": "",
          //     "browser": 0,
          //     "canTry": false,
          //     "groupId": 13,
          //     "guideIcon": "",
          //     "hoverIcon": "",
          //     "menuCode": "jxcj",
          //     "menuId": 207,
          //     "menuIndex": 4,
          //     "menuName": "进项采集",
          //     "needCertificate": false,
          //     "normalIcon": "http://192.168.150.189/ftp/appCenter/img/c92d6f816f3d40f5b074d7e470a1125c.png",
          //     "permitControl": 1,
          //     "popup": 0,
          //     "selected": false,
          //     "shell": 0,
          //     "showShade": false,
          //     "targetPath": "",
          //     "targetUrl": "/jxcj"
          //   },
          //   {
          //     "activeIcon": "http://192.168.150.189/ftp/appCenter/img/9931618d246a4415b64d52417ced8e6a.png",
          //     "appId": 602,
          //     "authCode": "",
          //     "browser": 0,
          //     "canTry": false,
          //     "groupId": 13,
          //     "guideIcon": "",
          //     "hoverIcon": "",
          //     "menuCode": "fpbq",
          //     "menuId": 208,
          //     "menuIndex": 5,
          //     "menuName": "进项补全",
          //     "needCertificate": false,
          //     "normalIcon": "http://192.168.150.189/ftp/appCenter/img/7e11a73bd4ac4dc58ec2d956977000c9.png",
          //     "permitControl": 1,
          //     "popup": 0,
          //     "selected": false,
          //     "shell": 0,
          //     "showShade": false,
          //     "targetPath": "",
          //     "targetUrl": "/fpbq"
          //   },
          // ];
          // this.activeMenu = {
          //   menuCode: 'employee.ledger'
          // };
          // this.activeMenu = {
          //   menuCode: 'insurance.manager',
          //   params: '1',
          //   triggerSelectEvent: true,
          // };
        }, 50);
      },
      select(e) {
        console.log(e);
      },
      beforeSelect(currentMenu) {
        return new Promise((resolve, reject) => {
          if (currentMenu && currentMenu.menuCode === 'selfhelp') {
            setTimeout(reject, 2000);
          } else {
            resolve();
          }
        });
      },
      hideMenu() {
        this.$refs.hsMenu.hideMenuByCode(['home', 'employee', 'salary']);
      },
      showMenu() {
        this.$refs.hsMenu.showMenuByCode(['home']);
      },
      setSource(){
        this.menuSource = [
          {
            "activeIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/abb75be0d5b24c98a3d4e4ef303693df.png",
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "hoverIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/abb75be0d5b24c98a3d4e4ef303693df.png",
            "menuCode": "employee",
            "menuId": 49,
            "menuIndex": 10,
            "menuName": "人员管理",
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "normalIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/1dbe078cce984a28a1755c2020c66428.png",
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": ""
          },
          {
            "activeIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/7013b97cb8d24b7b9cbc6c5aa4c8a803.png",
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "hoverIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/7013b97cb8d24b7b9cbc6c5aa4c8a803.png",
            "menuCode": "salary",
            "menuId": 53,
            "menuName": "工资管理",
            "menuIndex": 30,
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "normalIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/658426b614da484bafef302d9f9a71fc.png",
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": ""
          },
          {
            "activeIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/fcbf529f9d15401b93bc24318aadec12.png",
            "appId": 417,
            "browser": 1,
            // "groupId": '',
            "guideIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/afc8f13f59d04115afe904469833b188.png",
            "guideControl": 0,
            "hoverIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/fcbf529f9d15401b93bc24318aadec12.png",
            "menuCode": "selfhelp",
            "menuId": 52,
            "menuName": "员工服务",
            "menuIndex": 40,
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "normalIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/3064945158b54ce5a99058637fc92dc7.png",
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/selfhelp"
          },
          {
            "appId": 417,
            "browser": 1,
            "groupId": 12,
            "menuCode": "insurance",
            "menuId": 57,
            "menuName": "社保管理",
            "needCertificate": false,
            "menuIndex": 60,
            "needLogin": true,
            "needXsb": false,
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": ""
          },
          {
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "menuCode": "insurance.manager",
            "menuId": 58,
            "menuName": "社医保增减员",
            "menuIndex": 1,
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "parentId": 57,
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/insurance/manager"
          },
          {
            "activeIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/ac11be938c83482cbd9da91d7d902655.png",
            "appId": 417,
            "browser": 1,
            // "groupId": '',
            "guideIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/new.png",
            "guideControl": 1,
            "hoverIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/ac11be938c83482cbd9da91d7d902655.png",
            "menuCode": "admin",
            "menuId": 63,
            "menuIndex": 50,
            "menuName": "邀请同事",
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "normalIcon": "http://wcdn.servyou.com.cn/update2/zxm/appCenter/img/7460b75db3f84d429298eaff644bcda8.png",
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/admin/account"
          },
          {
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "menuCode": "employee.ledger",
            "menuId": 50,
            "menuName": "人员花名册",
            "menuIndex": 1,
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "parentId": 49,
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/employee/ledger"
          },
          {
            "appId": 417,
            "browser": 1,
            "groupId": 11,
            "menuCode": "employee.relation",
            "menuId": 51,
            "menuName": "入离职管理",
            "menuIndex": 2,
            "needCertificate": false,
            "needLogin": true,
            "needXsb": false,
            "parentId": 49,
            "popup": 0,
            "selected": false,
            "shell": 1,
            "showShade": false,
            "targetPath": "",
            "targetUrl": "/main/employee/relation"
          }
        ];
      },
    },
  };
</script>

<style lang = 'scss'>
  html,body {
    padding: 0;
    margin: 0;
    height: 100%
  }
  * {
    box-sizing: border-box;
  }
  .app-container {
    display: flex;
    height: 100%;
  }
  .container > .right-content {
    flex-grow: 1;
    width: calc(100% - 180px);
  }
</style>
