<template>
  <div class="left-menu">
    <el-submenu v-if="menu.children && menu.children.length >= 1 && menu.children[0].isShow == 1" :index="menu.id" :popper-append-to-body="false">
      <template slot="title">
        <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`" /></svg>
        <span v-show="$store.state.sidebarFold===false">{{ menu.name }}</span>
      </template>
      <sub-menu v-for="item in menu.children" :key="item.id" :menu="item" />
    </el-submenu>
    <el-menu-item v-else ref="li" :index="menu.id" @click="openMenuHandle(menu.id)">
      <!-- :href="isBrowserTabOpen(menu) ? iframeURL: 'javascript:;'"
      :target="isBrowserTabOpen(menu) ? '_blank' : '_self'" -->
      <a>
        <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`" /></svg>
        <span v-show="$store.state.sidebarFold===false">{{ menu.name }}</span>
      </a>
    </el-menu-item>
  </div>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu.vue'
export default {
  inject: ['refresh'],
  name: 'SubMenu',
  components: {
    SubMenu
  },
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      browserTabOpenList: [
        // '1353981045241810946', // 写死，另打开iframe
        // '1344097112555024386'
      ],
      iframeURL: '',
      routerName: ''
    }
  },
  watch: {
    $route(val) {
      // console.log(val)
      this.routerName = val.name
    }
  },
  created() {
    this.routerName = this.$route.name
    // this.$nextTick(() => {
    //   if (this.$refs.li) {
    //     const $li = this.$refs.li.$el
    //     const $a = $li.firstElementChild
    //     if ($a) {
    //       let pl = '0'; let pr = '0'
    //       if ($li.currentStyle) {
    //         pl = $li.currentStyle.paddingLeft
    //         pr = $li.currentStyle.paddingRight
    //       } else {
    //         pl = window.document.defaultView.getComputedStyle($li, null).paddingLeft
    //         pr = window.document.defaultView.getComputedStyle($li, null).paddingRight
    //       }
    //       $li.setAttribute('style', 'padding-left: 0; padding-right: 0;')
    //       $a.setAttribute('style', `padding-left: ${pl}; padding-right: ${pr};`)
    //     }
    //   }
    // })
  },
  methods: {
    // 判断menuId
    isMenuIdFun(menuId, dynamicMenuRoutes, callback) {
      dynamicMenuRoutes.forEach((item) => {
        if (item.meta.menuId === menuId) {
          return callback && callback(item)
        } else if (item.children.length > 0) {
          this.isMenuIdFun(menuId, item.children, callback)
        }
      })
    },
    // 是否通过浏览器Tab打开菜单
    isBrowserTabOpen(menu) {
      return this.browserTabOpenList.filter(item => item === menu.id).length >= 1
      // return false
    },
    // 获取浏览器Tab打开菜单URL
    getBrowserTabOpenURL(menuId) {
      this.isMenuIdFun(menuId, window.SITE_CONFIG.dynamicMenuRoutes, (item) => {
        this.iframeURL = item.meta.iframeURL
      })
    },
    // 点击菜单获取id
    openMenuHandle(menuId) {
      this.$store.commit('activeIndexFun', menuId)
      this.isMenuIdFun(menuId, window.SITE_CONFIG.dynamicMenuRoutes, (item) => {
        // console.log(item)
        setTimeout(() => {
          if (this.routerName === item.name) {
            this.refresh()
          } else {
            // console.log(item.name)
            this.$router.push({
              name: item.name
            })
          }
        }, 200)
      })
    }
  }
}
</script>

<style lang="scss">
.aui-sidebar__menu {
  .el-menu-item > a {
    display: block;
    color: inherit;
    text-decoration: none;
  }
}
.left-menu {
  .el-menu-item ,.el-submenu__title{
      padding-left: 4px !important;
  }
  .el-menu--inline {
    padding-left: 10px;
  }
  .el-submenu__icon-arrow {
    top: 60%;
  }
}

</style>
