<template>
  <div class="mult-court-info-section card">
    <LTitle title="法院曝光台信息" class="mb-4" />

    <!-- 案件概览 -->
    <div class="court-overview mb-4">
      <div class="bg-white rounded-xl border border-[#DDDDDD] p-4">
        <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/ajgl.png" alt="案件概览" class="w-8 h-8 object-contain" />
          </div>
          <span class="font-bold text-gray-800">案件概览</span>
        </div>

        <!-- 案件类型统计 -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
          <div class="text-center p-3 rounded-lg" :class="getCaseFlagClass(multCourtInfo.legalCasesFlag)">
            <div class="text-lg font-bold">{{ getCaseCount(multCourtInfo.legalCases) }}</div>
            <div class="text-xs">涉案公告</div>
            <div class="text-xs mt-1" :class="getCaseFlagTextClass(multCourtInfo.legalCasesFlag)">
              {{ getCaseFlagText(multCourtInfo.legalCasesFlag) }}
            </div>
          </div>
          <div class="text-center p-3 rounded-lg" :class="getCaseFlagClass(multCourtInfo.executionCasesFlag)">
            <div class="text-lg font-bold">{{ getCaseCount(multCourtInfo.executionCases) }}</div>
            <div class="text-xs">执行公告</div>
            <div class="text-xs mt-1" :class="getCaseFlagTextClass(multCourtInfo.executionCasesFlag)">
              {{ getCaseFlagText(multCourtInfo.executionCasesFlag) }}
            </div>
          </div>
          <div class="text-center p-3 rounded-lg" :class="getCaseFlagClass(multCourtInfo.disinCasesFlag)">
            <div class="text-lg font-bold">{{ getCaseCount(multCourtInfo.disinCases) }}</div>
            <div class="text-xs">失信公告</div>
            <div class="text-xs mt-1" :class="getCaseFlagTextClass(multCourtInfo.disinCasesFlag)">
              {{ getCaseFlagText(multCourtInfo.disinCasesFlag) }}
            </div>
          </div>
          <div class="text-center p-3 rounded-lg" :class="getCaseFlagClass(multCourtInfo.limitCasesFlag)">
            <div class="text-lg font-bold">{{ getCaseCount(multCourtInfo.limitCases) }}</div>
            <div class="text-xs">限高公告</div>
            <div class="text-xs mt-1" :class="getCaseFlagTextClass(multCourtInfo.limitCasesFlag)">
              {{ getCaseFlagText(multCourtInfo.limitCasesFlag) }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 案件详情 -->
    <div class="court-details">
      <div class="space-y-4">
        <!-- 涉案公告 -->
        <div v-if="multCourtInfo.legalCases && multCourtInfo.legalCases.length > 0" class="case-section">
          <div class="bg-white rounded-xl border border-[#DDDDDD] p-4">
            <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/sagg.png" alt="涉案公告" class="w-8 h-8 object-contain" />
              </div>
              <span class="font-bold text-gray-800">涉案公告</span>
              <span class="ml-2 px-2 py-1 bg-[#2B79EE1A] text-[#2B79EE] rounded-full text-xs font-medium">
                {{ multCourtInfo.legalCases.length }}件
              </span>
            </div>

            <van-collapse v-model="activeLegalCases" accordion>
              <van-collapse-item v-for="(caseItem, index) in multCourtInfo.legalCases" :key="`legal-${index}`"
                :name="`legal-${index}`" :class="getCaseItemClass(caseItem)">
                <template #title>
                  <div class="case-header">
                    <div class="case-number">{{ caseItem.caseNumber }}</div>
                    <div class="case-status" :class="getCaseStatusClass(caseItem.caseStatus)">
                      {{ caseItem.caseStatus }}
                    </div>
                  </div>
                </template>
                <div class="case-details-content">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div class="detail-item">
                      <span class="label">案件类型：</span>
                      <span class="value">{{ caseItem.caseType }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">审理法院：</span>
                      <span class="value">{{ caseItem.court }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">诉讼地位：</span>
                      <span class="value">{{ caseItem.litigantType }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">立案时间：</span>
                      <span class="value">{{ caseItem.filingTime }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">结案时间：</span>
                      <span class="value">{{ caseItem.disposalTime }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">结案方式：</span>
                      <span class="value">{{ caseItem.disposalMethod }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">案由：</span>
                      <span class="value">{{ caseItem.caseReason }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">判决结果：</span>
                      <span class="value">{{ caseItem.judgmentResult }}</span>
                    </div>
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>
        </div>

        <!-- 执行案件 -->
        <div v-if="multCourtInfo.executionCases && multCourtInfo.executionCases.length > 0" class="case-section">
          <div class="bg-white rounded-xl border border-[#DDDDDD] p-4">
            <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/zxaj.png" alt="执行案件" class="w-8 h-8 object-contain" />
              </div>
              <span class="font-bold text-gray-800">执行案件</span>
              <span class="ml-2 px-2 py-1 bg-[#F9ECEC] text-[#EB3C3C] rounded-full text-xs font-medium">
                {{ multCourtInfo.executionCases.length }}件
              </span>
            </div>

            <van-collapse v-model="activeExecutionCases" accordion>
              <van-collapse-item v-for="(caseItem, index) in multCourtInfo.executionCases" :key="`execution-${index}`"
                :name="`execution-${index}`" :class="getCaseItemClass(caseItem)">
                <template #title>
                  <div class="case-header">
                    <div class="case-number">{{ caseItem.caseNumber }}</div>
                    <div class="case-status" :class="getCaseStatusClass(caseItem.caseStatus)">
                      {{ caseItem.caseStatus }}
                    </div>
                  </div>
                </template>
                <div class="case-details-content">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div class="detail-item">
                      <span class="label">案件类型：</span>
                      <span class="value">{{ caseItem.caseType }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">执行法院：</span>
                      <span class="value">{{ caseItem.court }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">被执行人地位：</span>
                      <span class="value">{{ caseItem.litigantType }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">立案时间：</span>
                      <span class="value">{{ caseItem.filingTime }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">结案时间：</span>
                      <span class="value">{{ caseItem.disposalTime }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">执行金额：</span>
                      <span class="value text-[#EB3C3C] font-bold">{{ caseItem.executionAmount }}元</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">已还款金额：</span>
                      <span class="value text-green-600 font-bold">{{ caseItem.repaidAmount }}元</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">案由：</span>
                      <span class="value">{{ caseItem.caseReason }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">结案方式：</span>
                      <span class="value">{{ caseItem.disposalMethod }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">执行结果：</span>
                      <span class="value">{{ caseItem.judgmentResult }}</span>
                    </div>
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>
        </div>

        <!-- 失信案件 -->
        <div v-if="multCourtInfo.disinCases && multCourtInfo.disinCases.length > 0" class="case-section">
          <div class="bg-white rounded-xl border border-[#DDDDDD] p-4">
            <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/sxaj.png" alt="失信案件" class="w-8 h-8 object-contain" />
              </div>
              <span class="font-bold text-gray-800">失信案件</span>
              <span class="ml-2 px-2 py-1 bg-[#FFF8E1] text-[#D6943E] rounded-full text-xs font-medium">
                {{ multCourtInfo.disinCases.length }}件
              </span>
            </div>

            <van-collapse v-model="activeDisinCases" accordion>
              <van-collapse-item v-for="(caseItem, index) in multCourtInfo.disinCases" :key="`disin-${index}`"
                :name="`disin-${index}`" :class="getCaseItemClass(caseItem)">
                <template #title>
                  <div class="case-header">
                    <div class="case-number">{{ caseItem.caseNumber }}</div>
                    <div class="case-status" :class="getCaseStatusClass(caseItem.caseStatus)">
                      {{ caseItem.caseStatus }}
                    </div>
                  </div>
                </template>
                <div class="case-details-content">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div class="detail-item">
                      <span class="label">案件类型：</span>
                      <span class="value">{{ caseItem.caseType }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">执行法院：</span>
                      <span class="value">{{ caseItem.court }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">被执行人地位：</span>
                      <span class="value">{{ caseItem.litigantType }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">立案时间：</span>
                      <span class="value">{{ caseItem.filingTime }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">结案时间：</span>
                      <span class="value">{{ caseItem.disposalTime }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">执行金额：</span>
                      <span class="value text-[#EB3C3C] font-bold">{{ caseItem.executionAmount }}元</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">已还款金额：</span>
                      <span class="value text-green-600 font-bold">{{ caseItem.repaidAmount }}元</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">案由：</span>
                      <span class="value">{{ caseItem.caseReason }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">结案方式：</span>
                      <span class="value">{{ caseItem.disposalMethod }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">失信原因：</span>
                      <span class="value">{{ caseItem.judgmentResult }}</span>
                    </div>
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>
        </div>

        <!-- 限高案件 -->
        <div v-if="multCourtInfo.limitCases && multCourtInfo.limitCases.length > 0" class="case-section">
          <div class="bg-white rounded-xl border border-[#DDDDDD] p-4">
            <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/xgaj.png" alt="限高案件" class="w-8 h-8 object-contain" />
              </div>
              <span class="font-bold text-gray-800">限高案件</span>
              <span class="ml-2 px-2 py-1 bg-[#2B79EE1A] text-[#2B79EE] rounded-full text-xs font-medium">
                {{ multCourtInfo.limitCases.length }}件
              </span>
            </div>

            <van-collapse v-model="activeLimitCases" accordion>
              <van-collapse-item v-for="(caseItem, index) in multCourtInfo.limitCases" :key="`limit-${index}`"
                :name="`limit-${index}`" :class="getCaseItemClass(caseItem)">
                <template #title>
                  <div class="case-header">
                    <div class="case-number">{{ caseItem.caseNumber }}</div>
                    <div class="case-status" :class="getCaseStatusClass(caseItem.caseStatus)">
                      {{ caseItem.caseStatus }}
                    </div>
                  </div>
                </template>
                <div class="case-details-content">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div class="detail-item">
                      <span class="label">案件类型：</span>
                      <span class="value">{{ caseItem.caseType }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">执行法院：</span>
                      <span class="value">{{ caseItem.court }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">被执行人地位：</span>
                      <span class="value">{{ caseItem.litigantType }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">立案时间：</span>
                      <span class="value">{{ caseItem.filingTime }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">结案时间：</span>
                      <span class="value">{{ caseItem.disposalTime }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">执行金额：</span>
                      <span class="value text-[#EB3C3C] font-bold">{{ caseItem.executionAmount }}元</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">已还款金额：</span>
                      <span class="value text-green-600 font-bold">{{ caseItem.repaidAmount }}元</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">案由：</span>
                      <span class="value">{{ caseItem.caseReason }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">结案方式：</span>
                      <span class="value">{{ caseItem.disposalMethod }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">限高原因：</span>
                      <span class="value">{{ caseItem.judgmentResult }}</span>
                    </div>
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 温馨提示 -->
  <LRemark
    content="法院曝光台信息展示申请人的各类案件信息，包括涉案公告、执行案件、失信案件和限高案件。数据来源于全国法院执行信息公开网等权威司法数据库。案件状态包括审理中、执行中、已结案等，执行金额和已还款金额直接反映债务履行情况。失信和限高记录对个人信用影响较大，建议重点关注。数据更新频率依赖于司法系统，可能存在延迟。" />
</template>

<script setup>
import LTitle from '@/components/LTitle.vue'
import LRemark from '@/components/LRemark.vue'
import { ref, onMounted, watch } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})

// 从data中解构出需要的字段
const { multCourtInfo = {} } = props.data

// 折叠面板状态
const activeLegalCases = ref('')
const activeExecutionCases = ref('')
const activeDisinCases = ref('')
const activeLimitCases = ref('')

// 初始化折叠面板状态，默认展开每种类型案件的第一个
onMounted(() => {
  if (multCourtInfo.legalCases && multCourtInfo.legalCases.length > 0) {
    activeLegalCases.value = 'legal-0'
  }
  if (multCourtInfo.executionCases && multCourtInfo.executionCases.length > 0) {
    activeExecutionCases.value = 'execution-0'
  }
  if (multCourtInfo.disinCases && multCourtInfo.disinCases.length > 0) {
    activeDisinCases.value = 'disin-0'
  }
  if (multCourtInfo.limitCases && multCourtInfo.limitCases.length > 0) {
    activeLimitCases.value = 'limit-0'
  }
})

// 监听数据变化，确保默认展开第一个案件
watch(() => multCourtInfo, (newData) => {
  if (newData && newData.legalCases && newData.legalCases.length > 0 && !activeLegalCases.value) {
    activeLegalCases.value = 'legal-0'
  }
  if (newData && newData.executionCases && newData.executionCases.length > 0 && !activeExecutionCases.value) {
    activeExecutionCases.value = 'execution-0'
  }
  if (newData && newData.disinCases && newData.disinCases.length > 0 && !activeDisinCases.value) {
    activeDisinCases.value = 'disin-0'
  }
  if (newData && newData.limitCases && newData.limitCases.length > 0 && !activeLimitCases.value) {
    activeLimitCases.value = 'limit-0'
  }
}, { immediate: true, deep: true })

// 获取案件数量
const getCaseCount = (cases) => {
  return cases ? cases.length : 0
}

// 获取案件标识样式
const getCaseFlagClass = (flag) => {
  if (flag === 1) return 'bg-[#F9ECEC] border border-[#F0CACA]'
  if (flag === 2) return 'bg-[#ECF9EF] border border-[#CAECD3]'
  return 'bg-gray-50 border border-gray-200'
}

// 获取案件标识文本样式
const getCaseFlagTextClass = (flag) => {
  if (flag === 1) return 'text-[#EB3C3C]'
  if (flag === 2) return 'text-green-600'
  return 'text-[#666666]'
}

// 获取案件标识文本
const getCaseFlagText = (flag) => {
  if (flag === 1) return '高风险'
  if (flag === 2) return '低风险'
  return '未查得'
}

// 获取案件项样式
const getCaseItemClass = (caseItem) => {
  if (caseItem.caseStatus === '已结案') return 'case-item-settled'
  if (caseItem.caseStatus === '执行中') return 'case-item-executing'
  return 'case-item-default'
}

// 获取案件状态样式
const getCaseStatusClass = (status) => {
  if (status === '已结案') return 'text-green-600 bg-green-100'
  if (status === '执行中') return 'text-[#D6943E] bg-[#FFF8E1]'
  if (status === '未执行') return 'text-[#EB3C3C] bg-[#F9ECEC]'
  if (status === '审理中') return 'text-[#2B79EE] bg-[#EBF5FF]'
  if (status === '失信中') return 'text-[#EB3C3C] bg-[#F9ECEC]'
  if (status === '限高中') return 'text-[#2B79EE] bg-[#EBF5FF]'
  return 'text-[#666666] bg-gray-100'
}
</script>

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

  .case-number {
    font-weight: 600;
    color: #333333;
    font-size: 14px;
  }

  .case-status {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
  }
}

.case-details-content {
  padding: 12px 0;

  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;

    .label {
      color: #666666;
      font-size: 13px;
      font-weight: 500;
    }

    .value {
      color: #333333;
      font-size: 13px;
      font-weight: 400;
      text-align: right;
      flex: 1;
      margin-left: 8px;
    }
  }
}

// 案件项样式
:deep(.van-collapse-item) {
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;

  &.case-item-settled {}

  &.case-item-executing {
    border: 1px solid #FFE082;
    background-color: #FFF8E1;
  }

  &.case-item-default {
    border: 1px solid #DDDDDD;
    background-color: #f9fafb;
  }
}

:deep(.van-collapse-item__title) {
  padding: 12px 16px;
  background-color: transparent;
}

:deep(.van-collapse-item__content) {
  padding: 0 16px 16px;
  background-color: transparent;
}

:deep(.van-collapse-item__wrapper) {
  border-radius: 8px;
}
</style>