<template>
    <section class="box-sjtj">
      <section class="content">
        <section class="totalbox">
          <MOSTY.Assort :title="'通知公告分类'" style="padding: 0;" />
          <section class="flex">
            <section class="left-tj">
              <Sjtj :info="pageData.defaultLeftList" :isShowTip="false" :isShowBottom="false" :width="265" 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 { postApi } from "@/api/tobAcco_api.js";
  import { reactive, onMounted } from "vue";
  const props = defineProps({
    obj: {
      type: Object,
      default: () => { }
    }
  });
  const pageData = reactive({
    defaultLeftList: [
      { title: '安全总数', num: 0, dm: 'total', icon: 'ccss/icon_01.png' },
      { title: '机械安全事件', num: 0, dm: 'jxaq', icon: 'ccss/icon_01.png' },
      { title: '电气安全事件', num: 0, dm: 'dqaq', icon: 'ccss/icon_01.png' },
      { title: '消防安全事件', num: 0, dm: 'xfaq', icon: 'ccss/icon_01.png' },
      { title: '交通安全事件', num: 0, dm: 'jtaq', icon: 'ccss/icon_01.png' },
      { title: '劳动安全事件', num: 0, dm: 'ldaq', icon: 'ccss/icon_01.png' },
      { title: '卫生安全事件', num: 0, dm: 'wsaq', icon: 'ccss/icon_01.png' },
      { title: '其他安全事件', num: 0, dm: 'qtaq', icon: 'ccss/icon_01.png' },
    ],
  })
  onMounted(() => {
    getscsbsscount()
  })
  const getscsbsscount = () => {
    postApi({}, '/mosty-jcgl/safetyWarning/queryCountSafetyWarningInfo').then(res => {
      if (res) {
        for (const key in res) {
          let _item = pageData.defaultLeftList.find(v => v.dm == key)
          if (_item) {
            _item.num = res[key] || 0
          }
        }
      }
    })
  }
//   defineExpose({ getscsbsscount })
  </script>
  
  <style lang="scss" scoped>
  .box-sjtj {
    .content {
      .totalbox {
        flex: 1;
        padding-right: 8px;
        box-sizing: border-box;
        .flex {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .right-tj {
            flex: 1;
            margin-left: 13px;
          }
        }
      }
      .center {
        flex: 1;
        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>