<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;"/>
        <section class="flex">
          <section class="left-tj">
            <Sjtj :info="pageData.defaultCenterList" :isShowTip="false" :isShowBottom="false" :width="200" mb="6px" />
          </section>
          <section class="right-tj">
            <Sjtj :info="pageData.defaultCenterList2" :isShowTip="false" :isShowBottom="false" :width="200" mb="6px" />
          </section>
        </section>
      </section>
      <section class="right">
        <MOSTY.Assort :title="'配置了对应设施的数量'" style="padding: 0;"/>
        <Sjtj :info="pageData.defaultRightList" :isShowTip="false" :isShowBottom="true" :width="200" mb="6px"/>
      </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({
  defaultLeftList: [
    // { title: '总数量', num: 9595, icon: 'ccss/icon_01.png' },
    // { title: '多层仓库数量', num: 95925, icon: 'ccss/icon_02.png' },
    // { title: '露天仓库数量', num: 9592, icon: 'ccss/icon_03.png' },
  ],
  defaultLeftList2: [
    // { title: '单层仓库数量', num: 9595, icon: 'ccss/icon_04.png' },
    // { title: '立体仓库数量', num: 95925, icon: 'ccss/icon_05.png' },
    // { title: '洞库数量', num: 9592, icon: 'ccss/icon_06.png' },
  ],
  defaultCenterList: [
    // { title: '原料（原烟、片烟）', num: 9595, icon: 'ccss/icon_07.png' },
    // { title: '烟用材料', num: 95925, icon: 'ccss/icon_08.png'},
  ],
  defaultCenterList2: [
    // { title: '卷烟', num: 9595, icon: 'ccss/icon_09.png' },
    // { title: '香精香料', num: 95925, icon: 'ccss/icon_10.png' },
  ],
  defaultRightList: [
    // { title: '消火栓系统', num: 9595, icon: 'ccss/icon_11.png' },
    // { title: '火灾自动报警系统', num: 95925, icon: 'ccss/icon_12.png' },
    // { title: '火灾自动灭火系统', num: 9592, icon: 'ccss/icon_13.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 {
    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: 2;
      border-right: 1px solid #EBEEF5;
      padding-right: 8px;
      box-sizing: border-box;
      margin-left: 12px;
      .flex {
        display: flex;
        justify-content: space-between;

        .left-tj {
          flex: 1;
        }

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