report_viewer/src/ui/CQYGL5F6A.vue

<template>
    <div class="card">
        <div class="header-box">
            <h3 class="header-title">名下企业关联</h3>
            <p class="header-desc">展示查询对象作为法人/股东/高管关联的企业</p>
        </div>

        <div v-if="companyItems && companyItems.length" class="company-list">
            <div v-for="(item, idx) in companyItems" :key="idx" class="company-card">
                <div class="company-header">
                    <div class="company-name">{{ item.orgName || item.basicInfo?.name || '未知企业' }}</div>
                    <div class="company-tags">
                        <span v-for="tag in item.relationshipTags" :key="tag" class="tag">
                            {{ tag }}
                        </span>
                    </div>
                </div>
                <div class="company-body">
                    <div class="row">
                        <span class="label">企业状态</span>
                        <span class="value">{{ item.basicInfo?.regStatus || '-' }}</span>
                    </div>
                    <div class="row">
                        <span class="label">成立日期</span>
                        <span class="value">{{ item.basicInfo?.estiblishTime || '-' }}</span>
                    </div>
                    <div class="row">
                        <span class="label">注册资本</span>
                        <span class="value">{{ item.basicInfo?.regCapital || '-' }}</span>
                    </div>
                    <div class="row">
                        <span class="label">行业</span>
                        <span class="value">{{ item.basicInfo?.industry || '-' }}</span>
                    </div>
                    <div class="row">
                        <span class="label">企业类型</span>
                        <span class="value">{{ item.basicInfo?.companyOrgType || '-' }}</span>
                    </div>
                    <div class="row">
                        <span class="label">法定代表人</span>
                        <span class="value">{{ item.basicInfo?.legalPersonName || '-' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="!companyItems || !companyItems.length" class="empty-tip">
            暂未查询到名下企业关联信息
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    data: { type: Object, default: () => ({}) },
    params: { type: Object, default: () => ({}) },
    apiId: { type: String, default: '' },
    index: { type: Number, default: 0 },
    notifyRiskStatus: { type: Function, default: () => { } },
});

const rawItems = computed(() => {
    const report = props.data?.ent_report_001;
    const items = report?.queryResult?.items;
    return Array.isArray(items) ? items : [];
});

const relationshipMap = {
    lp: '法人',
    sh: '股东',
    tm: '高管',
};

const companyItems = computed(() =>
    rawItems.value.map((item) => {
        const relArr = Array.isArray(item.relationship) ? item.relationship : [];
        const relationshipTags = relArr.map((r) => relationshipMap[r] || r);
        return {
            ...item,
            relationshipTags,
        };
    })
);
</script>

<style scoped>
.card {
    padding: 1rem;
}

.header-box {
    margin-bottom: 1rem;
}

.header-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.header-desc {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.company-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.company-card {
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 0.75rem 0.875rem;
}

.company-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.company-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

.company-tags {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.tag {
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
}

.company-body .row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    padding: 0.15rem 0;
}

.label {
    color: #6b7280;
}

.value {
    color: #111827;
    margin-left: 1rem;
    text-align: right;
}

.empty-tip {
    color: #9ca3af;
    font-size: 0.875rem;
    padding: 1rem 0;
    text-align: center;
}
</style>