<template>
  <div class="aqgyj-container">
    <TitleTab title="安全告/预警" />
    <div class="tab-content">
      <div class="count-container">
        <div class="count-row-1">
          <div class="gjzs">
            <img class="row-1-image" :src="getImgUrl('preview/gjzs.png')" alt="">
            <div>告警总数：2345</div>
          </div>
          <div class="yjzs">
            <img class="row-1-image" :src="getImgUrl('preview/yjzs.png')" alt="">
            <div>预警总数：2346</div>
          </div>
        </div>
        <div class="count-row-2">
          <div class="sub-count">
            <img class="sub-count-img" :src="getImgUrl('preview/huiZhang-green.png')" alt="">
            <div class="count-tile-num">
              <div>已处置数</div>
              <div>2300</div>
            </div>
          </div>
          <div class="sub-count">
            <img class="sub-count-img" :src="getImgUrl('preview/huiZhang-orange.png')" alt="">
            <div class="count-tile-num">
              <div>已处置数</div>
              <div>2300</div>
            </div>
          </div>
          <div class="sub-count">
            <img class="sub-count-img" :src="getImgUrl('preview/huiZhang-green.png')" alt="">
            <div class="count-tile-num">
              <div>已处置数</div>
              <div>2300</div>
            </div>
          </div>
          <div class="sub-count">
            <img class="sub-count-img" :src="getImgUrl('preview/huiZhang-orange.png')" alt="">
            <div class="count-tile-num">
              <div>已处置数</div>
              <div>2300</div>
            </div>
          </div>
        </div>
        <div class="gyj-list">
          <div class="gyj-list-header">
            <img class="gyj-head-img" :src="getImgUrl('preview/gyj-list-header.png')" alt="">
            告/预警列表
          </div>
          <div class="list-cont-container">
            <div class="list-cont-item" v-for="item in dataArr">
              <div class="list-cont-item-top">
                <div>{{ item.type == 1 ? '告警' : '预警' }}</div>
                <div>{{ item.time }}</div>
              </div>
              <div class="list-cont-item-bottom">
                <img class="list-cont-item-left" :src="getImgUrl('preview/fire.png')" alt="">
                <div class="list-cont-item-right" :title="item.content">
                  {{ item.content }}
                </div>
                <img class="backgroud-img" :src="getImgUrl('preview/gao-jing-tu.png')" alt="">
              </div>

            </div>

          </div>
        </div>
      </div>
      <img class="tab-back-img" :src="getImgUrl('preview/tabBack.png')" alt="暂时无图">
    </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 dataArr = ref([
  { content: '火灾预警-疑似电器燃烧火灾预警-疑似电器燃烧火灾预警-疑似电器燃烧火灾预警-疑似电器燃烧火灾预警-疑似电器燃烧火灾预警-疑似电器燃烧火灾预警-疑似电器燃烧火灾预警-疑似电器燃烧火灾预警-疑似电器燃烧', time: '2023-07-13 11:36:23', type: 1 },
  { content: '火灾预警', time: '2023-07-13 11:36:23', type: 1 },
  { content: '火灾预警', time: '2023-07-13 11:36:23', type: 1 },
  { content: '火灾预警', time: '2023-07-13 11:36:23', type: 2 },
  { content: '火灾预警', time: '2023-07-13 11:36:23', type: 2 },
  { content: '火灾预警', time: '2023-07-13 11:36:23', type: 2 },

]);
</script>

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

  .tab-content {
    position: relative;
    padding: 0.52vh;
    width: 100%;
    height: calc(100% - 2.2vh);

    .count-row-1 {
      display: flex;
      justify-content: space-between;

      .gjzs,
      .yjzs {
        position: relative;
        width: 48%;
        height: 2.5vh;
        font-size: 12px;
        padding-left: 2.9vw;

        .row-1-image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }


    }

    .count-row-2 {
      display: flex;
      justify-content: space-between;
      margin-top: 1vh;

      .sub-count {
        display: flex;
        position: relative;
        width: calc(24%);

        .sub-count-img {
          position: absolute;
          width: 100%;
          height: 100%;
        }

        .count-tile-num {
          font-size: 11px;
          margin-left: 2.2vw;
          margin-top: 0.4vh;
        }
      }
    }

    .gyj-list {
      margin-top: 1.2vh;

      .gyj-list-header {
        position: relative;
        height: 1.8vh;
        z-index: 1;
        padding-left: 1.8vw;
        font-weight: bolder;
        margin-bottom: 0.6vh;
        .gyj-head-img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          opacity: 0.8;
        }
      }

      .list-cont-container {
        height: 78vh;
        overflow-y: auto;

        .list-cont-item {
          height: 12vh;
          .list-cont-item-top {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            margin-bottom: 0.6vh;
          }

          .list-cont-item-bottom {
            display: flex;
            position: relative;
            height: 8.33vh;
            padding: 1.3vh 0.6vw 0.9vh;
            .list-cont-item-left {
              width: 25%;
            }

            .list-cont-item-right {
              padding-left: 0.6vw;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              line-clamp: 3;
            }

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

    .tab-back-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.2;
    }
  }
}
</style>
