<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.defaultList1" :isShowTip="false" :isShowBottom="false" :width="300"
                            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({
    defaultList1: [
        { title: '建筑施工和拆除', num: 0, dm: '01', icon: 'ccss/icon_01.png' },
        { title: '房屋修缮和装修装潢', dm: '02', num: 0, icon: 'ccss/icon_03.png' },
        { title: '设备设施安装拆除和维修保养', dm: '03', num: 0, icon: 'ccss/icon_11.png' },
        { title: '食堂运行', dm: '04', num: 0, icon: 'ccss/icon_07.png' },//
        { title: '污水处理运行', dm: '05', num: 0, icon: 'ccss/icon_10.png' },//
        { title: '绿化保洁', dm: '06', num: 0, icon: 'ccss/icon_02.png' },//
        { title: '外墙清洗', dm: '07', num: 0, icon: 'ccss/icon_02.png' },//
        { title: '杀虫作业', dm: '08', num: 0, icon: 'xfaq/icon_08.png' },
        { title: '危险物品供应和运输', dm: '09', num: 0, icon: 'ccss/icon_05.png' },//
        { title: '生产性业务外包', dm: '10', num: 0, icon: 'ccss/icon_04.png' },
        { title: '保安服务', dm: '11', num: 0, icon: 'xfaq/icon_03.png' },//
        { title: '消防服务', dm: '12', num: 0, icon: 'xfaq/icon_14.png' },//
        { title: '物业服务', dm: '13', num: 0, icon: 'xfaq/icon_16.png' },
        { title: '房屋承租', dm: '14', num: 0, icon: 'xfaq/icon_02.png' },
        { title: '物流运输', dm: '15', num: 0, icon: 'ccss/icon_04.png' },//
        { title: '其他', dm: '99', num: 0, icon: 'ccss/icon_06.png' },
    ],
})
onMounted(() => {
    getscsbsscount()
})
const getscsbsscount = () => {
    postApi(props.obj, '/mosty-jcgl/relatedpartyinfo/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 {
        // display: flex;

        .left {
            flex: 1;
            // border-right: 1px solid #EBEEF5;
            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;
            // 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>