tydata-webview-v2/src/ui/CQYGL3F8E/components/TaxRisk/OwnTax.vue

<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/qsgg.png" alt="欠税公告" class="w-8 h-8 object-contain" />
        </div>
        <span class="font-bold text-gray-800">欠税公告</span>
      </div>

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

            <!-- 欠税记录列表 -->
            <div class="space-y-3">
              <div v-for="(tax, index) in group.ownTaxes" :key="index"
                class="tax-wrapper bg-white rounded-lg overflow-hidden shadow-sm border border-[#EEEEEE]">
                <!-- 欠税卡片 - 可点击展开 -->
                <div class="cursor-pointer relative" @click="toggleTaxExpand(tax.taxIdNumber, 'ownTax', index)">
                  <!-- 税务类型标签 -->
                  <div class="px-4 py-2 border-b border-[#0000000A]">
                    <div class="flex items-center gap-2">
                      <span v-if="tax.type" class="px-2 py-1 text-xs rounded font-medium bg-blue-50 text-blue-600">
                        {{ tax.type }}
                      </span>
                      <span class="font-medium text-[#333333]">{{ tax.taxCategory || '企业所得税' }}</span>
                    </div>
                  </div>

                  <!-- 欠税信息 -->
                  <div class="px-4">
                    <!-- 纳税人 -->
                    <div class="text-sm text-gray-600 mb-2">
                      <span>纳税人：</span>
                      <span>{{ tax.name || '—' }}</span>
                    </div>

                    <!-- 发布日期 -->
                    <div class="text-sm text-gray-600 mb-2">
                      <span>发布：</span>
                      <span>{{ formatDate(tax.publishDate) }}</span>
                    </div>

                    <!-- 欠税金额 -->
                    <div class="text-sm mb-2">
                      <span class="text-gray-600">欠税金额：</span>
                      <span class="font-bold text-[#A22525]">{{ tax.ownTaxAmount || '—' }}</span>
                    </div>

                    <!-- 识别号和纳税人类型 -->
                    <div class="flex items-center gap-2 flex-wrap mb-2">
                      <span class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525]">
                        识别号: {{ tax.taxIdNumber || '—' }}
                      </span>
                      <span class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525]">
                        纳税人类型: {{ tax.taxpayerType || '—' }}
                      </span>
                      <span v-if="tax.legalpersonName" class="text-xs bg-[#A225251A] rounded py-1 px-2 text-[#A22525]">
                        法人: {{ tax.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': isTaxExpanded(tax.taxIdNumber, 'ownTax', index) }" />
                  </div>
                </div>

                <!-- 欠税详情抽屉 -->
                <div class="mt-4 overflow-hidden transition-all duration-300 ease-in-out" :class="{
                  'max-h-0 opacity-0': !isTaxExpanded(tax.taxIdNumber, 'ownTax', index),
                  'max-h-none opacity-100': isTaxExpanded(tax.taxIdNumber, 'ownTax', 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">{{ tax.name || '-' }}</span>

                      <!-- 纳税人识别号 -->
                      <span class="text-base text-[#666666] flex-shrink-0">纳税人识别号：</span>
                      <span class="text-base font-medium text-[#333333] break-words">{{ tax.taxIdNumber || '-' }}</span>

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

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

                      <!-- 欠税税种 -->
                      <template v-if="tax.taxCategory">
                        <span class="text-base text-[#666666] flex-shrink-0">欠税税种：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ tax.taxCategory }}</span>
                      </template>

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

                      <!-- 欠税金额 -->
                      <span class="text-base text-[#666666] flex-shrink-0">欠税金额：</span>
                      <span class="text-base font-medium text-[#333333] break-words">{{ tax.ownTaxAmount || '-'
                        }}</span>

                      <!-- 欠税余额 -->
                      <template v-if="tax.ownTaxBalance">
                        <span class="text-base text-[#666666] flex-shrink-0">欠税余额：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ tax.ownTaxBalance }}</span>
                      </template>

                      <!-- 新发生欠税余额 -->
                      <template v-if="tax.newOwnTaxBalance">
                        <span class="text-base text-[#666666] flex-shrink-0">新发生欠税余额：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ tax.newOwnTaxBalance }}</span>
                      </template>

                      <!-- 法人或负责人 -->
                      <template v-if="tax.legalpersonName">
                        <span class="text-base text-[#666666] flex-shrink-0">法人或负责人：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ tax.legalpersonName }}</span>
                      </template>

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

                      <!-- 经营地点 -->
                      <template v-if="tax.location">
                        <span class="text-base text-[#666666] flex-shrink-0">经营地点：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ tax.location }}</span>
                      </template>

                      <!-- 税务机关 -->
                      <template v-if="tax.department">
                        <span class="text-base text-[#666666] flex-shrink-0">税务机关：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ tax.department }}</span>
                      </template>

                      <!-- 证件号码 -->
                      <template v-if="tax.personIdNumber">
                        <span class="text-base text-[#666666] flex-shrink-0">证件号码：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ tax.personIdNumber }}</span>
                      </template>

                      <!-- 证件名称 -->
                      <template v-if="tax.personIdName">
                        <span class="text-base text-[#666666] flex-shrink-0">证件名称：</span>
                        <span class="text-base font-medium text-[#333333] break-words">{{ tax.personIdName }}</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 ownTaxData = computed(() => props.data?.items || [])

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

  ownTaxData.value.forEach(tax => {
    const companyName = tax.name || '未知企业'

    if (!groups[companyName]) {
      groups[companyName] = {
        companyName,
        ownTaxes: [],
        totalOwnTax: 0
      }
    }

    groups[companyName].ownTaxes.push(tax)
    groups[companyName].totalOwnTax++
  })

  return Object.values(groups)
})

// 用于跟踪展开的欠税卡片
const expandedTax = ref({})

// 切换展开/收起欠税详情
const toggleTaxExpand = (taxId, listType, index) => {
  const uniqueKey = `${taxId}_${listType}_${index}`
  expandedTax.value[uniqueKey] = !expandedTax.value[uniqueKey]
}

// 检查欠税是否展开
const isTaxExpanded = (taxId, listType, index) => {
  const uniqueKey = `${taxId}_${listType}_${index}`
  return !!expandedTax.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>