<template>
  <div style="background-color: rgba(20, 41, 87,.5);">
    <dv-border-box-2 title="dv-border-box-11" :color="['#1a3776', '#3f6a9a']" backgroundColor="rgba(20, 41, 87,.5)">
      <dv-border-box-8>
        <div class="nav">
          <div style="position: absolute;bottom: 0px;left: 10px;width: 40%;height: 45%;">
            <dv-decoration-8 style="width: 100%;height: 100%;" />
          </div>
          <div style="position: absolute;bottom: 0px;right: 10px;width: 40%;height: 45%;overflow: hidden;">
            <dv-decoration-8 :reverse="true" style="width: 100%;height: 100%;" />
          </div>
          <div style="display: flex;justify-content: center;align-items: center;flex-direction: column;height: 100%;">
            <div style="display: flex;">
              <dv-decoration-1 style="width:200px;height:50px;margin-top: 15px;" />
              <div style="width: 260px;margin-top: 8px;">
                <el-select style="z-index: 99;" class="myselect" popper-class="popperClass"
                  @change="changeGrid" :value="currentGrid.gridName">
                  <el-option v-for="(item,index) in gridList" :label="item.gridName" :value="index">
                    <span class="" style="float: left;color: #fff;font-size: 22px;">{{ item.gridName }}</span>
                  </el-option>
                </el-select>
              </div>
              <dv-decoration-1 style="width:200px;height:50px;margin-top: 15px;" />
            </div>
            <dv-decoration-5 style="width:35%;height:60%;margin-top: -20px;" />
          </div>
        </div>
        <div class="nav_btn">
          <div class="btn_left">
            <div style="width: 100%;display: flex;justify-content: flex-start;padding-left: 20px;">
              <dv-decoration-3 style="width:140px;height:40px;" />
            </div>
            <div style="display: flex;color: #FFFFFF;font-size: 15px;">
              <div class="btn_list animate__animated" :id="'id'+index" :style="index==tagIndex?'color: #FFFFFF;':''"
                :class="index==tagIndex?'listActive animate__heartBeat':''" v-if="index<limit"
                @click="handleMenu(item,index)" v-for="(item,index) in menuList" :key="index">
                {{item.name}}
              </div>
            </div>
          </div>
          <div class="btn_right">
            <div style="width: 100%;display: flex;justify-content: flex-end;margin-right: 20px;">
              <dv-decoration-3 style="width:140px;height:40px;" />
            </div>
            <div style="display: flex;color: #FFFFFF;font-size: 15px;width: 100%;">
              <div class="btn_list animate__animated" :style="index==tagIndex?'color: #FFFFFF;':''"
                :class="index==tagIndex?'listActive  animate__heartBeat':''" v-if="index>=limit"
                @click="handleMenu(item,index)" v-for="(item,index) in menuList" :key="index">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
      </dv-border-box-8>
    </dv-border-box-2>

  </div>
</template>

<script>
  import {
    resetRouter
  } from "../router/router";
  import {
    fullscreenToggel,
    fullscreenEnable
  } from "../util/util";
  import {
    mapGetters
  } from "vuex";
  export default {
    props: {
      gridList: Array
    },
    data() {
      return {
        menuList: [],
        limit: 0,
      }
    },
    computed: {
      ...mapGetters(["tagIndex", "menu", "currentGrid"]),
    },
    created() {
      this.getMenu();
    },
    methods: {
      async getMenu() {
        let head = [{
          name: '数据大屏',
          path: '/grid/dataPage'
        }, {
          name: '网格划分',
          path: '/grid/divide'
        }, ]
        let tail = [{
          name: '全屏',
          path: ''
        }, {
          name: '退出',
          path: ''
        }, ]
        let menu = await this.$store.dispatch("GetTopMenu")
        this.menuList = head.concat(menu).concat(tail)
        this.limit = this.menuList.length / 2
      },
      changeGrid(res) {
        this.$router.push({
          path: '/grid/dataPage',
          query: {
            id: this.gridList[res].id,
            refresh: true,
            key: this.key++
          }
        })
      },
      handleScreen() {
        fullscreenToggel();
      },
      logout() {
        this.$confirm('退出系统, 是否继续?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.$store.dispatch("LogOut").then(() => {
            resetRouter();
            this.$router.push({
              path: "/login"
            });
          });
        });
      },
      handleMenu(item, index) {
        switch (item.name) {
          case '数据大屏':
            this.$router.push({
              path: this.menuList[index].path
            });
            this.$store.commit("SET_TAG_INDEX", index)
            break;
          case '网格划分':
            this.$router.push({
              path: this.menuList[index].path
            });
            this.$store.commit("SET_TAG_INDEX", index)
            break;
          case '退出':
            this.logout();
            break;
          case '全屏':
            this.handleScreen();
            break;
          default:
            this.handleSystemMenu(item, index)
        }
      },
      async handleSystemMenu(item, index) {
        this.$store.commit("SET_TAG_INDEX", index)
        let menu = await this.$store.dispatch("GetMenu", item.id)
        if (menu.length > 0) {
          await this.$router.push({
            path: menu[0].children[0].path
          })
        }
      },
    }
  }
</script>

<style>
 .popperClass {
    background-color: rgba(0, 0, 0, .4) !important;
    z-index: 9999 !important;
    color: #01f8ce;
    border-color: rgba(0, 0, 0, .4) !important
  }
</style>

<style lang="scss" scoped>
  $color:#fff;


  .myselect {
    z-index: 99;
  }

  ::v-deep {
    .el-input__inner {
      margin-top: 10px;
      text-align: center;
      color: #fff;
      border-color: rgba(104, 141, 199, 0.7);
      background-color: rgba(104, 141, 199, 0.7);
      height: 50px;
      border-radius: 50px;
      font-weight: 800;
      font-size: 22px;
      padding: 0;
    }
  }

  .nav {
    position: relative;
    top: 0;
    width: 100%;
    height: 5.4vw;
    color: $color;
    font-size: 26px;
  }

  .nav_btn {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 2.2vw;
  }

  .btn_left {
    float: left;
    width: 60%;
    margin-left: 4%;
    height: 100%;
  }

  .btn_right {
    float: right;
    width: 25%;
    margin-right: 5%;
    height: 100%;
  }

  .btn_list {
    position: relative;
    float: left;
    width: 5.5vw;
    height: 1.6vw;
    text-align: center;
    color: #FFFFFF;
    line-height: 1.6vw;
    font-size: .8vw;
    letter-spacing: .1vw;
    cursor: pointer;
  }

  .btn_list:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #0efcff;
    transform: skewX(-38deg);
  }

  .btn_list:hover::before {
    border-color: $color;
    box-shadow: 1px 1px 3px 1px $color inset;
  }

  .listActive:before {
    font-weight: 800;
    border-color: #0efcff;
    box-shadow: 2px 2px 40px 2px #0efcff inset;
  }
</style>
