<template>
  <div id="app">
    <div class="app-content">
      <sidebar v-if="showSidebar"></sidebar>
      <div class="app-content-main flex1">
        <topbar v-if="showSidebar"></topbar>
        <tabbar
          v-if="showSidebar"
          :clickIndex="nowindex"
          :dataList="editableTabs"
          @itemclick="itemclick"
          @remove="remove"
        ></tabbar>
        <keep-alive :include="include">
          <router-view class="app-content-main-view flex1" />
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import { menuRouter, otherRouter } from '@/router/routes.js';
import store from '@/store/index';
import sidebar from './components/sidebar/index.vue';
import topbar from './components/topbar.vue';
import tabbar from './components/tabbar.vue';
export default {
  name: 'App',
  components: {
    sidebar,
    topbar,
    tabbar,
  },
  data() {
    return {
      include: [],
      menuDatas: [],
      otherDatas: [],
      allDatas: [],
      editableTabs: [],
      // nowindex:0
    };
  },
  mounted() {},
  computed: {
    showSidebar() {
      return this.$route.name != 'login';
    },
    nowindex() {
      return store?.getters?.getTabIndex;
    },
  },
  created() {
    menuRouter.forEach((item) => {
      if (item.name) {
        this.menuDatas.push(item);
        this.allDatas.push(item);
      }
    });
    otherRouter.forEach((item) => {
      if (item.name && item.name != 'login') {
        this.otherDatas.push(item);
        this.allDatas.push(item);
      }
    });
    this.editableTabs = store?.getters?.getTabList;
  },
  watch: {
    nowindex(val, newval) {
      this.$router.push(this.editableTabs[val].path);
    },
    $route(to, from) {
      if (to.meta.keepAlive) {
        !this.include.includes(to.name) && this.include.push(to.name);
      }
      // 标签页
      if (to.name != 'login') {
        this.menuDatas.forEach((element) => {
          if (element.name == to.name) {
            let isclear = true;
            this.editableTabs.forEach((element2) => {
              if (element2.name == to.meta.title) {
                isclear = false; //当前页面为菜单页面且不在当前tab中
              }
            });
            if (isclear) {
              this.editableTabs = [];
            }
          }
        });
        let isAdd = true;
        this.editableTabs.forEach((element2, index) => {
          if (element2.name == to.meta.title) {
            isAdd = false; //当前页面在tab中
            // this.nowindex=index
            store.commit('SET_TABINDEX', index);
          }
        });
        if (isAdd) {
          this.editableTabs.push({ name: to.meta.title, path: to.path });
          // this.nowindex=this.editableTabs.length-1
          store.commit('SET_TABINDEX', this.editableTabs.length - 1);
        }
        store.commit('SET_TABLIST', this.editableTabs);
      }
    },
  },
  methods: {
    remove(item, index) {
      if (this.nowindex != index) {
        if (this.nowindex > index) {
          store.commit('SET_TABINDEX', this.nowindex - 1);
        }
      } else {
        store.commit('SET_TABINDEX', index - 1);
      }
      this.editableTabs.splice(index, 1);
      store.commit('SET_TABLIST', this.editableTabs);
    },
    itemclick(item, index) {
      store.commit('SET_TABINDEX', index);
    },
  },
};
</script>

<style lang="less">
@import 'app.less';
</style>
