<template>
  <section class="box-sjtj">
    <section class="hader">
      <MOSTY.Assort :title="'消防重点部位'" style="padding: 0;" />
    </section>
    <section class="content">
      <section style="display: flex;flex-wrap: wrap;">
        <Sjtj :info="pageData.defaultList" :isShowTip="false" :isShowBottom="false" :width="300" mb="6px" />
      </section>
      <section class="content-top">
        <section class="left ww33">
          <section class="sjtj-title">不同危险等级数量</section>
          <section class="lists">
            <section class="list" v-for="(item, index) in pageData.listLeft" :key="index">
              <section class="list-title">{{ item.title }}</section>
              <section class="list-num">{{ filtterNum(item.num) }}</section>
            </section>
          </section>
        </section>
        <section class="right ww66">
          <section class="sjtj-title">火灾等级</section>
          <section class="lists">
            <section class="list" v-for="(item, index) in pageData.listRight" :key="index">
              <section class="list-title">{{ item.title }}</section>
              <section class="list-num">{{ filtterNum(item.num) }}</section>
            </section>
          </section>
        </section>
      </section>
    </section>
  </section>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import Sjtj from '@/views/dataReportWork/aqjypx/components/sjtj.vue'
import { reactive } from "vue";
const props = defineProps({
  item: {
    default: () => { },
    type: Object
  },
});
const pageData = reactive({
  listLeft: [
    { title: '轻危险级', num: 1123 },
    { title: '中危险级', num: 95925 },
    { title: '严重危险级', num: 9592 },
  ],
  listRight: [
    { title: '固体火灾（A类）', num: 1123 },
    { title: '液体火灾（B类）', num: 95925 },
    { title: '气体火灾（C类）', num: 95925 },
    { title: '金属火灾（D类）', num: 95925 },
    { title: '电气火灾（E类）', num: 95925 },
    { title: '烹饪火灾（F类）', num: 95925 },
  ],
  defaultList: [
    { title: '部位的数量', num: 9595, icon: 'xfaq/icon_01.png' },
    { title: '总建筑面积', num: 95925, icon: 'xfaq/icon_02.png' },
    { title: '从业人员总数', num: 9592, icon: 'xfaq/icon_03.png' },
  ]
})
const filtterNum = num => {
  return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}
</script>

<style lang="scss" scoped>
.box-sjtj {
  background-color: #fff;
  width: 100%;
  padding: 0 16px 7px 16px;
  box-sizing: border-box;

  .content {
    padding: 0 2px;
    box-sizing: border-box;

    .content-top {
      display: flex;

      .left {
        .sjtj-title {
          height: 36px;
          background: #EEF6F6;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          color: #3D3D3D;
          border-radius: 10px;
        }

        .lists {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 5px;

          .list {
            width: 192px;
            height: 80px;
            background: #EEF6F6;
            border-radius: 10px;
            padding: 12px 0 10px 14px;
            box-sizing: border-box;
            color: #071428;
            margin-right: 7px;

            &:last-child {
              margin-right: 0;
            }

            .list-title {
              font-size: 16px;
            }

            .list-num {
              font-size: 26px;
            }
          }
        }
      }

      .right {
        margin-left: 12px;

        .sjtj-title {
          height: 36px;
          background: #EEF6F6;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          color: #3D3D3D;
          border-radius: 10px;
        }

        .lists {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 5px;

          .list {
            width: 224px;
            height: 80px;
            background: #EEF6F6;
            border-radius: 10px;
            padding: 12px 0 10px 14px;
            box-sizing: border-box;
            color: #071428;
            margin-right: 7px;

            &:last-child {
              margin-right: 0;
            }

            .list-title {
              font-size: 16px;
            }

            .list-num {
              font-size: 26px;
            }
          }
        }
      }
    }
  }
}
</style>