<!-- 标签页 license by http://eleadmin.com -->
<template>
  <locale-receiver component-name="ele">
    <template #default="locale">
      <a-tabs
        :hide-add="true"
        :animated="false"
        :active-key="active"
        type="editable-card"
        class="ele-admin-tabs"
        @tabClick="onTabClick"
        @edit="onTabEdit">
        <a-tab-pane key="/" :tab="homeTitle" :closable="false"/>
        <template v-for="t in tabs" :key="t.key">
          <a-tab-pane :tab="t.title" :closable="t.closable"/>
        </template>
        <template #tabBarExtraContent>
          <a-dropdown :overlay-style="{paddingRight: '5px', minWidth: '120px'}" placement="bottomRight">
            <div class="ele-admin-tabs-drop">
              <down-outlined/>
            </div>
            <template #overlay>
              <slot name="dropdown">
                <a-menu @click="onDropClick">
                  <a-menu-item key="fullscreen">
                    <div v-if="bodyFullscreen" class="ele-cell">
                      <compress-outlined/>
                      <div class="ele-cell-content">{{ locale.tabs.fullscreenExit }}</div>
                    </div>
                    <div v-else class="ele-cell">
                      <expand-outlined/>
                      <div class="ele-cell-content">{{ locale.tabs.fullscreen }}</div>
                    </div>
                  </a-menu-item>
                  <a-menu-item key="left">
                    <div class="ele-cell">
                      <arrow-left-outlined/>
                      <div class="ele-cell-content">{{ locale.tabs.closeLeft }}</div>
                    </div>
                  </a-menu-item>
                  <a-menu-item key="right">
                    <div class="ele-cell">
                      <arrow-right-outlined/>
                      <div class="ele-cell-content">{{ locale.tabs.closeRight }}</div>
                    </div>
                  </a-menu-item>
                  <a-menu-item key="other">
                    <div class="ele-cell">
                      <close-outlined/>
                      <div class="ele-cell-content">{{ locale.tabs.closeOther }}</div>
                    </div>
                  </a-menu-item>
                  <a-menu-item key="all">
                    <div class="ele-cell">
                      <close-circle-outlined/>
                      <div class="ele-cell-content">{{ locale.tabs.closeAll }}</div>
                    </div>
                  </a-menu-item>
                  <a-menu-item v-if="showRefresh" key="reload">
                    <div class="ele-cell">
                      <reload-outlined/>
                      <div class="ele-cell-content">{{ locale.tabs.reload }}</div>
                    </div>
                  </a-menu-item>
                </a-menu>
              </slot>
            </template>
          </a-dropdown>
        </template>
      </a-tabs>
    </template>
  </locale-receiver>
</template>

<script>
import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
import {
  DownOutlined,
  ReloadOutlined,
  ArrowLeftOutlined,
  ArrowRightOutlined,
  CloseOutlined,
  CloseCircleOutlined,
  ExpandOutlined,
  CompressOutlined
} from '@ant-design/icons-vue';

export default {
  name: 'EleProTabs',
  components: {
    LocaleReceiver,
    DownOutlined,
    ReloadOutlined,
    ArrowLeftOutlined,
    ArrowRightOutlined,
    CloseOutlined,
    CloseCircleOutlined,
    ExpandOutlined,
    CompressOutlined
  },
  emits: [
    'tab-change',
    'tab-remove',
    'tab-remove-all',
    'tab-remove-left',
    'tab-remove-right',
    'tab-remove-other',
    'fullscreen-body',
    'reload-page'
  ],
  props: {
    // 标签页数据
    tabs: Array,
    // 页签选中
    active: String,
    // 主页标题
    homeTitle: String,
    // 右侧下拉是否显示刷新按钮
    showRefresh: Boolean,
    // 是否再次点击选中tab刷新
    clickReload: Boolean,
    // 内容区域是否处于全屏状态
    bodyFullscreen: Boolean
  },
  methods: {
    /* 处理tab点击 */
    onTabClick(key) {
      if (this.active === key) {
        if (this.clickReload) {
          this.reloadPage();
        }
        return;
      }
      let tab;
      for (let i = 0; i < this.tabs.length; i++) {
        if (this.tabs[i].key === key) {
          tab = this.tabs[i];
          break;
        }
      }
      this.$emit('tab-change', tab ? tab : {key: key});
    },
    /* 处理tab编辑 */
    onTabEdit(key, action) {
      if (action === 'remove') {
        this.$emit('tab-remove', {name: key, active: this.active});
      }
    },
    /* 下拉菜单点击 */
    onDropClick(obj) {
      switch (obj.key) {
        // 关闭左侧
        case 'left':
          this.$emit('tab-remove-left', this.active);
          break;
        // 关闭右侧
        case 'right':
          if (this.active === '/') {
            this.removeAllTab();
          } else {
            this.$emit('tab-remove-right', this.active);
          }
          break;
        // 关闭其他
        case 'other':
          this.$emit('tab-remove-other', this.active);
          break;
        // 关闭全部
        case 'all':
          this.removeAllTab();
          break;
        // 刷新当前
        case 'reload':
          this.reloadPage();
          break;
        // 内容全屏
        case 'fullscreen':
          this.$emit('fullscreen-body', !this.bodyFullscreen);
          break;
      }
    },
    /* 关闭全部Tab */
    removeAllTab() {
      this.$emit('tab-remove-all', this.active);
    },
    /* 刷新页面 */
    reloadPage() {
      this.$emit('reload-page');
    }
  }
}
</script>
