<template>
  <section class="box-sjtj flex " v-loading="loading">
    <section class="hader ww20 jzwDetail_box pl16 pr16">
      <MOSTY.Assort :title="'基本信息'" style="padding: 0;" />
      <div>
        <Sjtj :info="pageData.defaultList" :isShowTip="false" :isShowBottom="true" class="jzwDetail" :width="230"
          mb="6px" align="center" height="98px" />
      </div>
    </section>
    <section class="ww80">
      <div class="pl15 pr20">
        <MOSTY.Assort :title="'建筑物结构'" style="padding: 0;" />
        <div class="flex just-start" style="flex-wrap: wrap;">
          <Sjtj :info="pageData.jzwjglist" :isShowTip="false" :isShowBottom="false" :width="200" mb="6px" />
        </div>
      </div>
      <div class="flex just-between pd15 pr20 " style=" border-top: 1px solid #efefef;">
        <div class="ww49">
          <div class="model_bg_box tc  brad8 mb7">高层公建</div>
          <div class="flex just-between">
            <div class="model_bg_box   " style="width: 32.5%;">
              <div class="f18 mb7">办公楼(栋)</div>
              <span class="f26">{{ filtterNum(pageData.jzyt.bgl || 0) }}</span>
            </div>
            <div class="model_bg_box  " style="width: 32.5%;">
              <div class="f18 mb7">科研楼(栋)</div>
              <span class="f26">{{ filtterNum(pageData.jzyt.kyl || 0) }}</span>
            </div>
            <div class="model_bg_box  brad8" style="width: 32.5%;">
              <div class="f18 mb7">其他(栋)</div>
              <span class="f26">{{ filtterNum(pageData.jzyt.gcqt || 0) }}</span>
            </div>
          </div>
        </div>
        <div class="ww49">
          <div class="model_bg_box tc  brad8 mb7">联合工房</div>
          <div class="flex just-between">
            <div class="model_bg_box ww24  ">
              <div class="f18 mb7">卷烟生产(栋)</div>
              <span class="f26">{{ filtterNum(pageData.jzyt.jysc || 0) }}</span>
            </div>
            <div class="model_bg_box ww24  ">
              <div class="f18 mb7">物流分拣(栋)</div>
              <span class="f26">{{ filtterNum(pageData.jzyt.wlfj || 0) }}</span>
            </div>
            <div class="model_bg_box ww24  ">
              <div class="f18 mb7">打叶复烤(栋)</div>
              <span class="f26">{{ filtterNum(pageData.jzyt.dyfk || 0) }}</span>
            </div>
            <div class="model_bg_box ww24  ">
              <div class="f18 mb7">其他(栋)</div>
              <span class="f26">{{ filtterNum(pageData.jzyt.lgqt || 0) }}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </section>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import Sjtj from '@/views/dataReportWork/aqjypx/components/sjtj.vue'
import { reactive, onMounted, ref, watch } from "vue";
import { postApi, getApi } from "@/api/tobAcco_api.js";
const loading = ref(false)
const props = defineProps({
  info: {
    type: Object,
    default: () => { },
  },
});
const pageData = reactive({
  //基本信息
  defaultList: [{
    title: '高层民用建筑总数', num: 0, icon: 'jzw/icon_gcmyjz.png', bottomList:
      [
        { lable: '一类：', num: 0 },
        { lable: '|', num: '-1' },
        { lable: '二类：', num: 0 },
      ]
  }, {
    title: '联合工房总数', num: 0, icon: 'jzw/icon_lhgf.png'
  }],
  jzwjglist: [
    { title: '砖木结构', num: 0, icon: 'jzw/icon_zh.png' },
    { title: '砖混结构', num: 0, icon: 'jzw/icon_zh.png' },
    { title: '钢筋混凝土结构', num: 0, icon: 'jzw/icon_gjhnt.png', mt: '0px' },
    { title: '钢结构', num: 0, icon: 'jzw/icon_gjg.png' },
    { title: '其他', num: 0, icon: 'jzw/icon_qt.png' }
  ],
  jzyt: {},
})
watch(
  () => props.info,
  (newVal) => {
    if (newVal) {
      _getTotal(newVal)
    }
  },
  { deep: true, immediate: true }
);
const filtterNum = num => {
  return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}
//获取统计数据
const _getTotal = (params) => {
  if (params) {
    loading.value = true
    postApi(params, "/mosty-jcgl/data/buildSafe/countAll").then(res => {
      if (res) {
        pageData.defaultList[0].num = res.gcAndLh.gcjzZs
        pageData.defaultList[0].bottomList[0].num = res.gcAndLh.gcjzYl
        pageData.defaultList[0].bottomList[2].num = res.gcAndLh.gcjzEl
        pageData.defaultList[1].num = res.gcAndLh.lhgf
        pageData.jzwjglist[0].num = res.jzjg.zmjg
        pageData.jzwjglist[1].num = res.jzjg.zhjg
        pageData.jzwjglist[2].num = res.jzjg.gjhltjg
        pageData.jzwjglist[3].num = res.jzjg.gjg
        pageData.jzwjglist[4].num = res.jzjg.qt
        pageData.jzyt = res.jzyt
      }
    }).finally(() => {
      loading.value = false
    })
  }
}
</script>

<style lang="scss" scoped>
.box-sjtj {
  background-color: #fff;
  width: 100%;
  min-height: 165px;
  box-sizing: border-box;
}

.jzwDetail_box {
  border-right: 1px solid #efefef;
}

.model_bg_box {
  background: #eef6f6;
  border-radius: 8px;
  padding: 10px 18px;
}

::v-deep .sjtj-content .account {
  margin-bottom: 10px;
}

::v-deep .sjtj-account {
  margin-right: 0;
}
</style>
