<!--
 * @Author: your name
 * @Date: 2019-10-30 21:57:01
 * @LastEditTime: 2019-10-31 13:48:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \BASE\node_modules\zfs-component\src\zte-nav.vue
 -->
<template>
  <div class="zte-nav" :class="{ 'is-card': card }">
    <transition-group name="list-complete" class="tab-list" ref="navTab">
      <span
        v-for="(tab, index) of currentTabs"
        :key="tab.path.replace('/', '')"
        class="list-complete-item"
        :class="activeIndex === index ? 'is-active': ''">
        <el-button
          :type="index === activeIndex ? 'primary' : 'default'"
          :round="!card"
          @click.native="handlerClick(tab, index)">
          {{ tab.name }}
        </el-button>
        <el-badge class="badge" @click.native="remove(tab, index)">
          <i class="el-icon-close" v-if="card"></i>
          <i class="el-icon-error" v-else></i>
        </el-badge>
      </span>
      <el-popover
        key="more"
        width="200"
        popper-class="hidden-tabs-popup"
        v-if="tabsLen > maxLen"
        placement="bottom-end"
        trigger="hover">
        <el-scrollbar>
          <ul class="hidden-list">
            <li
              v-for="(tab, index) of hiddenTabs"
              :key="tab.path.replace('/', '')"
              class="list-complete-item"
              :data-index="index + maxLen"
              :class="{active: (index + maxLen) === activeIndex}"
              @click="handlerClick(tab, index + maxLen)">
              <span class="name">
                {{tab.name}}
              </span>
              <span class="close" :class="card ? 'el-icon-close' : 'el-icon-error'" @click.stop="remove(tab, index + maxLen)"></span>
            </li>
          </ul>
        </el-scrollbar>
        <span
          slot="reference"
          class="is-more">
          <el-button :round="!card" :type="activeIndex >= maxLen ? 'primary' : 'default'">{{$t('更多')}}</el-button>
        </span>
      </el-popover>
    </transition-group>
    <span class="quick-operate">
      <i class="icon el-icon-menu" @click="gotoIndex"></i>
      <i class="icon el-icon-refresh" @click="handlerRefresh"></i>
      <i class="icon el-icon-circle-close" @click="hanlerClear"></i>
    </span>
  </div>
</template>

<script>
export default {
  name: 'zteNav',
  props: {
    card: Boolean,
  },
  data() {
    return {
      tabs: [],
      activeIndex: 0,
    };
  },
  computed: {
    tabsLen() {
      return this.tabs.length;
    },
    maxLen() {
      let length = 100;
      const tabWidth = (this.$refs.navTab && this.$refs.navTab.$el && this.$refs.navTab.$el.scrollWidth) || 1000;
      const maxWidth = tabWidth - 74;
      this.tabs.reduce((prev, cur, index) => {
        const total = prev + this.getTabWidth(cur.name && cur.name.length);
        if (prev <= maxWidth && total >= maxWidth) {
          length = parseInt(index);
        }
        return total;
      }, 0);
      return length;
    },
    currentTabs() {
      const tabs = this.tabs.slice(0, this.maxLen);
      return tabs;
    },
    hiddenTabs() {
      let tabs = [];
      if (this.tabsLen > this.maxLen) {
        tabs = this.tabs.slice(this.maxLen, this.tabsLen);
      }
      return tabs;
    },
  },
  created() {
    this.add(this.$route);
    window.onresize = () => {
      this.tabs.push({ name: '', path: '/' });
      this.$nextTick(() => {
        this.tabs.splice(this.tabsLen - 1, 1);
      });
    };
  },
  methods: {
    add(tab) {
      if (this.tabs.some(t => t.path === tab.path)) {
        this.activeIndex = this.tabs.findIndex(t => t.path === tab.path);
        return;
      }
      this.tabs.unshift(tab);
      this.activeIndex = 0;
    },
    remove(tab, index) {
      this.$emit('remove-route', tab);
      this.tabs.splice(index, 1);
      if (this.activeIndex > index) {
        this.activeIndex--;
      } else if (this.activeIndex === index) {
        if (index > 0) {
          this.activeIndex--;
        }
        const newTab = this.tabs[this.activeIndex];
        this.$emit('active-change', newTab);
      }
    },
    handlerClick(tab, index) {
      this.activeIndex = index;
      this.$emit('active-change', tab);
    },
    gotoIndex() {
      this.$router.push('/index');
    },
    handlerRefresh() {
      this.$emit('refresh');
    },
    hanlerClear() {
      this.$confirm(`您即将关闭${this.tabsLen}个标签, 是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.tabs = [];
        this.$router.push('/index');
        this.$emit('clear');
      }).catch();
    },
    getTabWidth(len) {
      const fontWidth = this.$i18n.locale === 'zh-CN' ? 14 : 9;
      const padding = 30 * 2;
      const margin = this.card ? 0 : 15;
      const width = len * fontWidth + padding + margin;
      return width;
    },
  },
};
</script>
