<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/xzcf.png" alt="行政处罚" class="w-8 h-8 object-contain" />
        </div>
        <span class="font-bold text-gray-800">行政处罚</span>
      </div>

      <!-- 按处罚企业分组显示 -->
      <div v-if="groupedPunishments.length > 0" class="space-y-4">
        <div v-for="(group, groupIndex) in groupedPunishments" :key="groupIndex" class="punishment-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.companyName }}</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.totalPunishments }}</span></span>
              </div>
            </div>

            <!-- 处罚记录列表 -->
            <div class="space-y-3">
              <div v-for="(punishment, index) in group.punishments" :key="index"
                class="punishment-wrapper bg-white rounded-lg overflow-hidden shadow-sm border border-[#EEEEEE]">
                <!-- 处罚卡片 - 可点击展开 -->
                <div class="cursor-pointer relative"
                  @click="togglePunishmentExpand(punishment.punishNumber, 'punishment', 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">
                      {{ punishment.punishName || punishment.punishNumber || '行政处罚决定' }}
                    </div>
                    <span v-if="punishment.type"
                      class="px-2 py-1 text-xs rounded font-medium flex-shrink-0 ml-2 bg-blue-50 text-blue-600">
                      {{ punishment.type }}
                    </span>
                  </div>

                  <!-- 处罚信息 -->
                  <div class="px-4 py-2">
                    <!-- 处罚单位 -->
                    <div class="text-sm text-gray-600 mb-2">
                      <span>处罚单位：</span>
                      <span>{{ punishment.departmentName || '—' }}</span>
                    </div>

                    <!-- 决定日期 -->
                    <div class="text-sm text-gray-600 mb-2">
                      <span>决定日期：</span>
                      <span>{{ formatDate(punishment.decisionDate) }}</span>
                    </div>

                    <!-- 处罚金额 -->
                    <div class="text-sm mb-2">
                      <span class="text-gray-600">处罚金额：</span>
                      <span class="font-bold text-primary">{{ formatPecuniary(punishment.pecuniary) }}</span>
                    </div>

                    <!-- 底部标签行 -->
                    <div class="flex items-center gap-2 flex-wrap">
                      <!-- 处罚事由 -->
                      <span v-if="punishment.reason" class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                        {{ punishment.reason }}
                      </span>

                      <!-- 处罚状态 -->
                      <span v-if="punishment.punishStatus"
                        class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                        {{ punishment.punishStatus }}
                      </span>

                      <!-- 法人 -->
                      <span v-if="punishment.legalPersonName"
                        class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                        法人: {{ punishment.legalPersonName }}
                      </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': isPunishmentExpanded(punishment.punishNumber, 'punishment', index) }" />
                  </div>
                </div>

                <!-- 处罚详情抽屉 -->
                <div class="mt-4 overflow-hidden transition-all duration-300 ease-in-out" :class="{
                  'max-h-0 opacity-0': !isPunishmentExpanded(punishment.punishNumber, 'punishment', index),
                  'max-h-none opacity-100': isPunishmentExpanded(punishment.punishNumber, 'punishment', 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">{{ punishment.type || '-' }}</span>

                      <!-- 处罚单位 -->
                      <span class="text-base text-[#666666] flex-shrink-0">处罚单位：</span>
                      <span class="text-base font-medium text-[#333333] break-words">{{ punishment.departmentName || '-'
                      }}</span>

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

                      <!-- 处罚金额 -->
                      <span class="text-base text-[#666666] flex-shrink-0">处罚金额：</span>
                      <span class="text-base font-medium text-[#333333] break-words">{{
                        formatPecuniary(punishment.pecuniary) }}</span>

                      <!-- 处罚事由 -->
                      <span class="text-base text-[#666666] flex-shrink-0">处罚事由：</span>
                      <span class="text-base font-medium text-[#333333] break-words">{{ punishment.reason || '-'
                      }}</span>

                      <!-- 处罚内容 -->
                      <template v-if="punishment.content">
                        <span class="text-base text-[#666666] flex-shrink-0">处罚内容：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ punishment.content }}</span>
                      </template>

                      <!-- 处罚依据 -->
                      <template v-if="punishment.evidence">
                        <span class="text-base text-[#666666] flex-shrink-0">处罚依据：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ punishment.evidence }}</span>
                      </template>

                      <!-- 决定文书号 -->
                      <span class="text-base text-[#666666] flex-shrink-0">决定文书号：</span>
                      <span class="text-base font-medium text-[#333333] break-words">{{ punishment.punishNumber || '-'
                      }}</span>

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

                      <!-- 处罚状态 -->
                      <template v-if="punishment.punishStatus">
                        <span class="text-base text-[#666666] flex-shrink-0">处罚状态：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ punishment.punishStatus
                        }}</span>
                      </template>

                      <!-- 数据来源 -->
                      <template v-if="punishment.source">
                        <span class="text-base text-[#666666] flex-shrink-0">数据来源：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ punishment.source }}</span>
                      </template>

                      <!-- 备注 -->
                      <template v-if="punishment.remark">
                        <span class="text-base text-[#666666] flex-shrink-0">备注：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ punishment.remark }}</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 punishments = computed(() => props.data?.items || [])

// 按处罚企业分组
const groupedPunishments = computed(() => {
  const groups = {}

  punishments.value.forEach(punishment => {
    const companyName = punishment.companyName || '未知企业'

    if (!groups[companyName]) {
      groups[companyName] = {
        companyName,
        punishments: [],
        totalPunishments: 0
      }
    }

    groups[companyName].punishments.push(punishment)
    groups[companyName].totalPunishments++
  })

  return Object.values(groups)
})

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

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

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

// 格式化日期显示
const formatDate = (dateStr) => {
  if (!dateStr) return '—'
  return dateStr
}

// 格式化处罚金额
const formatPecuniary = (pecuniary) => {
  if (!pecuniary) return '—'
  const value = parseFloat(pecuniary)
  if (isNaN(value)) return '—'
  return `${value.toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 2 })} 元`
}

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

  // 没有行政处罚 -> 无风险 -> 100分
  if (punishmentList.length === 0) {
    return 100;
  }

  // 有行政处罚 -> 高风险 -> 40分
  return 40;
});

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

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

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