<template>
  <a-layout id="components-layout-demo-top-side-2">
    <!-- 顶部导航 -->
    <MHeader />
    <a-layout style="margin-top:8px">
      <!-- 侧边栏导航 -->
      <SildeMenu :collapsed="collapsed" @select="selectOpen" />
      <a-layout>
        <div class="flex-start" style="border-bottom: 1px solid #001529">
          <!-- 隐藏按钮 -->
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
          <!-- 返回按钮 -->
          <a-icon class="routers" type="left" @click="$router.back()" />
          <!-- 面包屑导航 -->
          <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>后台管理</a-breadcrumb-item>
            <a-breadcrumb-item>{{this.breadcrumb.currentkey}}</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
        <div class="tags-bar-container">
          <div class="tags-content">
            <swiper ref="mySwiper" :options="swiperOption">
              
              <swiper-slide v-for="(tag, index) in tabsList" :key="index">
                <a-tag
                :color="tag.key === currentKey ? '#108ee9' : ''"
                :key="tag.key"
                :closable="index !== 0"
                @close="() => handleClose(tag)"
                @click="handleChange(tag)"
                >
                  {{ tag.title }}
                </a-tag>
              </swiper-slide>
            </swiper>
          </div>
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
              更多操作 <a-icon type="setting" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item key="0" @click="checkSetting(0)">关闭当前</a-menu-item>
              <a-menu-item key="1" @click="checkSetting(1)">关闭其他</a-menu-item>
              <a-menu-item key="2" @click="checkSetting(2)">关闭左侧</a-menu-item>
              <a-menu-item key="3" @click="checkSetting(3)">关闭右侧</a-menu-item>
              <a-menu-item key="4" @click="checkSetting(4)">关闭全部</a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
        <!-- <div class="tabs">
          <template v-for="(tag, index) in tabsList">
            <a-tag
            :color="tag.key === currentKey ? '#108ee9' : ''"
            :key="tag.key"
            :closable="index !== 0"
            @close="() => handleClose(tag)"
            @click="handleChange(tag)"
            >
              {{ tag.title }}
            </a-tag>
          </template>
        </div> -->
        <!-- <a-tabs
          v-model="activeKey"
          type="editable-card"
          hide-add
          @edit="onEdit"
          @change="eventChange"
        >
          <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title"> -->
            <a-layout-content
              class="silderbar"
              :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px',maxHeight:'calc(100vh - 24px - 8px - 48px - 92px)', overflowY:'auto'}"
            >
              <div>
                <div class="bar">
                  <div class="tips">
                    <a-alert banner message="部分组件还没有完成，请大家多多担待~" type="info" close-text="关闭" />
                  </div>
                  <!-- <keep-alive> -->
                    <router-view></router-view>
                  <!-- </keep-alive> -->
                </div>
              </div>
            </a-layout-content>
          <!-- </a-tab-pane> -->
        <!-- </a-tabs> -->
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script>
/**
 * 当前注释的部分代码没有经过优化
 * 有一定问题，由于router-view的重复渲染，导致页面变得卡顿
 * 使用的时候一定要注意
 * 这里目前有一个解决思路是把单页组件化
 */
import MHeader from "@/components/HeaderMenu.vue";
import SildeMenu from "@/components/SildeMenu.vue";
import { mapState, mapMutations } from "vuex";
import { swiper, swiperSlide } from 'vue-awesome-swiper'
// import { Menu } from "./config/config";
export default {
  components: {
    MHeader,
    SildeMenu,
    swiper,
    swiperSlide
  },
  data() {
    // 把菜单多维数组变成一维数组
    // const tempRouters = Menu.map((ele) => {
    //   return ele.children.map((item) => {
    //     return {
    //       ...item,
    //       faKey: ele.key,
    //       system: ele.system,
    //     };
    //   });
    // }).flat();
    // let panes = []
    return {
      collapsed: false,
      breadcrumb: {},
      swiperOption: {
        paginationClickable: true,
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        scrollbar: '.swiper-scrollbar',
        speed: 300,
        slidesPerView :'8'
      },
      // tempRouters,
      // activeKey: "",
      // panes: [],
      // newTabIndex: 0,
    };
  },
  created() {},
  computed: {
    ...mapState(["currentKey", "tabsList"]),
  },
  mounted() {
    this.breadcrumb = {
      currentkey: this.currentKey,
    };
  },
  methods: {
    ...mapMutations(["setCurrentKey","closeTab","closeOthers","closeThis","closeLeft","closeRight","closeAll"]),
    selectOpen(args) {
      this.breadcrumb = args;
    },
    handleClose(removedTag) {
      this.closeTab(removedTag)
    },
    handleChange(tag) {
      console.log(tag)
      this.$router.push(`/${tag.key}`);
      this.$store.commit('setCurrentKey', tag.key)
    },
    checkSetting(index) {
      let name = this.$route.path.replace("/","")
      switch(index) {
        case 0:
        this.closeThis(name)
        this.$router.push('/home');
        break;
        case 1:
        this.closeOthers(name)
        break;
        case 2:
        this.closeLeft(name)
        break;
        case 3:
        this.closeRight(name)
        break;
        default:
        this.closeAll()
        this.$router.push('/home');
        break;
      }
    },
    // eventChange(key) {
    //   this.breadcrumb.currentkey = key;
    //   this.activeKey = key;
    //   // this.setCurrentKey(key);
    //   // this.$router.push("/" + key);
    // },
    // onEdit(targetKey, action) {
    //   console.log(targetKey, action);
    //   this.breadcrumb.currentkey = targetKey;
    //   this.activeKey = targetKey;
    //   if (this.panes.length <= 1) {
    //     return;
    //   } else {
    //     this[action](targetKey);
    //   }
    // },
    // remove(targetKey) {
    //   let activeKey = this.activeKey;
    //   let lastIndex;
    //   this.panes.forEach((pane, i) => {
    //     if (pane.key === targetKey) {
    //       lastIndex = i - 1;
    //     }
    //   });
    //   const panes = this.panes.filter((pane) => pane.key !== targetKey);
    //   if (panes.length && activeKey === targetKey) {
    //     if (lastIndex >= 0) {
    //       activeKey = panes[lastIndex].key;
    //     } else {
    //       activeKey = panes[0].key;
    //     }
    //   }
    //   this.panes = panes;
    //   this.activeKey = activeKey;
    // },
  },
  watch: {
    currentKey(val) {
      this.breadcrumb.currentkey = val;
      this.activeKey = val;
      // let temp = this.tempRouters.filter((ele) => {
      //   return ele.key == val;
      // });
      // let has = this.panes.find((ele) => {
      //   return ele.key == val;
      // });
      // if (!has) {
      //   this.panes.push(temp[0]);
      // }
    },
  },
};
</script>

<style lang="less" scoped>
.swiper-container{
  width: 100%;
}
.swiper-wrapper{
  display: flex;
}
.tabs{
  display: flex;
  padding: 10px;
  overflow: auto;
  word-break: break-all;
  &::-webkit-scrollbar {
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(144, 147, 153, 0.5);
  }
  &::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: transparent;
  }
}
.tips {
  margin-bottom: 10px;
}
.bar {
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}
.silderbar::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.silderbar::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.silderbar::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #fff;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.silderbar {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow: auto;
  float: left;
  margin: 5px;
  border: none;
}
#components-layout-demo-top-side-2 .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-top-side-2 .trigger:hover {
  color: #1890ff;
}
.routers {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
}
.footer {
  line-height: 34px;
  background: #fff;
  padding: 0 24px;
  border-top: 1px solid #f0f2f5;
  border-bottom: 1px solid #f0f2f5;
  color: #7a8b9a;
  font-size: 16px;
}
// 标签导航
.tags-bar-container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding-right: 10px;
  padding-left: 10px;
  user-select: none;
  border-top: 1px solid #f6f6f6;

  .tags-content {
    width: calc(100% - 90px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    ::v-deep {
      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        height: 34px;
        line-height: 34px;
      }

      .ant-tag{
        line-height: 34px;
        width: 95%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .el-tabs__header {
        border-bottom: 0;

        .el-tabs__nav {
          border: 0;
        }

        .el-tabs__item {
          box-sizing: border-box;
          height: 34px;
          margin-right: 5px;
          line-height: 34px;
          border: 1px solid #ccc;
          border-radius: 5px;

          &.is-active {
            color: #f00;
            background: #00f;
            border: 1px solid #00f;
          }

          .el-icon-close {
            position: relative;
            top: -1px;
            right: -2px;
            width: 0;
            height: 14px;
            overflow: hidden;
            font-size: 12px;
            line-height: 14px;
            vertical-align: middle;
            transform-origin: 100% 50%;
          }

          /* &:nth-child(2) {
            padding: 0 20px;
            &:hover {
              padding: 0 13px;
            }
          } */
        }
      }
    }
  }
}
</style>