<template>
  <div class="full">
    <map3-d ref="map" style="height: 100%;"></map3-d>
    <data-screen  v-if="clickIndex==0"></data-screen>
    <person-screen :class="tagIndex!=0?'animate__animated animate__faster animate__bounceOutDown':''" v-if="clickIndex==1"></person-screen>
    <party-screen :class="tagIndex!=0?'animate__animated animate__faster animate__bounceOutDown':''" v-if="clickIndex==2"></party-screen>

    <div class="btnGroup" :class="tagIndex!=0?'animate__animated animate__faster animate__bounceOutLeft':''">
      <div class="animate__fast" :id="item.name" v-for="(item,index) of menu" :key="index"
        @click="btnClick(item,index)">
        <div :style="'animation-duration :'+item.time" class="animate__backInLeft animate__animated btn-item ">
          <div class="btn-name">
            {{item.name}}
            <i v-if="clickIndex==index" style="color: #ffeb63;font-weight: 800;font-size: 20px;"
              class="el-icon-check"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {mapGetters} from "vuex";
  import Map3D from "../../components/3DMap/Map3D.vue"
  import dataScreen from "./scenes/dataScreen.vue"
  import personScreen from "./scenes/personScreen.vue"
  import partyScreen from "./scenes/partyScreen.vue"
  import topMenu from "../../components/top-menu.vue"
  export default {
    components: {
      Map3D,
      dataScreen,
      personScreen,
      partyScreen,
      topMenu
    },
    computed:{
      ...mapGetters(["tagIndex"]),
    },
    data() {
      return {
        backgroundColor: "#0f2146",
        color: ['#1a3776', '#3f6a9a'],
        clickIndex: 0,
        menu: [{
            name: '数据大屏',
            time: '0.3s'
          }, {
            name: '人员统计',
            time: '0.5s'
          },
          {
            name: '党员统计',
            time: '0.6s'
          },
          {
            name: '车辆统计',
            time: '0.65s'
          },
          {
            name: '保修统计',
            time: '0.7s'
          },
          {
            name: '设备统计',
            time: '0.75s'
          },

        ]
      }
    },
    methods: {
      btnClick(item, index) {
        this.$animateCss('#' + item.name, 'animate__heartBeat')
        if (index==0 || index==1 || index==2) {
          this.clickIndex = index
        }else{
          this.$message('定制中...');
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import url("../../styles/btn.css");


  .center {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .full {
    height: 100%;
    width: 100%;
  }

  .btnGroup {
    position: absolute;
    left: 22%;
    top: 12%;

    .btn-item {
      margin: 10px 0;
      cursor: pointer;
      width: 158px;
      height: 55px;
      background-color: #0000FF;
      background: url('/data/button-bg.png') no-repeat center/contain;

      .btn-name {
        line-height: 55px;
        text-align: center;
        color: #32c4e8;
        font-weight: bold
      }
    }
  }
</style>
