tydata-webview-v2/src/ui/CQYGL3F8E/components/InvestHistory.vue

<template>
  <div class="card shadow-sm rounded-xl overflow-hidden p-4">
    <div class="border border-[#EEEEEE] p-4 rounded-xl">
      <div class="flex items-center mb-3">
        <div class="w-8 h-8 flex items-center justify-center mr-2">
          <img src="@/assets/images/report/dwtz.png" alt="对外投资历史" class="w-8 h-8 object-contain" />
        </div>
        <span class="font-bold text-gray-800">对外投资历史</span>
      </div>

      <!-- 按投资企业分组显示 -->
      <div v-if="groupedInvestments.length > 0" class="space-y-4">
        <div v-for="(group, groupIndex) in groupedInvestments" :key="groupIndex" class="investment-group">
          <!-- 投资企业容器 -->
          <div class="bg-[#F5F5F5] rounded-lg p-3">
            <!-- 投资企业标题 -->
            <div class="mb-3">
              <div class="flex items-center border-b border-[#0000000A] pb-2">
                <div class="text-[#333333] font-medium">{{ group.investorCompany }}</div>
              </div>
              <div class="flex items-center justify-between pt-2">
                <span class="text-sm text-gray-600">投资企业</span>
                <span class="text-sm text-gray-600">投资项目: <span class="ml-1 font-medium text-[#333333]">{{
                  group.totalInvestments }}</span></span>
              </div>
            </div>

            <!-- 被投资企业列表 -->
            <div class="space-y-3">
              <div v-for="(investment, index) in group.investments" :key="index"
                class="company-wrapper bg-white rounded-lg overflow-hidden shadow-sm border border-[#EEEEEE]">
                <!-- 企业卡片 - 可点击展开 -->
                <div class="cursor-pointer relative"
                  @click="toggleCompanyExpand(investment.name, 'investHistory', index)">
                  <!-- 企业名称和状态 -->
                  <div class="px-4 py-2 border-b border-[#0000000A] flex items-center justify-between">
                    <div class="font-medium text-[#333333] flex-1 truncate">{{ investment.name }}</div>
                    <span v-if="investment.regStatus" class="px-2 py-1 text-xs rounded font-medium flex-shrink-0 ml-2"
                      :class="getStatusClass(investment.regStatus)">
                      {{ investment.regStatus }}
                    </span>
                  </div>

                  <!-- 企业信息 -->
                  <div class="px-4 py-2">
                    <div class="flex items-center gap-2 text-sm text-gray-600 flex-1">
                      <span class="px-2 py-0.5 rounded bg-[#2B79EE1A] text-[#2B79EE] text-xs">
                        {{ getPersonTypeText(investment.personType) }}法人
                      </span>
                      <span>成立: {{ formatDate(investment.estiblishTime) }}</span>
                    </div>
                    <div class="text-sm text-gray-600  mt-2">
                      注册资本: {{ formatCapital(investment.regCapital) }}
                    </div>
                    <div class="flex items-center gap-1">
                      <span class="text-sm text-gray-600">持股比例:</span>
                      <span class="text-base font-bold text-[#A22525]">{{ investment.percent || '—' }}</span>
                    </div>
                  </div>


                  <!-- 展开指示器 -->
                  <div class="absolute right-4 bottom-2 flex items-center text-xs text-gray-500">
                    <img src="@/assets/images/report/zk.png" alt="展开" class="w-4 h-4 container"
                      :class="{ 'rotate-180': isCompanyExpanded(investment.name, 'investHistory', index) }" />
                  </div>
                </div>

                <!-- 企业详情抽屉 -->
                <div class="mt-4 overflow-hidden transition-all duration-300 ease-in-out" :class="{
                  'max-h-0 opacity-0': !isCompanyExpanded(investment.name, 'investHistory', index),
                  'max-h-none opacity-100': isCompanyExpanded(investment.name, 'investHistory', index),
                }">
                  <div class="mt-1 transform transition-all duration-300">
                    <div class="grid grid-cols-[max-content_1fr]  gap-y-3 p-4">
                      <!-- 持股比例 -->
                      <span class="text-base text-[#666666] flex-shrink-0">持股比例：</span>
                      <span class="text-base font-medium text-[#333333] break-words">{{ investment.percent || '-'
                        }}</span>

                      <!-- 投资金额 -->
                      <template v-if="investment.amount">
                        <span class="text-base text-[#666666] flex-shrink-0">投资金额：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{
                          formatAmount(investment.amount) }}</span>
                      </template>

                      <!-- 企业评分 -->
                      <template v-if="investment.pencertileScore">
                        <span class="text-base text-[#666666] flex-shrink-0">企业评分：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{
                          formatScore(investment.pencertileScore) }}</span>
                      </template>

                      <!-- 法人类型 -->
                      <span class="text-base text-[#666666] flex-shrink-0">法人类型：</span>
                      <span class="text-base font-medium text-[#333333] break-words">{{
                        getPersonTypeText(investment.personType) }}</span>

                      <!-- 退出时间 -->
                      <template v-if="investment.withdrawalTime">
                        <span class="text-base text-[#666666] flex-shrink-0">退出时间：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{
                          formatDate(investment.withdrawalTime) }}</span>
                      </template>

                      <!-- 省份 -->
                      <template v-if="investment.base">
                        <span class="text-base text-[#666666] flex-shrink-0">省份：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{
                          getProvinceName(investment.base) }}</span>
                      </template>

                      <!-- 企业状态 -->
                      <span class="text-base text-[#666666] flex-shrink-0">企业状态：</span>
                      <span class="text-base font-medium text-[#333333] break-words">{{ investment.regStatus || '-'
                        }}</span>

                      <!-- 统一社会信用代码 -->
                      <template v-if="investment.creditCode">
                        <span class="text-base text-[#666666] flex-shrink-0">统一社会信用代码：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ investment.creditCode
                          }}</span>
                      </template>

                      <!-- 企业类型 -->
                      <template v-if="investment.orgType">
                        <span class="text-base text-[#666666] flex-shrink-0">企业类型：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ investment.orgType }}</span>
                      </template>

                      <!-- 行业 -->
                      <template v-if="investment.category">
                        <span class="text-base text-[#666666] flex-shrink-0">行业：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ investment.category }}</span>
                      </template>

                      <!-- 注册资本 -->
                      <span class="text-base text-[#666666] flex-shrink-0">注册资本：</span>
                      <span class="text-base font-medium text-[#333333] break-words">{{
                        formatCapital(investment.regCapital) }}</span>

                      <!-- 成立日期 -->
                      <span class="text-base text-[#666666] flex-shrink-0">成立日期：</span>
                      <span class="text-base font-medium text-[#333333] break-words">{{
                        formatDate(investment.estiblishTime) }}</span>

                      <!-- 法人代表 -->
                      <template v-if="investment.legalPersonName">
                        <span class="text-base text-[#666666] flex-shrink-0">法人代表：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ investment.legalPersonName
                          }}</span>
                      </template>

                      <!-- 经营范围 -->
                      <template v-if="investment.business_scope">
                        <span class="text-base text-[#666666] flex-shrink-0">经营范围：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ investment.business_scope
                          }}</span>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 无投资历史时的空状态展示 -->
      <div v-else class="text-gray-500 py-10 text-center bg-gray-50 rounded-lg mx-4 mb-4">
        <div class="text-gray-300 text-3xl mb-2">💰</div>
        暂无对外投资历史
      </div>
    </div>
  </div>

  <!-- 温馨提示 -->
  <LRemark
    content="对外投资历史展示申请人相关企业的对外投资情况，包括被投资企业名称、投资金额、投资比例和投资时间等。数据来源于工商登记信息和公开披露信息。对外投资可以反映企业的扩张能力、投资策略和资金实力。多元化投资组合通常表明企业具有较强的风险管控能力。建议关注投资集中度、被投资企业的行业分布和投资回报情况。" />
</template>

<script setup>
import { ref, computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import LRemark from '@/components/LRemark.vue'
import { useRiskNotifier } from '@/composables/useRiskNotifier'

const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({ items: [], total: 0 }),
  },
  apiId: {
    type: String,
    default: '',
  },
  index: {
    type: Number,
    default: 0,
  },
  notifyRiskStatus: {
    type: Function,
    default: () => { },
  },
})

const investHistory = computed(() => props.data?.items || [])

// 按投资企业分组
const groupedInvestments = computed(() => {
  const groups = {}

  investHistory.value.forEach(investment => {
    const investorCompany = investment.companyName || '未知企业'

    if (!groups[investorCompany]) {
      groups[investorCompany] = {
        investorCompany,
        investments: [],
        totalInvestments: 0
      }
    }

    groups[investorCompany].investments.push(investment)
    groups[investorCompany].totalInvestments++
  })

  return Object.values(groups)
})

// 用于跟踪展开的企业卡片
const expandedCompanies = ref({})

// 切换展开/收起企业详情
const toggleCompanyExpand = (companyId, listType, index) => {
  const uniqueKey = `${companyId}_${listType}_${index}`
  expandedCompanies.value[uniqueKey] = !expandedCompanies.value[uniqueKey]
}

// 检查企业是否展开
const isCompanyExpanded = (companyId, listType, index) => {
  const uniqueKey = `${companyId}_${listType}_${index}`
  return !!expandedCompanies.value[uniqueKey]
}

// 获取企业状态对应的样式
const getStatusClass = (status) => {
  if (!status) return 'bg-gray-100 text-gray-500'

  if (status.includes('注销') || status.includes('吊销')) {
    return 'bg-red-50 text-red-600'
  } else if (status.includes('存续') || status.includes('在营')) {
    return 'bg-blue-50 text-blue-600'
  } else if (status.includes('筹建') || status.includes('新设')) {
    return 'bg-green-50 text-green-600'
  } else {
    return 'bg-yellow-50 text-yellow-600'
  }
}

// 格式化日期显示
const formatDate = (dateStr) => {
  if (!dateStr) return '—'
  // 如果是时间戳，转换为日期
  if (typeof dateStr === 'number') {
    return new Date(dateStr).toLocaleDateString('zh-CN')
  }
  return dateStr
}

// 格式化资本金额显示
const formatCapital = (capital) => {
  if (!capital) return '—'
  return capital
}

// 获取法人类型文本
const getPersonTypeText = (personType) => {
  if (personType === 1) return '自然人'
  if (personType === 2) return '企业法人'
  return '—'
}

// 格式化金额显示
const formatAmount = (amount) => {
  if (!amount) return '—'
  return amount
}

// 格式化评分显示
const formatScore = (score) => {
  if (!score) return '—'
  return `${score}/10000`
}

// 获取省份名称
const getProvinceName = (base) => {
  const provinceMap = {
    'bj': '北京',
    'sh': '上海',
    'gz': '广州',
    'sz': '深圳',
    'hz': '杭州',
    'cd': '成都',
    'wh': '武汉',
    'nj': '南京',
    'tj': '天津',
    'xa': '西安'
  }
  return provinceMap[base] || base || '—'
}

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  const history = investHistory.value || [];

  // 没有投资历史 -> 无风险 -> 100分
  if (history.length === 0) {
    return 100;
  }

  // 有投资历史 -> 低风险 -> 90分
  return 90;
});

// 使用 composable 通知父组件风险评分
useRiskNotifier(props, riskScore);

// 暴露给父组件
defineExpose({
  riskScore
});
</script>

<style lang="scss" scoped></style>