<template>
    <section class="box-sjtj">
        <section class="content">
            <section class="left">
                <section class="flex">
                    <section class="left-tj">
                        <Sjtj :info="pageData.defaultList1" :isShowTip="false" :isShowBottom="false" :width="400" mb="6px" />
                    </section>
                </section>
            </section>
        </section>
    </section>
</template>
<script setup>
import Sjtj from '@/views/dataReportWork/aqjypx/components/sjtj.vue'
import { getApi } from "@/api/tobAcco_api.js";
import { reactive, onMounted } from "vue";
const props = defineProps({
    obj: {
        type: Object,
        default: () => { }
    }
});
const pageData = reactive({
    defaultList1: [
        { title: '涉及职业危害职业健康体检', num: 0, dm: '1', icon: 'ccss/icon_01.png' },
        { title: '职业禁忌证体检', dm: '2', num: 0, icon: 'ccss/icon_01.png' },
    ],
})
onMounted(() => {
    getscsbsscount()
})
const getscsbsscount = () => {
    getApi(props.obj, '/mosty-jcgl/relatedUser/getStatistics').then(res => {
        if (res.length > 0) {
            res.forEach((item) => {
                let _item1 = pageData.defaultList1.find(v => v.dm == item.dm)
                if (_item1) {
                    _item1.num = filtterNum(item.count) || 0
                }
            });
        }
    })
}
const filtterNum = num => {
    return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}
defineExpose({ getscsbsscount })
</script>

<style lang="scss" scoped>
.left-tj {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.box-sjtj {
    background-color: #fff;
    width: 100%;
    padding: 0 16px 7px 16px;
    box-sizing: border-box;

    .content {
        .left {
            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>