<template>
  <section class="box-sjtj">
    <section class="content">
      <section class="left">
        <MOSTY.Assort :title="'消防设施配置情况'" style="padding: 0" />
        <section class="flex">
          <section class="left-tj">
            <Sjtj :info="pageData.defaultLeftList" :isShowTip="false" :isShowBottom="false" :width="200" mb="6px" />
          </section>
          <section class="right-tj">
            <Sjtj :info="pageData.defaultLeftList2" :isShowTip="false" :isShowBottom="false" :width="200" mb="6px" />
          </section>
        </section>
      </section>
      <section class="center">
        <MOSTY.Assort :title="'消防设施配置情况'" style="padding: 0" />
        <Sjtj :info="pageData.defaultCenterList" :isShowTip="false" :isShowBottom="true" :width="200" mb="6px" />
      </section>
      <section class="right">
        <MOSTY.Assort :title="'消防救援情况'" style="padding: 0" />
        <section class="flex">
          <section class="left-tj">
            <Sjtj :info="pageData.defaultRightList" :isShowTip="false" :isShowBottom="false" :width="200" mb="6px" />
          </section>
          <section class="right-tj">
            <Sjtj :info="pageData.defaultRightList2" :isShowTip="false" :isShowBottom="false" :width="200" mb="6px" />
          </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, onMounted, watch, nextTick } from "vue";
import { getApi } from "@/api/tobAcco_api.js";

const props = defineProps({ query: Object });
const pageData = reactive({
  defaultLeftList: [
    // { title: "部位的数量", num: 9595, icon: "xfaq/icon_04.png" },
    // { title: "总建筑面积", num: 95925, icon: "xfaq/icon_05.png" },
    // { title: "从业人员总数", num: 9592, icon: "xfaq/icon_06.png" }
  ],
  defaultLeftList2: [
    // { title: "火灾自动报警系统", num: 9595, icon: "xfaq/icon_07.png" },
    // { title: "其他自动灭火系统", num: 95925, icon: "xfaq/icon_08.png" },
    // { title: "应急疏散指示系统", num: 9592, icon: "xfaq/icon_09.png" }
  ],
  defaultCenterList: [
    // { title: "消防控制室", num: 9595, icon: "xfaq/icon_10.png" },
    // {
    //   title: "消防控制室人员",
    //   num: 95925,
    //   icon: "xfaq/icon_11.png",
    //   bottomList: [
    //     { lable: "五级/初级工：", num: 673 },
    //     { lable: "|", num: "-1" },
    //     { lable: "四级/中级工以上：", num: 673 }
    //   ]
    // }
  ],
  defaultRightList: [
    // { title: "消防队数量", num: 9595, icon: "xfaq/icon_12.png" },
    // { title: "消防车数量", num: 95925, icon: "xfaq/icon_13.png" },
    // { title: "微型消防站队员数量", num: 9592, icon: "xfaq/icon_14.png" }
  ],
  defaultRightList2: [
    // { title: "消防员数量", num: 9595, icon: "xfaq/icon_15.png" },
    // { title: "微型消防站数量", num: 95925, icon: "xfaq/icon_16.png" }
  ]
});
const getPageData = async (e) => {
  return
  let res = await getApi(e, "/mosty-jcgl/data/firEquipment/countAll");
  if (res.data) {
    // pageData.defaultLeftList[0].num = res.data.total;
    // pageData.defaultLeftList[1].num = res.data.area;
    // pageData.defaultLeftList[2].num = res.data.total;
    // pageData.defaultLeftList2[0].num = res.data.total;
    // pageData.defaultLeftList2[1].num = res.data.total;
  }
};
onMounted(() => {
  nextTick(() => {
    getPageData(props.query);
  });
});

watch(
  () => props.query,
  (n, o) => {
    if (n) {
      getPageData(n);
    }
  },
  { deep: true }
  // { immediate: true, deep: true }
);
</script>

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

  .content {
    display: flex;

    .left {
      flex: 2;
      border-right: 1px solid #ebeef5;
      padding-right: 8px;
      box-sizing: border-box;

      .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left-tj {
          flex: 1;
        }

        .right-tj {
          flex: 1;
          margin-left: 13px;
        }
      }
    }

    .center {
      flex: 1;
      border-right: 1px solid #ebeef5;
      padding-right: 8px;
      box-sizing: border-box;
      margin-left: 12px;
    }

    .right {
      flex: 2;
      margin-left: 12px;

      .flex {
        display: flex;
        justify-content: space-between;

        .left-tj {
          flex: 1;
        }

        .right-tj {
          flex: 1;
          margin-left: 13px;
        }
      }
    }
  }
}
</style>
