<template>
  <div class="d2-layout-header-aside-menu-side">
    <el-menu
      :collapse="asideCollapse"
      :unique-opened="true"
      :default-active="active"
      ref="menu"
      @select="handleMenuSelect">
      <template v-for="(menu, menuIndex) in aside">
        <d2-layout-header-aside-menu-item v-if="menu.list == undefined" :menu="menu" :key="menuIndex"/>
        <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
      </template>
    </el-menu>
    <div v-if="aside.length === 0 && !asideCollapse" class="d2-layout-header-aside-menu-empty" flex="dir:top main:center cross:center">
      <d2-icon name="inbox"/>
      <span>没有侧栏菜单</span>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import menuMixin from '../mixin/menu'
import d2LayoutMainMenuItem from '../components/menu-item/index.vue'
import d2LayoutMainMenuSub from '../components/menu-sub/index.vue'
import BScroll from 'better-scroll'
export default {
  name: 'd2-layout-header-aside-menu-side',
  mixins: [
    menuMixin
  ],
  components: {
    'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem,
    'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub
  },
  data () {
    return {
      active: '',
      asideHeight: 300,
      BS: null,
      aside: [
        // {
        //   title: '电子围栏报警',
        //   path: '/sys/log',
        //   icon: 'el-icon-bell'
        // },
        // {
        //   title: '报警信息列表',
        //   path: '/sys/setting/sql',
        //   icon: 'el-icon-menu'
        // },
         {
          title: '电子地图',
          path: '/ol',
          icon: 'el-icon-setting',
          list: [
            { title: '电子地图', path: '/ol/demo' }
          ]
        },
         {
          title: '设备管理',
          path: '/eq',
          icon: 'el-icon-setting',
          list: [
            { title: '设备管理', path: '/eq/equ' },
            { title: '设备拓扑监测', path: '/eq/topology' },
            { title: '告警信息', path: '/eq/alarm' },
            { title: '告警统计', path: '/eq/chart' }

          ]
        },
        {
          title: '视频监控',
          path: '/monitor',
          icon: 'el-icon-setting',
          list: [
            { title: '电子地图', path: '/monitor/point' },
            { title: '实时监控', path: '/monitor/monitor' },
            { title: '视频轮播', path: '/monitor/rotation' },
            { title: '视频回放', path: '/monitor/playback' },
            { title: '历史指令', path: '/monitor/instructions' }
          ]
        },
        {
          title: '出入口控制',
          path: '/access',
          icon: 'el-icon-setting',
          list: [
            { title: '电子地图', path: '/access/point' },
            { title: '发卡查询', path: '/access/card' },
            { title: '历史指令', path: '/access/instructions' }
          ]
        },
        {
          title: '入侵报警',
          path: '/police',
          icon: 'el-icon-setting',
          list: [
            { title: '电子地图', path: '/police/point' },
            { title: '历史指令', path: '/police/instructions' }
          ]
        },
        {
          title: '安全检查',
          path: '/inspect',
          icon: 'el-icon-setting',
          list: [
            { title: '电子地图', path: '/inspect/point' },
            { title: '实时安检', path: '/inspect/security' },
            { title: '安检视频回放', path: '/inspect/playback' },
            { title: '历史指令', path: '/inspect/instructions' }
          ]
        },
        {
          title: '电子巡更',
          path: '/patrol',
          icon: 'el-icon-setting',
          list: [
            { title: '巡查点', path: '/patrol/spot' },
            { title: '巡查线路', path: '/patrol/line' },
            { title: '巡查计划', path: '/patrol/plan' },
            { title: '巡查结果', path: '/patrol/result' },
            { title: '巡查机管理', path: '/patrol/machine' },
            { title: '漏检数据', path: '/patrol/data' }
          ]
        },
        {
          title: '应急物资管理',
          path: '/em',
          icon: 'el-icon-setting',
          list: [
            { title: '应急部门管理', path: '/em/org' },
            { title: '应急专家管理', path: '/em/proficient' },
            { title: '应急人员管理', path: '/em/person' },
            { title: '应急物资管理', path: '/em/material' }

          ]
        },
        {
          title: '系统管理',
          path: '/sys',
          icon: 'el-icon-setting',
          list: [
            // {title:'菜单管理',path:'/sys/menu'},
            { title: '机构管理', path: '/sys/org' },
            { title: '用户管理', path: '/sys/admin' },
            { title: '角色管理', path: '/sys/role' },
            { title: '系统日志', path: '/sys/logs' },
            { title: '资源点管理', path: '/sys/point' },
            { title: '线路站点管理', path: '/sys/road' },
            { title: '系统参数设置', path: '/sys/parameter' },
            { title: '代码生成', path: '/sys/code' },
            { title: '数据字典', path: '/sys/dictionary' }
          ]
        }
      ]

    }
  },
  computed: {
    ...mapState('d2admin/menu', [
      // 'aside',
      'asideCollapse'
    ])
  },
  watch: {
    // 折叠和展开菜单的时候销毁 better scroll
    asideCollapse (val) {
      this.scrollDestroy()
      setTimeout(() => {
        this.scrollInit()
      }, 500)
    },
    // 监听路由 控制侧边栏激活状态
    '$route.matched': {
      handler (val) {
        this.active = val[val.length - 1].path
        this.$nextTick(() => {
          if (this.aside.length > 0) {
            this.$refs.menu.activeIndex = this.active
          }
        })
      },
      immediate: true
    }
  },
  mounted () {
    this.scrollInit()
  },
  beforeDestroy () {
    this.scrollDestroy()
  },
  methods: {
    scrollInit () {
      this.BS = new BScroll(this.$el, {
        mouseWheel: true
        // 如果你愿意可以打开显示滚动条
        // scrollbar: {
        //   fade: true,
        //   interactive: false
        // }
      })
    },
    scrollDestroy () {
      // https://github.com/d2-projects/d2-admin/issues/75
      try {
        this.BS.destroy()
      } catch (e) {
        delete this.BS
        this.BS = null
      }
    }
  }
}
</script>
