<template>
  <div class="big-map-wrap">
    <amap-wrap
      :mapCenter="{
        lng: 116.397428,
        lat: 39.90923,
        address: ''
      }"
      ref="bigscLocationMap"
      :projectList="projectList"
    ></amap-wrap>
    <div class="botton-top-wrap-1" :style="isFold ? 'height: 50px; display: flex; align-items: center;' : ''">
      <div class="top-wrap-1" v-show="isFold === false">
        <div
          v-for="item in labelList"
          :key="item.valueKeys"
          v-show="!(tempUserType === 'PERSONAL' && item.valueKeys === 'projectTotal')"
        >
          <div class="item-value">{{countResult[item.valueKeys]}}</div>
          <img :src="item.image" style="pointer-events: none;" />
          <div class="item-label" @click="routerTokeys(item.valueKeys)">{{item.label}}</div>
        </div>
      </div>
      <div class="fold-wrap" @click="isFold = !isFold">
        <i :class="isFold ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
      </div>
    </div>

  </div>
</template>
<script>
import amapWrap from "@/components/Amap/components/bigscLocation/indexV_2";
import imgs from "@/assets/images/big/maptp_v1.png";
import { appProjectDeviceList } from "@/api/app";
export default {
  name: "mapWrap",
  components: {
    amapWrap
  },
  props: ["countResult", "projectList", "fullscreen"],
  data() {
    return {
      imgs,
      labelList: [
        {
          guid: "1",
          label: "项目总数",
          valueKeys: "projectTotal",
          image: imgs,
          routerKeys: "project"
        },
        {
          guid: "2",
          label: "设备总数",
          valueKeys: "deviceTotal",
          image: imgs,
          routerKeys: "device"
        },
        {
          guid: "3",
          label: "在线设备",
          valueKeys: "onlineTotal",
          image: imgs,
          routerKeys: "device"
        },
        {
          guid: "4",
          label: "今日报警",
          valueKeys: "todayAlarmTotal",
          image: imgs,
          routerKeys: "alarm"
        },
        {
          guid: "2",
          label: "报警总数",
          valueKeys: "alarmTotal",
          image: imgs,
          routerKeys: "alarm"
        }
      ],
      deviceList: [],
      tempUserType: null,
      isFold: true
    };
  },
  created() {
    this.tempUserType = this.$store.getters.userType;
  },
  methods: {
    closeFullScreen() {
      let element = document.getElementById("con_lf_top_div");
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
      this.$emit("eventFullscreen", { value: false });
    },
    routerTokeys(keys) {
      if (this.fullscreen) {
        this.closeFullScreen();
      }
      var routerPath = "";
      switch (keys) {
        case "projectTotal":
          routerPath = "/project/project";
          if (this.$store.getters.userType === "TENANT") {
            routerPath = "/project_tenant/project_tenant";
          }
          break;
        case "deviceTotal":
          routerPath = "/device/device";
          if (this.$store.getters.userType === "TENANT") {
            routerPath = "/device_tenant/device_tenant";
          } else if (this.$store.getters.userType === "PERSONAL") {
            routerPath = "/device_oneself/device_oneself";
          }
          break;
        case "onlineTotal":
          routerPath = "/device/device";
          if (this.$store.getters.userType === "TENANT") {
            routerPath = "/device_tenant/device_tenant";
          } else if (this.$store.getters.userType === "PERSONAL") {
            routerPath = "/device_oneself/device_oneself";
          }
          break;
        case "todayAlarmTotal":
          routerPath = "/alarm/record";
          if (this.$store.getters.userType === "TENANT") {
            routerPath = "/alarm_tenant/alarm_tenant";
          } else if (this.$store.getters.userType === "PERSONAL") {
            routerPath = "/alarm_oneself/alarm_oneself";
          }
          break;
        case "alarmTotal":
          routerPath = "/alarm/record";
          if (this.$store.getters.userType === "TENANT") {
            routerPath = "/alarm_tenant/alarm_tenant";
          } else if (this.$store.getters.userType === "PERSONAL") {
            routerPath = "/alarm_oneself/alarm_oneself";
          }
          break;
      }

      this.$router.push({ path: routerPath });
    },
    overview() {
      this.$refs.bigscLocationMap.overview();
    }
  },
  watch: {}
};
</script>
<style lang="scss">
.big-map-wrap {
  height: 100%;
  width: 100%;

  .botton-top-wrap-1 {
    position: fixed;
    width: calc(58% + 4px);
    top: 66px;
    height: 230px;
    background: linear-gradient(rgba(1,18,145,0.65) 0%,  rgba(3,63,99 ,0.5) 100%);
    box-shadow: 0px 1px 3px #033f6380;
    .top-wrap-1 {
      width: 100%;
      height: 200px;
      // position: relative;
      // top: -743px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      // pointer-events: none;
      > div {
        width: 150px;
        height: 150px;
        display: "-webkit-box";
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        .item-value {
          width: 100%;
          display: flex;
          justify-content: center;
          height: 45px;
          font-size: 28px;
          font-family: "Source Han Sans CN";
          font-weight: 600;
          color: #f7f2ea;
          background: linear-gradient(180deg, #fbcf34 0%, #ff9b58 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          pointer-events: none;
          position: relative;
          top: 22px;
          font-size: 32px;
        }
        .item-label {
          width: 100%;
          height: 16px;
          font-size: 16px;
          font-family: "Microsoft YaHei";
          font-weight: 400;
          color: #ffffff;
          line-height: 8px;
          text-align: center;
        }
        .item-label:hover {
          color: #fbcf34;
        }
      }
    }
    .fold-wrap {
      height: 30px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      color: #32bcdd;
    }
    .fold-wrap:hover {
      color: #fff;
      background: linear-gradient(180deg, #9c9c9c0d 0%, #f3a0698a 100%);
    }
  }
  .bottom-wrap-1 {
    position: relative;
    top: -280px;
    top: -50px;
    left: 90%;
    > div {
      margin-bottom: 5px;
      font-size: 14px;
      font-family: "Source Han Sans CN";
      font-weight: 400;
      color: #07beff;
      line-height: 20px;
    }
    .mapButton {
      padding: 5px;
      width: 26px;
      height: 26px;
      background: #00629866;
      border: 1px solid #008ee3;
      border-radius: 2px;
      color: #05bcff;
      margin-right: 5px;
    }
  }

  .amap-logo {
    display: none;
    opacity: 0 !important;
  }
  .amap-copyright {
    opacity: 0;
  }
}
</style>
