<template>
  <div class="center" style="width: 65%;height: 100%;overflow: scroll">
    <div @click="handleMenu(item,index)" class="tag-button green center" :class="{ 'actvieBorder': tagIndex == index }"  v-for="(item,index) of tagList">
      {{item.name}}
    </div>
    <div @click="handleMenu(item,index)" class="tag-button green center" :class="{ 'actvieBorder': tagIndex == index }"  v-for="(item,index) of menu">
      {{item.name}}
    </div>
  </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import {fullscreenToggel} from "../util/util";
    import {resetRouter} from "../router/router";

    export default {
        name: "my-top-menu",
      data(){
          return {
            tagList: [
              {name: '网格看板',path: '/grid/viewpanel'},
              // {name: '数据大屏',path: '/grid/dataPage'},
              {name: '网格划分',path: '/grid/divide'},
              // {name: '人员管理',path: '/grid/myLayout/memberList'},
              // {name: '设备管理',path: '/grid/myLayout/deviceList'},
              {name: '网格管理',path: '/community/agency'},
              {name: '全屏',path: ''},
              {name: '退出',path: ''},
            ],
          }
      },
      computed: {
        ...mapGetters(["tagIndex","menu"]),
      },
      created() {
        console.log(this.menu,"/*****************");
      },
      methods: {
        handleScreen() {
          fullscreenToggel();
        },
        logout() {
          this.$confirm('退出系统, 是否继续?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            this.$store.dispatch("LogOut").then(() => {
              resetRouter();
              this.$router.push({path: "/login"});
            });
          });
        },
        handleMenu(menu,index){
          switch (menu.name) {
            case '退出': this.logout();
              break;
            case '全屏': this.handleScreen();
              break;
            default: this.$router.push({path: this.tagList[index].path});
              this.$store.commit('SET_TAG_INDEX',index);
          }
        },
      }
    }
</script>

<style scoped>
  .green{
    color: rgba(0, 186, 189, 1);
  }
  .full{
    width: 100%;
    height: 100%;
  }
  .center{display: flex;justify-content: center;align-items: center;}
  .tag-button{
    width: 100px;
    height: 30px;
    cursor: pointer;
    margin-left: 20px;
    -webkit-transition: border-color .3s,background-color .3s,color .3s;
    transition: border-color .3s,background-color .3s,color .3s;
    background: url('/data/bg-grid.png') no-repeat center/cover;
  }
  .actvieBorder{
    border: solid 2px #22ddda;

  }
</style>
