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

<template>
  <div>
    <LTitle title="欠税公告" class="mb-4" />
    
    <!-- 按企业分组显示 -->
    <div v-if="groupedOwnTax.length > 0" class="space-y-6">
      <div v-for="(group, groupIndex) in groupedOwnTax" :key="groupIndex" class="own-tax-group">
        <!-- 企业标题 -->
        <div class="bg-gradient-to-r from-red-100 to-red-200 text-red-800 rounded-t-lg px-6 py-4 shadow-sm border border-red-200">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <div class="w-8 h-8 bg-red-300 bg-opacity-30 rounded-full flex items-center justify-center mr-3">
                💰
              </div>
              <div>
                <div class="text-lg font-semibold">{{ group.companyName }}</div>
                <div class="text-red-600 text-sm">欠税企业</div>
              </div>
            </div>
            <div class="text-right">
              <div class="text-2xl font-bold">{{ group.totalOwnTax }}</div>
              <div class="text-red-600 text-sm">欠税记录</div>
            </div>
          </div>
        </div>

        <!-- 欠税记录列表 -->
        <div class="bg-white border-l-4 border-r-4 border-b-4 border-red-100 rounded-b-lg">
          <div class="space-y-3 p-4">
            <div v-for="(tax, index) in group.ownTaxes" :key="index" class="tax-wrapper">
              <div
                class="bg-white rounded-lg overflow-hidden shadow-sm border border-gray-200 hover:border-red-300 hover:shadow-md transition-all duration-300 cursor-pointer relative"
                :class="{
                  'border-red-400 shadow-md': isTaxExpanded(tax.taxIdNumber, 'ownTax', index),
                }"
                @click="toggleTaxExpand(tax.taxIdNumber, 'ownTax', index)"
              >
                <!-- 欠税类型指示器 -->
                <div class="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-red-300 to-orange-300"></div>
                
                <!-- 欠税信息 -->
                <div class="pl-4 pr-4 py-3">
                  <div class="flex items-center justify-between mb-2">
                    <div class="flex-1">
                      <div class="flex items-center gap-3 mb-1">
                        <span 
                          class="px-3 py-1 rounded-full text-sm font-medium"
                          :class="getTaxTypeClass(tax.type)"
                        >
                          {{ tax.type || '税务' }}
                        </span>
                        <span class="text-lg font-semibold text-gray-800">{{ tax.taxCategory || '欠税' }}</span>
                      </div>
                      <div class="text-sm text-gray-600 flex items-center gap-2">
                        <span class="text-gray-500">
                          纳税人: {{ tax.name }}
                        </span>
                        <span class="text-gray-400">|</span>
                        <span class="text-gray-500">
                          发布: {{ formatDate(tax.publishDate) }}
                        </span>
                      </div>
                    </div>
                    <div class="text-right">
                      <div class="text-xl font-bold text-red-600">{{ tax.ownTaxAmount || '—' }}</div>
                      <div class="text-xs text-gray-500">欠税金额</div>
                    </div>
                  </div>

                  <!-- 关键信息标签 -->
                  <div class="flex flex-wrap gap-2">
                    <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-700">
                      识别号: {{ tax.taxIdNumber }}
                    </span>
                    <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700">
                      纳税人类型: {{ tax.taxpayerType }}
                    </span>
                    <span v-if="tax.ownTaxBalance && tax.ownTaxBalance !== tax.ownTaxAmount" class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-700">
                      余额: {{ tax.ownTaxBalance }}
                    </span>
                    <span v-if="tax.legalpersonName" class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-700">
                      法人: {{ tax.legalpersonName }}
                    </span>
                  </div>
                </div>

                <!-- 展开指示器 -->
                <div
                  class="absolute right-4 bottom-2 flex items-center text-xs text-gray-500 hover:text-red-600 transition-colors duration-300"
                  :class="{
                    'text-red-600': isTaxExpanded(tax.taxIdNumber, 'ownTax', index),
                  }"
                >
                  <span class="mr-1">{{
                    isTaxExpanded(tax.taxIdNumber, 'ownTax', index) ? '收起详情' : '查看详情'
                  }}</span>
                  <div
                    class="w-5 h-5 rounded-full bg-gray-100 flex items-center justify-center transition-transform duration-300"
                    :class="{
                      'bg-red-100 text-red-600 rotate-180': isTaxExpanded(
                        tax.taxIdNumber,
                        'ownTax',
                        index,
                      ),
                    }"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-3 w-3"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                  </div>
                </div>
              </div>

              <!-- 欠税详情抽屉 -->
              <div
                class="overflow-hidden transition-all duration-500 ease-in-out"
                :class="{
                  'max-h-0 opacity-0': !isTaxExpanded(tax.taxIdNumber, 'ownTax', index),
                  'max-h-[600px] opacity-100': isTaxExpanded(tax.taxIdNumber, 'ownTax', index),
                }"
              >
                <div
                  class="mt-1 bg-gray-50 rounded-lg overflow-hidden p-4 pb-0 border border-gray-200 transform transition-all duration-300 max-h-[600px] overflow-y-auto"
                >
                  <div class="relative">
                    <!-- 欠税基本信息 -->
                    <div class="mb-6 relative">
                      <div class="flex items-center mb-3 relative z-10">
                        <div class="w-7 h-7 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-3">
                          💰
                        </div>
                        <div class="text-base font-medium text-red-700">欠税基本信息</div>
                      </div>
                      <div class="pl-10">
                        <div class="bg-red-50 p-4 rounded-lg border border-red-100">
                          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                            <div>
                              <div class="text-xs text-gray-500 mb-1">欠税金额</div>
                              <div class="text-sm font-medium text-red-700">{{ tax.ownTaxAmount || '—' }}</div>
                            </div>
                            <div>
                              <div class="text-xs text-gray-500 mb-1">欠税余额</div>
                              <div class="text-sm text-gray-800">{{ tax.ownTaxBalance || '—' }}</div>
                            </div>
                            <div>
                              <div class="text-xs text-gray-500 mb-1">新发生欠税余额</div>
                              <div class="text-sm text-gray-800">{{ tax.newOwnTaxBalance || '—' }}</div>
                            </div>
                            <div>
                              <div class="text-xs text-gray-500 mb-1">税务类型</div>
                              <div class="text-sm text-gray-800">{{ tax.type || '—' }}</div>
                            </div>
                            <div>
                              <div class="text-xs text-gray-500 mb-1">欠税税种</div>
                              <div class="text-sm text-gray-800">{{ tax.taxCategory || '—' }}</div>
                            </div>
                            <div>
                              <div class="text-xs text-gray-500 mb-1">发布时间</div>
                              <div class="text-sm text-gray-800">{{ formatDate(tax.publishDate) }}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 垂直连接线 -->
                    <div class="absolute left-0 top-8 bottom-0 w-0.5 bg-gray-200 ml-3"></div>

                    <!-- 纳税人信息 -->
                    <div class="space-y-6">
                      <div class="relative">
                        <!-- 分组标题 -->
                        <div class="flex items-center mb-3 relative z-10">
                          <div class="w-7 h-7 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-3">
                            🏢
                          </div>
                          <div class="text-base font-medium text-gray-700">纳税人信息</div>
                        </div>

                        <!-- 分组内容 -->
                        <div class="pl-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                          <div class="bg-white rounded-lg p-3 shadow-sm">
                            <div class="text-xs text-gray-500 mb-1">纳税人名称</div>
                            <div class="text-sm font-medium text-gray-800">{{ tax.name || '—' }}</div>
                          </div>
                          <div class="bg-white rounded-lg p-3 shadow-sm">
                            <div class="text-xs text-gray-500 mb-1">纳税人识别号</div>
                            <div class="text-sm font-medium text-gray-800">{{ tax.taxIdNumber || '—' }}</div>
                          </div>
                          <div class="bg-white rounded-lg p-3 shadow-sm">
                            <div class="text-xs text-gray-500 mb-1">纳税人类型</div>
                            <div class="text-sm font-medium text-gray-800">{{ tax.taxpayerType || '—' }}</div>
                          </div>
                          <div class="bg-white rounded-lg p-3 shadow-sm">
                            <div class="text-xs text-gray-500 mb-1">法人或负责人</div>
                            <div class="text-sm font-medium text-gray-800">{{ tax.legalpersonName || '—' }}</div>
                          </div>
                          <div class="bg-white rounded-lg p-3 shadow-sm">
                            <div class="text-xs text-gray-500 mb-1">注册类型</div>
                            <div class="text-sm font-medium text-gray-800">{{ tax.regType || '—' }}</div>
                          </div>
                          <div class="bg-white rounded-lg p-3 shadow-sm">
                            <div class="text-xs text-gray-500 mb-1">经营地点</div>
                            <div class="text-sm font-medium text-gray-800">{{ tax.location || '—' }}</div>
                          </div>
                          <div class="bg-white rounded-lg p-3 shadow-sm">
                            <div class="text-xs text-gray-500 mb-1">税务机关</div>
                            <div class="text-sm font-medium text-gray-800">{{ tax.department || '—' }}</div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 证件信息 -->
                    <div v-if="tax.personIdNumber || tax.personIdName" class="mt-6 relative">
                      <div class="flex items-center mb-3 relative z-10">
                        <div class="w-7 h-7 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-3">
                          🆔
                        </div>
                        <div class="text-base font-medium text-gray-700">证件信息</div>
                      </div>
                      <div class="pl-10">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div v-if="tax.personIdNumber" class="bg-white rounded-lg p-3 shadow-sm">
                            <div class="text-xs text-gray-500 mb-1">证件号码</div>
                            <div class="text-sm font-medium text-gray-800">{{ tax.personIdNumber }}</div>
                          </div>
                          <div v-if="tax.personIdName" class="bg-white rounded-lg p-3 shadow-sm">
                            <div class="text-xs text-gray-500 mb-1">证件名称</div>
                            <div class="text-sm font-medium text-gray-800">{{ tax.personIdName }}</div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 底部收起按钮 -->
                    <div class="flex justify-center sticky bottom-0 pt-2 pb-2 bg-gradient-to-t from-gray-50 to-transparent">
                      <button
                        @click.stop="toggleTaxExpand(tax.taxIdNumber, 'ownTax', index)"
                        class="flex items-center px-4 py-2 rounded-full bg-red-50 text-red-600 hover:bg-red-100 transition-colors duration-300"
                      >
                        <span class="mr-1">收起详情</span>
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="h-4 w-4 transform rotate-180"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                        >
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                      </button>
                    </div>
                  </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>
</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 }),
  },
})

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 getTaxTypeClass = (type) => {
  if (!type) return 'bg-gray-100 text-gray-500'
  
  if (type.includes('国税')) {
    return 'bg-blue-100 text-blue-700'
  } else if (type.includes('地税')) {
    return 'bg-green-100 text-green-700'
  } else {
    return 'bg-yellow-100 text-yellow-700'
  }
}

// 格式化日期显示
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>