<template>
  <div class="livestock-policy-management">
    <div class="page-header">
      <h2>生资保单管理</h2>
      <a-space>
        <a-button @click="handleExport">
          <DownloadOutlined />
          导出Excel
        </a-button>
        <a-button type="primary" @click="showCreateModal">
          <PlusOutlined />
          新建保单
        </a-button>
      </a-space>
    </div>

    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-input
            v-model:value="searchForm.policy_no"
            placeholder="保单编号"
            allow-clear
          />
        </a-col>
        <a-col :span="6">
          <a-input
            v-model:value="searchForm.policyholder_name"
            placeholder="投保人姓名"
            allow-clear
          />
        </a-col>
        <a-col :span="6">
          <a-select
            v-model:value="searchForm.policy_status"
            placeholder="保单状态"
            allow-clear
            style="width: 100%"
          >
            <a-select-option value="draft">草稿</a-select-option>
            <a-select-option value="active">生效</a-select-option>
            <a-select-option value="expired">过期</a-select-option>
            <a-select-option value="cancelled">已取消</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-select
            v-model:value="searchForm.payment_status"
            placeholder="支付状态"
            allow-clear
            style="width: 100%"
          >
            <a-select-option value="unpaid">未支付</a-select-option>
            <a-select-option value="paid">已支付</a-select-option>
            <a-select-option value="partial">部分支付</a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <a-row :gutter="16" style="margin-top: 16px">
        <a-col :span="8">
          <a-range-picker
            v-model:value="searchForm.dateRange"
            :placeholder="['开始日期', '结束日期']"
            style="width: 100%"
          />
        </a-col>
        <a-col :span="8">
          <a-button type="primary" @click="handleSearch">
            <SearchOutlined />
            搜索
          </a-button>
          <a-button style="margin-left: 8px" @click="handleReset">
            重置
          </a-button>
        </a-col>
      </a-row>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'policy_status'">
            <a-tag :color="getStatusColor(record.policy_status)">
              {{ getStatusText(record.policy_status) }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'payment_status'">
            <a-tag :color="getPaymentStatusColor(record.payment_status)">
              {{ getPaymentStatusText(record.payment_status) }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'total_value'">
            ¥{{ record.total_value?.toLocaleString() }}
          </template>
          <template v-else-if="column.key === 'premium_amount'">
            ¥{{ record.premium_amount?.toLocaleString() }}
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button type="link" size="small" @click="viewDetail(record)">
                查看
              </a-button>
              <a-button type="link" size="small" @click="editRecord(record)">
                编辑
              </a-button>
              <a-dropdown>
                <template #overlay>
                  <a-menu @click="handleMenuClick($event, record)">
                    <a-menu-item key="activate" v-if="record.policy_status === 'draft'">
                      激活保单
                    </a-menu-item>
                    <a-menu-item key="cancel" v-if="['draft', 'active'].includes(record.policy_status)">
                      取消保单
                    </a-menu-item>
                    <a-menu-item key="payment" v-if="record.payment_status === 'unpaid'">
                      标记已支付
                    </a-menu-item>
                    <a-menu-item key="delete" style="color: #ff4d4f;">
                      删除保单
                    </a-menu-item>
                  </a-menu>
                </template>
                <a-button type="link" size="small">
                  更多 <DownOutlined />
                </a-button>
              </a-dropdown>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 创建/编辑保单弹窗 -->
    <a-modal
      v-model:open="modalVisible"
      :title="modalTitle"
      width="800px"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <a-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        layout="vertical"
      >
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="投保人姓名" name="policyholder_name">
              <a-input v-model:value="formData.policyholder_name" placeholder="请输入投保人姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="投保人电话" name="policyholder_phone">
              <a-input v-model:value="formData.policyholder_phone" placeholder="请输入投保人电话" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="身份证号" name="policyholder_id_card">
              <a-input v-model:value="formData.policyholder_id_card" placeholder="请输入身份证号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="牲畜类型" name="livestock_type_id">
              <a-select
                v-model:value="formData.livestock_type_id"
                placeholder="请选择牲畜类型"
                @change="handleLivestockTypeChange"
              >
                <a-select-option
                  v-for="type in livestockTypes"
                  :key="type.id"
                  :value="type.id"
                >
                  {{ type.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="投保人地址" name="policyholder_address">
          <a-textarea v-model:value="formData.policyholder_address" placeholder="请输入投保人地址" :rows="2" />
        </a-form-item>
        
        <!-- 养殖场信息 -->
        <a-divider orientation="left">养殖场信息</a-divider>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="养殖场名称" name="farm_name">
              <a-input v-model:value="formData.farm_name" placeholder="请输入养殖场名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="养殖场许可证号" name="farm_license">
              <a-input v-model:value="formData.farm_license" placeholder="请输入养殖场许可证号" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="养殖场地址" name="farm_address">
          <a-textarea v-model:value="formData.farm_address" placeholder="请输入养殖场地址" :rows="2" />
        </a-form-item>
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item label="牲畜数量" name="livestock_count">
              <a-input-number
                v-model:value="formData.livestock_count"
                placeholder="请输入数量"
                :min="1"
                style="width: 100%"
                @change="calculateAmounts"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="单头价值" name="unit_value">
              <a-input-number
                v-model:value="formData.unit_value"
                placeholder="请输入单头价值"
                :min="0"
                :precision="2"
                style="width: 100%"
                @change="calculateAmounts"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="保费费率">
              <a-input
                :value="getCurrentPremiumRate()"
                disabled
                placeholder="自动计算"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item label="总保额">
              <a-input
                :value="`¥${formData.total_value?.toLocaleString() || '0'}`"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="保费金额">
              <a-input
                :value="`¥${formData.premium_amount?.toLocaleString() || '0'}`"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="保险开始日期" name="start_date">
              <a-date-picker
                v-model:value="formData.start_date"
                placeholder="请选择开始日期"
                style="width: 100%"
                @change="handleStartDateChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="保险结束日期" name="end_date">
              <a-date-picker
                v-model:value="formData.end_date"
                placeholder="请选择结束日期"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="备注" name="notes">
          <a-textarea v-model:value="formData.notes" placeholder="请输入备注" :rows="3" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 详情查看弹窗 -->
    <a-modal
      v-model:open="detailVisible"
      title="保单详情"
      width="800px"
      :footer="null"
    >
      <a-descriptions :column="2" bordered v-if="currentRecord">
        <a-descriptions-item label="保单编号">{{ currentRecord.policy_no }}</a-descriptions-item>
        <a-descriptions-item label="保单状态">
          <a-tag :color="getStatusColor(currentRecord.policy_status)">
            {{ getStatusText(currentRecord.policy_status) }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="投保人姓名">{{ currentRecord.policyholder_name }}</a-descriptions-item>
        <a-descriptions-item label="投保人电话">{{ currentRecord.policyholder_phone }}</a-descriptions-item>
        <a-descriptions-item label="身份证号">{{ currentRecord.policyholder_id_card }}</a-descriptions-item>
        <a-descriptions-item label="牲畜类型">{{ currentRecord.livestock_type?.name }}</a-descriptions-item>
        <a-descriptions-item label="投保人地址" :span="2">{{ currentRecord.policyholder_address }}</a-descriptions-item>
        <a-descriptions-item label="养殖场名称">{{ currentRecord.farm_name || '无' }}</a-descriptions-item>
        <a-descriptions-item label="养殖场地址">{{ currentRecord.farm_address || '无' }}</a-descriptions-item>
        <a-descriptions-item label="养殖场许可证号" :span="2">{{ currentRecord.farm_license || '无' }}</a-descriptions-item>
        <a-descriptions-item label="牲畜数量">{{ currentRecord.livestock_count }}头</a-descriptions-item>
        <a-descriptions-item label="单头价值">¥{{ currentRecord.unit_value?.toLocaleString() }}</a-descriptions-item>
        <a-descriptions-item label="总保额">¥{{ currentRecord.total_value?.toLocaleString() }}</a-descriptions-item>
        <a-descriptions-item label="保费费率">{{ currentRecord.livestock_type?.premium_rate ? (currentRecord.livestock_type.premium_rate * 100).toFixed(2) + '%' : '未知' }}</a-descriptions-item>
        <a-descriptions-item label="保费金额">¥{{ currentRecord.premium_amount?.toLocaleString() }}</a-descriptions-item>
        <a-descriptions-item label="支付状态">
          <a-tag :color="getPaymentStatusColor(currentRecord.payment_status)">
            {{ getPaymentStatusText(currentRecord.payment_status) }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="保险开始日期">{{ currentRecord.start_date }}</a-descriptions-item>
        <a-descriptions-item label="保险结束日期">{{ currentRecord.end_date }}</a-descriptions-item>
        <a-descriptions-item label="支付时间">{{ currentRecord.payment_date || '未支付' }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ formatDateTime(currentRecord.created_at) }}</a-descriptions-item>
        <a-descriptions-item label="备注" :span="2">{{ currentRecord.notes || '无' }}</a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { message, Modal } from 'ant-design-vue'
import dayjs from 'dayjs'
import {
  PlusOutlined,
  SearchOutlined,
  DownOutlined,
  DownloadOutlined
} from '@ant-design/icons-vue'
import { livestockPolicyApi, livestockTypeApi } from '@/utils/api'

// 响应式数据
const loading = ref(false)
const tableData = ref([])
const modalVisible = ref(false)
const detailVisible = ref(false)
const currentRecord = ref(null)
const formRef = ref()
const livestockTypes = ref([])

// 搜索表单
const searchForm = reactive({
  policy_no: '',
  policyholder_name: '',
  policy_status: undefined,
  payment_status: undefined,
  dateRange: []
})

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条记录`
})

// 表单数据
const formData = reactive({
  policy_no: '',
  policyholder_name: '',
  policyholder_phone: '',
  policyholder_id_card: '',
  policyholder_address: '',
  farm_name: '',
  farm_address: '',
  farm_license: '',
  livestock_type_id: undefined,
  livestock_count: undefined,
  unit_value: undefined,
  total_value: 0,
  premium_amount: 0,
  start_date: undefined,
  end_date: undefined,
  policy_status: 'active',
  payment_status: 'unpaid',
  payment_date: undefined,
  policy_document_url: '',
  notes: ''
})

// 表单验证规则
const formRules = {
  policyholder_name: [{ required: true, message: '请输入投保人姓名' }],
  policyholder_phone: [
    { required: true, message: '请输入投保人电话' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
  ],
  policyholder_id_card: [
    { required: true, message: '请输入身份证号' },
    { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号' }
  ],
  policyholder_address: [{ required: true, message: '请输入投保人地址' }],
  livestock_type_id: [{ required: true, message: '请选择牲畜类型' }],
  livestock_count: [{ required: true, message: '请输入牲畜数量' }],
  unit_value: [{ required: true, message: '请输入单头价值' }],
  start_date: [{ required: true, message: '请选择保险开始日期' }],
  end_date: [{ required: true, message: '请选择保险结束日期' }]
}

// 计算属性
const modalTitle = computed(() => {
  return currentRecord.value ? '编辑保单' : '新建保单'
})

// 表格列配置
const columns = [
  {
    title: '保单编号',
    dataIndex: 'policy_no',
    key: 'policy_no',
    width: 150
  },
  {
    title: '投保人姓名',
    dataIndex: 'policyholder_name',
    key: 'policyholder_name',
    width: 100
  },
  {
    title: '投保人电话',
    dataIndex: 'policyholder_phone',
    key: 'policyholder_phone',
    width: 120
  },
  {
    title: '牲畜类型',
    dataIndex: ['livestock_type', 'name'],
    key: 'livestock_type',
    width: 100
  },
  {
    title: '数量',
    dataIndex: 'livestock_count',
    key: 'livestock_count',
    width: 80,
    customRender: ({ text }) => `${text}头`
  },
  {
    title: '总保额',
    dataIndex: 'total_value',
    key: 'total_value',
    width: 120
  },
  {
    title: '保费金额',
    dataIndex: 'premium_amount',
    key: 'premium_amount',
    width: 120
  },
  {
    title: '保单状态',
    dataIndex: 'policy_status',
    key: 'policy_status',
    width: 100
  },
  {
    title: '支付状态',
    dataIndex: 'payment_status',
    key: 'payment_status',
    width: 100
  },
  {
    title: '保险期间',
    key: 'insurance_period',
    width: 180,
    customRender: ({ record }) => `${record.start_date} 至 ${record.end_date}`
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right'
  }
]

// 方法
const fetchData = async () => {
  try {
    loading.value = true
    const params = {
      page: pagination.current,
      limit: pagination.pageSize,
      ...searchForm
    }
    
    // 处理日期范围
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      params.start_date = dayjs(searchForm.dateRange[0]).format('YYYY-MM-DD')
      params.end_date = dayjs(searchForm.dateRange[1]).format('YYYY-MM-DD')
    }
    delete params.dateRange

    console.log('生资保单API请求参数:', params)
    const response = await livestockPolicyApi.getList(params)
    console.log('生资保单API响应:', response)
    console.log('响应数据类型:', typeof response)
    console.log('响应code:', response.code)
    console.log('响应data:', response.data)
    
    if (response.code === 200) {
      // 后端返回的数据直接是数组格式，不是{list: [], total: 18}格式
      tableData.value = response.data || []
      pagination.total = response.pagination?.total || 0
      console.log('生资保单数据设置成功:', tableData.value.length, '条')
    } else {
      console.log('生资保单响应格式错误:', response)
      message.error('获取数据失败')
    }
  } catch (error) {
    message.error('获取数据失败')
    console.error('获取数据失败:', error)
  } finally {
    loading.value = false
  }
}

const fetchLivestockTypes = async () => {
  try {
    const response = await livestockTypeApi.getList({ status: 'active' })
    if (response.code === 200) {
      livestockTypes.value = response.data.list
    }
  } catch (error) {
    console.error('获取牲畜类型失败:', error)
    message.error('获取牲畜类型失败')
  }
}

const handleSearch = () => {
  pagination.current = 1
  fetchData()
}

const handleReset = () => {
  Object.keys(searchForm).forEach(key => {
    if (key === 'dateRange') {
      searchForm[key] = []
    } else {
      searchForm[key] = key.includes('status') ? undefined : ''
    }
  })
  pagination.current = 1
  fetchData()
}

const handleTableChange = (pag) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
  fetchData()
}

const showCreateModal = () => {
  currentRecord.value = null
  resetForm()
  modalVisible.value = true
}

const viewDetail = (record) => {
  currentRecord.value = record
  detailVisible.value = true
}

const editRecord = (record) => {
  currentRecord.value = record
  Object.keys(formData).forEach(key => {
    if (key === 'start_date' || key === 'end_date') {
      formData[key] = record[key] ? dayjs(record[key]) : undefined
    } else {
      formData[key] = record[key]
    }
  })
  modalVisible.value = true
}

const handleMenuClick = async ({ key }, record) => {
  try {
    switch (key) {
      case 'activate':
        await livestockPolicyApi.updateStatus(record.id, {
          policy_status: 'active'
        })
        message.success('保单已激活')
        fetchData()
        break
      case 'cancel':
        await livestockPolicyApi.updateStatus(record.id, {
          policy_status: 'cancelled'
        })
        message.success('保单已取消')
        fetchData()
        break
      case 'payment':
        await livestockPolicyApi.updateStatus(record.id, {
          payment_status: 'paid'
        })
        message.success('支付状态已更新')
        fetchData()
        break
      case 'delete':
        Modal.confirm({
          title: '确认删除',
          content: `确定要删除保单编号为 ${record.policy_no} 的保单吗？此操作不可恢复。`,
          okText: '确定',
          cancelText: '取消',
          okType: 'danger',
          onOk: async () => {
            try {
              await livestockPolicyApi.delete(record.id)
              message.success('保单删除成功')
              fetchData()
            } catch (error) {
              message.error('删除失败')
              console.error('删除失败:', error)
            }
          }
        })
        break
    }
  } catch (error) {
    message.error('操作失败')
    console.error('操作失败:', error)
  }
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    
    const submitData = { ...formData }
    if (submitData.start_date) {
      submitData.start_date = dayjs(submitData.start_date).format('YYYY-MM-DD')
    }
    if (submitData.end_date) {
      submitData.end_date = dayjs(submitData.end_date).format('YYYY-MM-DD')
    }

    if (currentRecord.value) {
      await livestockPolicyApi.update(currentRecord.value.id, submitData)
      message.success('保单更新成功')
    } else {
      await livestockPolicyApi.create(submitData)
      message.success('保单创建成功')
    }
    
    modalVisible.value = false
    fetchData()
  } catch (error) {
    if (error.errorFields) {
      message.error('请检查表单填写')
    } else {
      message.error('操作失败')
      console.error('操作失败:', error)
    }
  }
}

const handleCancel = () => {
  modalVisible.value = false
  resetForm()
}

const resetForm = () => {
  Object.keys(formData).forEach(key => {
    if (key === 'total_value' || key === 'premium_amount') {
      formData[key] = 0
    } else if (key === 'policy_status') {
      formData[key] = 'active'
    } else if (key === 'payment_status') {
      formData[key] = 'unpaid'
    } else if (key === 'notes' || key === 'policy_no' || key === 'policy_document_url') {
      formData[key] = ''
    } else {
      formData[key] = undefined
    }
  })
}

const handleLivestockTypeChange = (value) => {
  const selectedType = livestockTypes.value.find(type => type.id === value)
  if (selectedType) {
    // 设置单头价值的建议值（可以是最小值和最大值的中间值）
    const suggestedValue = (selectedType.unit_price_min + selectedType.unit_price_max) / 2
    formData.unit_value = suggestedValue
    calculateAmounts()
  }
}

const calculateAmounts = () => {
  if (formData.livestock_count && formData.unit_value) {
    formData.total_value = formData.livestock_count * formData.unit_value
  }
  
  // 从选中的牲畜类型获取保费费率
  if (formData.total_value && formData.livestock_type_id) {
    const selectedType = livestockTypes.value.find(type => type.id === formData.livestock_type_id)
    if (selectedType && selectedType.premium_rate) {
      formData.premium_amount = formData.total_value * selectedType.premium_rate
    }
  }
}

const handleStartDateChange = (date) => {
  if (date) {
    // 自动设置结束日期为一年后
    formData.end_date = dayjs(date).add(1, 'year').subtract(1, 'day')
  }
}

// 状态相关方法
const getStatusColor = (status) => {
  const colors = {
    draft: 'default',
    active: 'success',
    expired: 'warning',
    cancelled: 'error'
  }
  return colors[status] || 'default'
}

const getStatusText = (status) => {
  const texts = {
    draft: '草稿',
    active: '生效',
    expired: '过期',
    cancelled: '已取消'
  }
  return texts[status] || status
}

const getPaymentStatusColor = (status) => {
  const colors = {
    unpaid: 'error',
    paid: 'success',
    partial: 'warning'
  }
  return colors[status] || 'default'
}

const getPaymentStatusText = (status) => {
  const texts = {
    unpaid: '未支付',
    paid: '已支付',
    partial: '部分支付'
  }
  return texts[status] || status
}

const formatDateTime = (dateTime) => {
  return dateTime ? dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss') : ''
}

const getCurrentPremiumRate = () => {
  if (formData.livestock_type_id) {
    const selectedType = livestockTypes.value.find(type => type.id === formData.livestock_type_id)
    if (selectedType && selectedType.premium_rate) {
      return `${(selectedType.premium_rate * 100).toFixed(2)}%`
    }
  }
  return '请先选择牲畜类型'
}

const handleExport = async () => {
  try {
    loading.value = true
    const params = {
      policy_no: searchForm.policy_no || undefined,
      policyholder_name: searchForm.policyholder_name || undefined,
      policy_status: searchForm.policy_status || undefined,
      payment_status: searchForm.payment_status || undefined
    }
    
    // 过滤掉undefined值
    Object.keys(params).forEach(key => {
      if (params[key] === undefined) {
        delete params[key]
      }
    })
    
    const response = await livestockPolicyApi.export(params)
    
    // 创建下载链接
    const url = window.URL.createObjectURL(response.data)
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', `生资保单列表_${new Date().getTime()}.xlsx`)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    message.success('导出成功')
  } catch (error) {
    console.error('导出失败:', error)
    message.error('导出失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 生命周期
onMounted(() => {
  fetchData()
  fetchLivestockTypes()
})
</script>

<style scoped>
.livestock-policy-management {
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.search-section {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-section {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.ant-table) {
  font-size: 14px;
}

:deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  font-weight: 600;
}

:deep(.ant-descriptions-item-label) {
  font-weight: 600;
  background: #fafafa;
}
</style>