<template>
  <div class="AppBuilding">
    <div class="tab">
      <span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">网格地图</span>
      <span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">楼栋地图</span>
    </div>
    <div v-if="show && isGridMember">
      <search-map v-if="currIndex === 1" />
      <grid-map v-if="currIndex === 0" />
    </div>
    <div v-if="!isGridMember" class="empty">
      <img src="https://cdn.cunwuyun.cn/dvcp/h5/no-data.png" alt="">
      <p>没有网格员权限<br/>无法查看楼栋信息哦~</p>
    </div>
  </div>
</template>

<script>

import SearchMap from "./components/searchMap"
import GridMap from "./components/gridMap"
import {mapState} from "vuex";

export default {
  name: 'AppBuilding',
  appName: '人房地图',

  components: {
    GridMap,
    SearchMap
  },

  computed: {
    ...mapState(['user']),

    isGridMember() {
      return this.user.girdCheckType > 0
    }
  },

  data () {
    return {
      show: true,
      currIndex: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.AppBuilding {
  height: 100%;

  .tab {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    background: #3975C6;

    span {
      flex: 1;
      height: 96px;
      line-height: 96px;
      text-align: center;
      color: #a2d3ff;
      font-size: 28px;

      &.active {
        color: #fff;
      }
    }
  }

  .empty {
    height: 100%;

    img {
      width: 282px;
      height: 306px;
      margin: 168px 0 0 234px;
    }

    p {
      text-align: center;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #999;
      line-height: 44px;

      span {
        color: #467DFE;
      }
    }
  }
}
</style>
