<template>
  <div class="sideMenu vertical-scrollbar">
    <div class="logo">
      <img
        v-if="project&&!['YINXIANGMAZU','demo','hangzhousuodao'].includes(project)"
        src="~imgs/logo.png">
      <div
        class="title"
        v-else>{{ pageTitle }}</div>
    </div>
    <a-menu
      :default-selected-keys="selectedKey"
      :default-open-keys="openKeys"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
      @click="handleClick"
      :selected-keys="selectedKey"
      :open-keys="openKeys"
      @openChange="onOpenChange"
    >
      <template v-for="item in activeRoutes">
        <a-menu-item
          v-if="!item.children"
          :key="item.key"
        >
          <a-icon type="pie-chart" />
          <span>{{ item.title }}</span>
        </a-menu-item>
        <sub-menu
          v-else
          :title="item.key"
          :menu-info="item"
          :key="'a'+item.key"
        />
      </template>
    </a-menu>
    <div style="margin-top: 20px;" v-if="['demo','mianfeiyoutaizhou'].includes(project_name)">
      <a-button class="ant-btn ant-btn-primary ant-btn-bg" href="https://tourismbackend.pcleartv.cn/frontend/admin/#/login" target="_blank">免费游用户管理</a-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SubMenu from './SubMenu'
export default {
  components: {
    'sub-menu': SubMenu
  },
  computed: {
    ...mapGetters([
      'permission_routers',
      'sidebar',
      'appStatus'
    ]),
    collapsed () {
      return !this.sidebar.opened
    },
    /*
    activeRoutes () {
      return this.permission_routers.filter(item => {
        return !item.hidden && item.children
      })
    },
    */
    activeRoutes () {
      const ar = this.permission_routers.filter(item => {
        return !item.hidden && item.children
      })
      // 芳兰湖项目（和测试demo）定制显示'租赁票种管理'，其余项目不显示
      const enableRentTicketProjects = ['demo', 'fanglanhu'] // 允许显示租赁票种的项目，不在此名单中的需过滤掉租赁票种路由
      if (!enableRentTicketProjects.includes(this.project_name)) {
        ar.forEach(route => {
          route.children = route.children.filter(item => item.meta.title !== '租赁票种管理')
        })
      }

      // key为项目名，value为待删除的菜单title组成的数组
      const titlesToRemove = {
        'YINXIANGMAZU': [''], // TODO: 添加印象妈祖项目要删除的左侧菜单入口
        'demo': ['要删除的票种管理1', '要删除的票种管理2', '要删除的票种管理3', '要删除的票种管理3']
      }

      // 定制化按项目名删除不需要的左侧菜单入口
      if (Object.keys(titlesToRemove).includes(this.project_name)) {
        const projectName = this.project_name
        ar.forEach(route => {
          route.children = route.children.filter(item => !titlesToRemove[projectName].includes(item.meta.title) && !item.meta.hidden)
        })
        return ar
      }

      return ar
    },

    selectedKey () {
      return [this.$route.path]
    },
    rootSubmenuKeys () {
      return this.activeRoutes.map(i => i.name)
    }
  },
  created () {
    this.updateMenu()
  },
  data () {
    return {
      openKeys: [],
      selectedKeys: [],
      project_name: localStorage.mgt_project,
      cachedOpenKeys: []
    }
  },
  methods: {
    updateMenu () {
      const routes = this.$route.matched.concat()
      this.selectedKeys = [routes.pop().path]
      const openKeys = []
      routes.forEach((item) => {
        openKeys.push(item.path.split('/')[1])
      })
      this.collapsed ? this.cachedOpenKeys = openKeys : this.openKeys = openKeys
    },
    toggleCollapsed () {
      this.collapsed = !this.collapsed
    },
    handleClick (e) {
      e.key && this.$router.push(e.key)
    },
    onOpenChange (openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    }
  },
  watch: {
    $route: {
      handler (val) {
        this.updateMenu()
      },
      deep: true
    },
    collapsed (val) {
      if (val) {
        this.cachedOpenKeys = this.openKeys
        this.openKeys = []
      } else {
        this.openKeys = this.cachedOpenKeys
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.logo {
  text-align: center;
  img {
    height: 50px;padding: 10px 0;
  }
  &:after {
    display: block; height: 0;  content: '';
  }
  .title {
    padding: 20px 0;  font-size: 20px; color: #fff; text-shadow: 1px 1px 0 #000; opacity: .9;
  }
}

</style>
