<template>
  <div class="">
    <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/sswf.png" alt="税收违法" class="w-8 h-8 object-contain" />
        </div>
        <span class="font-bold text-gray-800">税收违法</span>
      </div>

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

            <!-- 违法记录列表 -->
            <div class="space-y-3">
              <div v-for="(contravention, index) in group.contraventions" :key="index"
                class="contravention-wrapper bg-white rounded-lg overflow-hidden shadow-sm border border-[#EEEEEE]">
                <!-- 违法卡片 - 可点击展开 -->
                <div class="cursor-pointer relative"
                  @click="toggleContraventionExpand(contravention.id, 'taxContravention', index)">
                  <!-- 企业名称和案件性质 -->
                  <div class="px-4 py-2 border-b border-[#0000000A] flex items-center justify-between">
                    <div class="font-medium text-[#333333] flex-1">
                      <span v-if="contravention.case_type"
                        class="px-2 py-1 text-xs rounded font-medium flex-shrink-0 mr-2 bg-[#EB3C3C1A] text-[#EB3C3C] border border-[#EB3C3C]">
                        {{ contravention.case_type }}
                      </span>
                      <span>{{ contravention.taxpayer_name || group.companyName }}</span>
                    </div>

                  </div>

                  <!-- 违法信息 -->
                  <div class="px-4 py-2">
                    <!-- 违法ID和发布日期 -->
                    <div class="flex items-center gap-4 text-sm text-gray-600 mb-2">
                      <div>
                        <span>违法ID：</span>
                        <span>{{ contravention.id || '—' }}</span>
                      </div>
                      <div>
                        <span>发布：</span>
                        <span>{{ formatDate(contravention.publish_time) }}</span>
                      </div>
                    </div>

                    <!-- 案件编号 -->
                    <div class="text-sm mb-2">
                      <span class="text-gray-600">案件编号：</span>
                      <span class="font-bold text-primary">#{{ contravention.id || '—' }}</span>
                    </div>

                    <!-- 税务机关 -->
                    <div v-if="contravention.department" class="flex items-center gap-2 flex-wrap mb-2">
                      <span class="text-xs bg-primary-light rounded py-1 px-2 text-primary">
                        税务机关: {{ contravention.department }}
                      </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': isContraventionExpanded(contravention.id, 'taxContravention', index) }" />
                  </div>
                </div>

                <!-- 违法详情抽屉 -->
                <div class="mt-4 overflow-hidden transition-all duration-300 ease-in-out" :class="{
                  'max-h-0 opacity-0': !isContraventionExpanded(contravention.id, 'taxContravention', index),
                  'max-h-none opacity-100': isContraventionExpanded(contravention.id, 'taxContravention', index),
                }">
                  <div class="mt-1 transform transition-all duration-300">
                    <div class="grid grid-cols-[max-content_1fr] gap-y-3 p-4">
                      <!-- 违法ID -->
                      <span class="text-base text-[#666666] flex-shrink-0">违法ID：</span>
                      <span class="text-base font-medium text-[#333333] break-words">#{{ contravention.id || '-'
                      }}</span>

                      <!-- 纳税人名称 -->
                      <span class="text-base text-[#666666] flex-shrink-0">纳税人名称：</span>
                      <span class="text-base font-medium text-[#333333] break-words">{{ contravention.taxpayer_name ||
                        '-' }}</span>

                      <!-- 案件性质 -->
                      <template v-if="contravention.case_type">
                        <span class="text-base text-[#666666] flex-shrink-0">案件性质：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ contravention.case_type
                        }}</span>
                      </template>

                      <!-- 发布时间 -->
                      <span class="text-base text-[#666666] flex-shrink-0">发布时间：</span>
                      <span class="text-base font-medium text-[#333333] break-words">{{
                        formatDate(contravention.publish_time) }}</span>

                      <!-- 所属税务机关 -->
                      <template v-if="contravention.department">
                        <span class="text-base text-[#666666] flex-shrink-0">所属税务机关：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ contravention.department
                        }}</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>
</template>

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

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 taxContraventionData = computed(() => props.data?.items || [])

// 按企业分组
const groupedTaxContraventions = computed(() => {
  const groups = {}

  taxContraventionData.value.forEach(contravention => {
    const companyName = contravention.taxpayer_name || '未知企业'

    if (!groups[companyName]) {
      groups[companyName] = {
        companyName,
        contraventions: [],
        totalContraventions: 0
      }
    }

    groups[companyName].contraventions.push(contravention)
    groups[companyName].totalContraventions++
  })

  return Object.values(groups)
})

// 用于跟踪展开的违法卡片
const expandedContravention = ref({})

// 切换展开/收起违法详情
const toggleContraventionExpand = (contraventionId, listType, index) => {
  const uniqueKey = `${contraventionId}_${listType}_${index}`
  expandedContravention.value[uniqueKey] = !expandedContravention.value[uniqueKey]
}

// 检查违法是否展开
const isContraventionExpanded = (contraventionId, listType, index) => {
  const uniqueKey = `${contraventionId}_${listType}_${index}`
  return !!expandedContravention.value[uniqueKey]
}

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

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