<template>
  <div class="ec-breadcrumb-nav-view">
    <el-tabs v-model="activeKey" type="border-card" closable @tab-remove="remove" @tab-click="onTabClick">
      <el-tab-pane v-for="pane in panes" :key="pane.key" :label="pane.title" :name="pane.path"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { TabPane, Tabs } from "element-ui";
import { Watch } from "vue-property-decorator";

interface Pane {
  key?: string;
  title?: string;
  path?: string;
  params?: any;
}

@Component({
  name: "BreadcrumbNav",
  components: {
    "el-tabs": Tabs,
    "el-tab-pane": TabPane
  }
})
export default class BreadcrumbNav extends Vue {
  activeKey = "";
  panes: Pane[] = []; // 面包屑列表

  @Watch("$route", { immediate: true })
  onRouteChanged() {
    this.navPosition();
  }

  /**
   * @description: 导航定位
   * @author ChenRui
   * @date 2020/12/29 20:23
   */
  navPosition(): void {
    const route = this.$route;
    if (route.path === "/") {
      return;
    }
    const key = route.path;
    let pane: Pane | undefined = this.panes.find(item => item.key === key);
    if (pane === undefined) {
      const title = route.meta && route.meta.name ? route.meta.name : "尚未设置";
      pane = { key: key, title: title, path: route.path, params: route.params.params };
      this.panes.push(pane);
    } else {
      pane.params = route.params.params;
    }
    this.activeKey = pane.path!;
  }

  /**
   * @description: 面包屑单击处理，根据地质进行页面路由
   * @author ChenRui
   * @date 2020/12/29 20:22
   */
  onTabClick(e: any) {
    const pane: Pane = this.panes.find(item => item.key === e.name) || {};
    if (pane && pane.path != null && pane.path !== "" && pane.path !== this.$route.path) {
      this.$router.push({ path: pane.path, query: pane.params });
    }
  }

  /**
   * @description: 根据编号删除面包屑导航
   * @author ChenRui
   * @date 2020/12/29 20:22
   */
  remove(targetKey: string) {
    let activeKey: string = this.activeKey;
    let lastIndex = -1;
    this.panes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const panes = this.panes.filter(pane => pane.key !== targetKey);
    if (panes.length > 0 && activeKey === targetKey) {
      if (lastIndex >= 0) {
        activeKey = panes[lastIndex].key!;
      } else {
        activeKey = panes[0].key!;
      }
    }
    this.panes = panes;
    if (this.activeKey !== activeKey) {
      const pane: Pane = this.panes.find(item => item.key === activeKey) || {};
      this.$router.push({ path: pane.path, query: pane.params });
    }
    this.activeKey = activeKey;
  }
}
</script>

<style scoped lang="scss">
.ec-breadcrumb-nav-view {
  background-color: #cac8d6;
  padding-top: 8px;
  ::v-deep {
    .el-tabs {
      height: 32px;
      border: 0;
      box-sizing: border-box;
      box-shadow: none;
      .el-tabs__header {
        height: 100%;
        background-color: #cac8d6;
        border: 0;
        .el-tabs__nav-wrap {
          height: 100%;
          .el-tabs__nav-prev {
            height: 32px;
            line-height: 32px;
            width: 20px;
            text-align: center;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
            background-color: #dadae4;
            i {
              color: #666666;
              font-weight: 600;
            }
          }
          .el-tabs__nav-next {
            height: 32px;
            line-height: 32px;
            width: 20px;
            text-align: center;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
            background-color: #dadae4;
            i {
              color: #666666;
              font-weight: 600;
            }
          }
          .el-tabs__nav-scroll {
            height: 100%;
            margin: 0;
            .el-tabs__nav {
              height: 100%;
              .el-tabs__item {
                height: 100%;
                line-height: 32px;
                padding-top: 1px;
                margin: 0;
                border: 0;
                color: #8e8e94;
                background-color: #d7d7e1;
                font-size: 12px;
                position: relative;
                border-top-right-radius: 5px;
                border-top-left-radius: 5px;
                &.is-active {
                  background-color: #e9eaf2;
                  color: #222224;
                }
                .el-icon-close {
                  font-weight: 600;
                }
              }
            }
          }
        }
      }
      .el-tabs__content {
        display: none;
      }
    }
  }
}
</style>
