<!--
<template>
  <div style="margin: -23px -24px 24px -24px">
    &lt;!&ndash;<a-dropdown :trigger="['contextmenu']" overlayClassName="multi-tab-menu-wrapper">
      <a-menu slot="overlay">
        <a-menu-item key="1">1st menu item</a-menu-item>
        <a-menu-item key="2">2nd menu item</a-menu-item>
        <a-menu-item key="3">3rd menu item</a-menu-item>
      </a-menu>
    </a-dropdown>&ndash;&gt;
    <a-tabs
      hideAdd
      v-model="activeKey"
      type="editable-card"
      :tabBarStyle="{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }"
      @edit="onEdit"
    >
      <a-tab-pane v-for="page in pages" :style="{ height: 0 }" :tab="page.meta.title" :key="page.fullPath" :closable="pages.length > 1">
      </a-tab-pane>
      <template slot="renderTabBar" slot-scope="props, DefaultTabBar">
        <component :is="DefaultTabBar" {...props} />
      </template>
    </a-tabs>
  </div>
</template>
-->
<script>
export default {
  // 组件名称
  name: 'MultiTab',

  // 组件的初始数据
  data () {
    return {
      fullPathList: [], // 存储所有标签页的完整路径
      pages: [], // 存储所有Vue路由对象
      activeKey: '', // 当前激活的标签页的key
      newTabIndex: 0 // 新标签页的索引（在这段代码中未使用）
    }
  },

  // 组件创建后执行的逻辑
  created () {
    // 初始化时将当前路由添加到pages和fullPathList中
    this.pages.push(this.$route)
    this.fullPathList.push(this.$route.fullPath)
    // 选择最后一个路径作为当前激活的路径
    this.selectedLastPath()
  },

  methods: {
    // 调用编辑方法，根据action参数执行添加或删除操作
    onEdit (targetKey, action) {
      this[action](targetKey)
    },

    // 从pages和fullPathList中移除指定的标签页
    remove (targetKey) {
      // 过滤掉要移除的标签页
      this.pages = this.pages.filter(page => page.fullPath !== targetKey)
      this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
      // 如果当前激活的标签页被关闭，则跳转到最后一个还存在的标签页
      if (!this.fullPathList.includes(this.activeKey)) {
        this.selectedLastPath()
      }
    },

    // 选择最后一个标签页作为当前激活的标签页
    selectedLastPath () {
      this.activeKey = this.fullPathList[this.fullPathList.length - 1]
    },

    // 右键菜单中的关闭当前标签功能
    closeThat (e) {
      this.remove(e)
    },

    // 右键菜单中的关闭左侧所有标签功能
    closeLeft (e) {
      const currentIndex = this.fullPathList.indexOf(e)
      if (currentIndex > 0) {
        this.fullPathList.forEach((item, index) => {
          if (index < currentIndex) {
            this.remove(item)
          }
        })
      } else {
        this.$message.info('左侧没有标签')
      }
    },

    // 右键菜单中的关闭右侧所有标签功能
    closeRight (e) {
      const currentIndex = this.fullPathList.indexOf(e)
      if (currentIndex < (this.fullPathList.length - 1)) {
        this.fullPathList.forEach((item, index) => {
          if (index > currentIndex) {
            this.remove(item)
          }
        })
      } else {
        this.$message.info('右侧没有标签')
      }
    },

    // 右键菜单中的关闭全部标签（除了当前标签）功能
    closeAll (e) {
      const currentIndex = this.fullPathList.indexOf(e)
      this.fullPathList.forEach((item, index) => {
        if (index !== currentIndex) {
          this.remove(item)
        }
      })
    },

    // 右键菜单点击事件处理函数
    closeMenuClick ({ key, item, domEvent }) {
      const vkey = domEvent.target.getAttribute('data-vkey')
      switch (key) {
        case 'close-right':
          this.closeRight(vkey)
          break
        case 'close-left':
          this.closeLeft(vkey)
          break
        case 'close-all':
          this.closeAll(vkey)
          break
        default:
        case 'close-that':
          this.closeThat(vkey)
          break
      }
    },

    // 渲染右键菜单
    renderTabPaneMenu (e) {
      return (
        <a-menu {...{ on: { click: this.closeMenuClick } }}>
          <a-menu-item key="close-that" data-vkey={e}>关闭当前标签</a-menu-item>
          <a-menu-item key="close-right" data-vkey={e}>关闭右侧</a-menu-item>
          <a-menu-item key="close-left" data-vkey={e}>关闭左侧</a-menu-item>
          <a-menu-item key="close-all" data-vkey={e}>关闭全部</a-menu-item>
        </a-menu>
      )
    },

    // 渲染标签页及其右键菜单
    renderTabPane (title, keyPath) {
      const menu = this.renderTabPaneMenu(keyPath)

      return (
        <a-dropdown overlay={menu} trigger={['contextmenu']}>
          <span style={{ userSelect: 'none' }}>{ title }</span>
        </a-dropdown>
      )
    }
  },

  // 监听路由变化
  watch: {
    '$route': function (newVal) {
      // 更新当前激活的标签页
      this.activeKey = newVal.fullPath
      // 如果新路由不在fullPathList中，则添加它及其对应的路由对象
      if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
        this.fullPathList.push(newVal.fullPath)
        this.pages.push(newVal)
      }
    },

    // 监听activeKey的变化，如果变化则导航到新的路径
    activeKey: function (newPathKey) {
      this.$router.push({ path: newPathKey })
    }
  },

  // 渲染组件
  render () {
    const { onEdit, $data: { pages } } = this
    const panes = pages.map(page => {
      return (
        <a-tab-pane
          style={{ height: 0 }}
          tab={this.renderTabPane(page.meta.title, page.fullPath)}
          key={page.fullPath} closable={pages.length > 1}
        >
        </a-tab-pane>)
    })

    return (
      <div class="ant-pro-multi-tab">
        <div class="ant-pro-multi-tab-wrapper">
          <a-tabs
            hideAdd // 隐藏添加按钮
            type={'editable-card'} // 标签页的类型为可编辑卡片
            v-model={this.activeKey} // 绑定当前激活的标签页
            tabBarStyle={{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }} // 自定义标签栏的样式
            {...{ on: { edit: onEdit } }}> // 监听编辑事件
            {panes} // 渲染所有的标签页
          </a-tabs>
        </div>
      </div>
    )
  }
}
</script>