<template>
  <a-menu :class="{'layout-menu-arrow':collapsed}" :selectedKeys="activeKeys" :openKeys="openKeys" @openChange="openChange" :mode="collapsed ? 'vertical' : 'inline'" :inline-collapsed="collapsed">
    <template v-for="item1 in menuList">
      <a-menu-item v-if="item1.children!== undefined && item1.children.length === 0" :key="item1.id" @click="clickMenuItem(item1)">
        <a-icon :type="item1.icon" />
        <span>{{item1.name}}</span>
      </a-menu-item>
      <a-sub-menu v-else :key="item1.id">
        <span slot="title">
          <a-icon :type="item1.icon" /><span>{{item1.name}}</span>
        </span>
        <a-menu-item v-for="item2 in item1.children" :key="item2.id" @click="clickMenuItem(item2)">
          <a-icon :type="item2.icon" v-if="item2.icon" />
          <span>{{item2.name}}</span>
        </a-menu-item>
      </a-sub-menu>
    </template>
  </a-menu>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "LayoutSide",
  components: {

  },
  data () {
    return {
      current: 0,
      routerList: [],
      collapsed: false,
      menuList: [],
      openKeys: [],
    };
  },
  computed: {
    activeKeys: {
      get () {
        return this.$store.state.app.activeKeys
      },
      set () {
      }
    },
    projType: {
      get () {
        return this.$store.state.app.projType
      },
      set () {
      }
    },
  },
  created () {
    this.menuList = JSON.parse(window.sessionStorage.getItem('menuList'))
    this.openKeys = this.$store.state.app.openKeys
  },
  methods: {
    ...mapMutations(`app`, [`addCard`]),
    openChange (openKeys) {
      this.openKeys = openKeys
      if (!this.collapsed)
        this.$store.commit('app/setOpenKeys', openKeys)
    },
    clickMenuItem (item) {
      this.$store.commit('app/setActiveKeys', [item.id])
      this.addCard({ title: item.name, key: item.id + '', code: item.code, keepAlive: item.keepAlive, router: item.frontActionUrl, closable: true })
    },
    changeCollapsed () {
      if (!this.collapsed) {
        this.openKeys = [];
      } else {
        this.openKeys = this.$store.state.app.openKeys
      }
      this.$nextTick(() => {
        this.collapsed = !this.collapsed;
        this.$emit("changeCollapsed", this.collapsed);
      })
    },
  },
  watch: {
    projType: {
      handler (value) {
        if (value) {
          this.menuList = JSON.parse(window.sessionStorage.getItem('menuList'))
          this.openKeys = [this.menuList[0].id]
          this.$store.commit('app/setOpenKeys', this.menuList[0].id)
        }
      }
    }
  }
}
</script>

 <style scoped lang="less">
.layout-menu-arrow {
  /deep/.ant-menu-submenu .ant-menu-submenu-title {
    padding: 0 14px !important;
  }
  /deep/.ant-menu-submenu .ant-menu-submenu-title .ant-menu-submenu-arrow {
    display: none;
  }
}
.ant-menu-inline .ant-menu-item {
  width: calc(100% + 0px) !important;
}
</style>