<template>
  <div class="center-top-container">
    <div class="the-map-conten">
      <!-- <BigMap /> -->

      <messageDialog />
      <img class="fack-map-img" :src="getImgUrl('preview/fack-map-img.png')" alt="">
    </div>

    <!-- 左边按钮 -->
    <div class="map-left-btn">
      <div class="map-row-1">
        <div class="map-btn-txt-container">
          <div>场所</div>
        </div>
        <img class="left-background-img" :src="getImgUrl('preview/map-btn-green.png')" alt="">
      </div>
      <div class="map-row-2">
        <div class="top-btn">
          <div class="map-btn-txt-container">
            <div>危险作业场所</div>
          </div>
          <img class="left-background-img" :src="getImgUrl('preview/map-long-btn-yellow.png')" alt="">
        </div>
        <div class="bottom-btn">
          <div class="map-btn-txt-container">
            <div>危险作业场所</div>
          </div>
          <img class="left-background-img" :src="getImgUrl('preview/map-long-btn.png')" alt="">
        </div>
      </div>

      <div class="map-row-3">
        <div class="map-btn-txt-container">
          <div>风险</div>
        </div>
        <img class="left-background-img" :src="getImgUrl('preview/map-btn-green.png')" alt="">
      </div>
      <div class="map-row-4">
        <div class="map-btn-txt-container">
          <div>隐患</div>
        </div>
        <img class="left-background-img" :src="getImgUrl('preview/map-btn-green.png')" alt="">
      </div>
      <div class="map-row-5">
        <div class="map-btn-txt-container">
          <div>告警</div>
        </div>
        <img class="left-background-img" :src="getImgUrl('preview/map-btn-green.png')" alt="">
      </div>
    </div>

    <!-- 右边按钮 -->
    <div class="map-right-btn">
      <div class="map-btn-right-item" v-for="item in rightBtnList">
        <div class="data-show">
          <div class="map-btn-right-item-text">{{ item.label }}</div>
          <div class="map-btn-right-item-num">({{ item.value }})</div>
        </div>
        <img class="map-background-img" :src="getImgUrl('preview/map-right-btn-back.png')" alt="">
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import messageDialog from './messageDialog.vue';
import BigMap from "@/components/Map/index.vue";
import { getImgUrl } from "@/utils/tools.js"

const rightBtnList = ref([
  { label: '投资公司', value: 100 },
  { label: '贵安新区', value: 100 },
  { label: '复烤公司', value: 100 },
  { label: '进出口', value: 100 },
  { label: '烟科院', value: 100 },
])
</script>

<style lang="scss" scoped>
.center-top-container {
  position: relative;
  height: 100%;
  width: 100%;
  font-size: 12px;
  .the-map-conten {
    position: relative;
    width: 100%;
    height: 100%;
    .fack-map-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  }
  .map-left-btn {
    display: flex;
    align-items: end;
    position: absolute;
    left: 1vw;
    bottom: 1vh;
    // width: 70%;

    .map-row-1,.map-row-3,.map-row-4,.map-row-5 {
      position: relative;
      width: 4.374vw;
      height: 3.33vh;
      margin-right: 0.52vw;

      .map-btn-txt-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
      }

      .left-background-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
    }

    .map-row-2 {
      width: 7.13vw;
      margin-right: 0.52vw;

      .top-btn,
      .bottom-btn {
        position: relative;
        height: 3.33vh;
        margin-top: 0.5vh;

        .map-btn-txt-container {
          display: flex;
          justify-content: center;
          align-items: center;
          // position: relative;
          height: 100%;


        }

        .left-background-img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
        }
      }
    }
  }

  .map-right-btn {
    position: absolute;
    right: 1vw;
    bottom: 1vh;
    width: 4.48vw;

    .map-btn-right-item {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 100%;
      height: 5.55vh;
      text-align: center;
      margin-top: 1vh;

      .data-show {
        margin-top: 0.3vh;
        width: 100%;
        height: 100%;

      }

      .map-background-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
    }
  }
}
</style>
