<template>
  <div class="hjtj-container">
    <TitleTab title="环境统计" />
    <div class="tab-content">
      <img class="tab-back-img" :src="getImgUrl('preview/tabBack.png')" alt="暂时无图">
      <!-- 内容展示 -->
      <div class="show-container">
        <div class="qy-item-container" v-for="item in showArr">
          <img class="hjtj-back-img" :src="getImgUrl(`preview/${item.url}.png`)" alt="">
          <div class="hjtj-title-num">
            <div>{{ item.title }}</div>
            <div class="hjtj-num">{{ item.num }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import TitleTab from '../TitleTab.vue';
import { getImgUrl } from "@/utils/tools.js"

const props = defineProps({
  /**标题 */
  title: {
    type: String,
    default: ''
  }
})
const showArr = ref([
  { title: '有限空间作业场所数量', num: '45', url: 'huangjingtongji (1)' },
  { title: '熏蒸杀虫作业场所数量', num: '6', url: 'huangjingtongji (2)' },
  { title: '危险作业次数', num: '45', url: 'huangjingtongji (2)' },
  { title: '职业危害场所', num: '2', url: 'huangjingtongji (3)' },
  { title: '涉及危险作业相关方', num: '57', url: 'huangjingtongji (5)' },
  { title: '危险化学品数量', num: '57', url: 'huangjingtongji (6)' },

]);
</script>

<style lang="scss" scoped>
.hjtj-container {
  height: 100%;

  .tab-content {
    position: relative;
    padding: 0.52vh;
    width: 100%;
    // height: 100%;
    height: 18vh;

    .tab-back-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.8;
    }

    .show-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0.4vh;
      gap: 0.5vh;
      height: 100%;
      overflow-y: auto;

      .qy-item-container {
        position: relative;
        width: 10.5vw;
        height: 5vh;
        font-size: 12px;
        //  padding-top: 0.5vh;
        padding-left: 3vw;

        .hjtj-back-img {
          position: absolute;

          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        .hjtj-title-num {
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100%;
          padding-left: 0.5vw;
        }

        .hjtj-num {
          color: #15FF47;
        }
      }
    }
  }
}
</style>
