<template>
  <div class="my-top-menu">
    <el-button v-for="(item,index) of tagListLeft" :key="item" @click="handleMenu(item,index)" class="menu-button" :class="{'button-active': tagIndex == index}">
      {{item.name}}</el-button>
    <!--    <el-button  v-for="(item,index) in items" :index="item.id+''" @click.native="openMenu(item,index)" :key="index" class="menu-button"-->
    <!--                :class="{'button-active': tagIndex == index+tagListLeft.length}"-->
    <!--      >{{item.name}}</el-button>-->
    <el-button v-for="(item,index) of tagListRight"
               :class="{'button-active': tagIndex == index+tagListLeft.length}+items.length"
               :key="item" @click="handleMenu(item,index)" class="menu-button">
      {{item.name}}</el-button>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {fullscreenToggel} from "@/util/util";
import {resetRouter} from "@/router/router";
import {getRoutes} from "../../../api/system/menu";

export default {
  name: "my-top-menu",
  data() {
    return {
      tagListLeft: [
        // {name: '指挥中心',path: '/mainScreen'},
        // {name: '基层治理',path: '/grid/divide'},
      ],
      tagListRight: [
        {name: '全屏',path: ''},
        {name: '返回',path: ''},
      ],
      activeIndex: "0",
      items: [],
    };
  },
  inject: ["index"],
  created() {
    this.getMenu();
  },
  computed: {
    ...mapGetters(["tagIndex","menu"])
  },
  methods: {
    openHome(itemHome) {
      this.index.openMenu(itemHome);
      this.$router.push({
        path: this.$router.$avueRouter.getPath({name: itemHome.name, src: ''}, {})
      });
    },
    handleMenu(menu,index){
      switch (menu.name) {
        case '返回':
          this.$router.back(-1);
          this.$store.commit("SET_TAG_INDEX",index+this.items.length+this.tagListLeft.length)
          break;
        case '全屏': this.handleScreen();
          this.$store.commit("SET_TAG_INDEX",index+this.items.length+this.tagListLeft.length)
          break;
        case '指挥中心': this.$router.push({path: this.tagListLeft[index].path});
          this.$store.commit("SET_TAG_INDEX",index)
          break;
        case '基层治理': this.$router.push({path: this.tagListLeft[index].path});
          this.$store.commit("SET_TAG_INDEX",index)
          break;
        default: ;
      }
    },
    handleScreen() {
      fullscreenToggel();
    },
    logout() {
      this.$confirm('退出系统, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          resetRouter();
          this.$router.push({path: "/login"});
        });
      });
    },
    async openMenu(item,index) {
      this.$store.commit("SET_TAG_INDEX",this.tagListLeft.length+index)
      let menu = await this.$store.dispatch("GetMenu",item.id)
      if(menu.length>0){
        await this.$router.push({
          path: menu[0].children[0].path
        })
      }
    },
    getMenu() {
      this.$store.dispatch("GetTopMenu").then(res => {
        this.items = res;
      });
    },
    generateTitle(item) {
      return this.$router.$avueRouter.generateTitle(
        item.name,
        (item.meta || {}).i18n
      );
    },
  }
};
</script>
<style scoped>
.my-top-menu{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 2px 20px;
  overflow-x: scroll;
}

.menu-button{
  width: 150px;
  height: 40px;
  text-align: center ;
  background: transparent;
  border: solid 1px #0f3021;
  background: url("/data/bg-grid.png") center/cover;
  color: rgba(0, 186, 189, 1);
  font-size: 18px;
  margin: 10px;
}
.menu-button:hover,.menu-button:focus{
  background: url("/data/bg-grid.png") center/cover;
}
.button-active{
  border: solid 1px #8e8e8e;
  color: #dddddd;
}
</style>
