<template>
  <div>
    <h1>检疫记录查询</h1>
    
    <!-- 搜索和操作栏 -->
    <a-card style="margin-bottom: 16px;">
      <div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center;">
        <a-input v-model:value="searchKeyword" placeholder="输入申报单号或申报单位" style="width: 250px;">
          <template #prefix>
            <span class="iconfont icon-sousuo"></span>
          </template>
        </a-input>
        
        <a-select v-model:value="typeFilter" placeholder="检疫类型" style="width: 120px;">
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="animal">动物检疫</a-select-option>
          <a-select-option value="product">动物产品检疫</a-select-option>
          <a-select-option value="transport">运输检疫</a-select-option>
          <a-select-option value="slaughter">屠宰检疫</a-select-option>
          <a-select-option value="other">其他检疫</a-select-option>
        </a-select>
        
        <a-select v-model:value="statusFilter" placeholder="状态" style="width: 120px;">
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="approved">已通过</a-select-option>
          <a-select-option value="rejected">已驳回</a-select-option>
          <a-select-option value="cancelled">已取消</a-select-option>
        </a-select>
        
        <a-range-picker
          v-model:value="dateRange"
          style="width: 300px;"
          format="YYYY-MM-DD"
          :placeholder="['申报日期', '申报日期']"
        />
        
        <a-input v-model:value="quarantineOfficer" placeholder="检疫员" style="width: 150px;">
          <template #prefix>
            <span class="iconfont icon-yonghu"></span>
          </template>
        </a-input>
        
        <a-button type="primary" @click="handleSearch" style="margin-left: auto;">
          <span class="iconfont icon-sousuo"></span> 搜索
        </a-button>
        
        <a-button type="default" @click="handleReset">重置</a-button>
        
        <a-button type="primary" @click="handleExport">
          <span class="iconfont icon-daochu"></span> 导出记录
        </a-button>
      </div>
    </a-card>
    
    <!-- 数据列表 -->
    <a-card>
      <a-table
        :columns="columns"
        :data-source="recordsData"
        :pagination="pagination"
        row-key="id"
        :scroll="{ x: 'max-content' }"
      >
        <!-- 状态列 -->
        <template #bodyCell:status="{ record }">
          <a-tag :color="getStatusColor(record.status)">{{ getStatusText(record.status) }}</a-tag>
        </template>
        
        <!-- 操作列 -->
        <template #bodyCell:action="{ record }">
          <div style="display: flex; gap: 8px;">
            <a-button size="small" @click="handleView(record)">查看详情</a-button>
            <a-button size="small" @click="handlePrint(record.id)">打印</a-button>
          </div>
        </template>
      </a-table>
    </a-card>
    
    <!-- 查看记录详情模态框 -->
    <a-modal
      v-model:open="isViewModalOpen"
      title="检疫记录详情"
      :footer="null"
      width={800}
    >
      <div v-if="viewRecord">
        <!-- 申报信息 -->
        <div style="margin-bottom: 20px;">
          <h3 style="margin-bottom: 12px;">申报信息</h3>
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">申报单号</p>
              <p>{{ viewRecord.declarationNumber || '-' }}</p>
            </div>
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">申报单位</p>
              <p>{{ viewRecord.declarationUnit }}</p>
            </div>
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">联系人</p>
              <p>{{ viewRecord.contactPerson }}</p>
            </div>
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">联系电话</p>
              <p>{{ viewRecord.phone }}</p>
            </div>
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">申报日期</p>
              <p>{{ viewRecord.declarationDate }}</p>
            </div>
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">申报理由</p>
              <p>{{ viewRecord.reason }}</p>
            </div>
          </div>
        </div>
        
        <!-- 检疫信息 -->
        <div style="margin-bottom: 20px;">
          <h3 style="margin-bottom: 12px;">检疫信息</h3>
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">检疫类型</p>
              <p>{{ getTypeText(viewRecord.type) }}</p>
            </div>
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">检疫对象</p>
              <p>{{ viewRecord.object }}</p>
            </div>
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">数量</p>
              <p>{{ viewRecord.quantity }}</p>
            </div>
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">来源地</p>
              <p>{{ viewRecord.sourcePlace }}</p>
            </div>
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">目的地</p>
              <p>{{ viewRecord.destination }}</p>
            </div>
            <div v-if="viewRecord.transportTool">
              <p style="color: #8c8c8c; margin-bottom: 4px;">运输工具</p>
              <p>{{ viewRecord.transportTool }}</p>
            </div>
            <div v-if="viewRecord.vehicleNumber">
              <p style="color: #8c8c8c; margin-bottom: 4px;">车牌号</p>
              <p>{{ viewRecord.vehicleNumber }}</p>
            </div>
          </div>
        </div>
        
        <!-- 检疫结果 -->
        <div style="margin-bottom: 20px;">
          <h3 style="margin-bottom: 12px;">检疫结果</h3>
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">检疫员</p>
              <p>{{ viewRecord.quarantineOfficer }}</p>
            </div>
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">检疫时间</p>
              <p>{{ viewRecord.quarantineTime }}</p>
            </div>
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">检疫结果</p>
              <p><a-tag :color="getStatusColor(viewRecord.status)">{{ getStatusText(viewRecord.status) }}</a-tag></p>
            </div>
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">检疫证书编号</p>
              <p>{{ viewRecord.certificateNumber || '-' }}</p>
            </div>
          </div>
          
          <div style="margin-top: 16px;">
            <p style="color: #8c8c8c; margin-bottom: 4px;">检疫结论</p>
            <p>{{ viewRecord.quarantineComments || '-' }}</p>
          </div>
          
          <div v-if="viewRecord.reviewComments">
            <p style="color: #8c8c8c; margin-bottom: 4px;">审核意见</p>
            <p>{{ viewRecord.reviewComments || '-' }}</p>
          </div>
        </div>
        
        <!-- 附件 -->
        <div v-if="viewRecord.files && viewRecord.files.length > 0">
          <h3 style="margin-bottom: 12px;">相关附件</h3>
          <div style="display: flex; flex-wrap: wrap; gap: 12px;">
            <a-tag v-for="file in viewRecord.files" :key="file.id" color="blue" style="cursor: pointer;">
              {{ file.name }}
              <template #closeIcon>
                <span class="iconfont icon-download"></span>
              </template>
            </a-tag>
          </div>
        </div>
      </div>
      
      <div style="display: flex; justify-content: flex-end; margin-top: 24px;">
        <a-button @click="handleCloseView">关闭</a-button>
        <a-button type="primary" @click="handlePrint(viewRecord.id)" style="margin-left: 12px;">打印</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'

// 搜索条件
const searchKeyword = ref('')
const typeFilter = ref('')
const statusFilter = ref('')
const dateRange = ref([])
const quarantineOfficer = ref('')

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
})

// 模态框状态
const isViewModalOpen = ref(false)
const viewRecord = ref(null)

// 记录列表数据（模拟数据）
const recordsData = ref([
  {
    id: '1',
    declarationNumber: 'J202310010001',
    declarationUnit: '郑州市金水区阳光养殖场',
    contactPerson: '张三',
    phone: '13812345678',
    type: 'animal',
    object: '牛',
    quantity: 150,
    sourcePlace: '郑州市金水区',
    destination: '河南省商丘市',
    transportTool: '货车',
    vehicleNumber: '豫A12345',
    reason: '牛只销售运输',
    files: [],
    reviewComments: '符合检疫要求，同意通过',
    quarantineOfficer: '李检疫',
    quarantineTime: '2023-10-01 15:30',
    quarantineComments: '经检疫，该批牛只健康状况良好，无传染病症状，符合出证条件。',
    certificateNumber: 'QS202310010001',
    status: 'approved',
    declarationDate: '2023-10-01'
  },
  {
    id: '2',
    declarationNumber: 'J202310050001',
    declarationUnit: '中牟县希望养殖场',
    contactPerson: '钱七',
    phone: '13512345678',
    type: 'product',
    object: '牛奶',
    quantity: 2000,
    sourcePlace: '中牟县',
    destination: '河南省郑州市',
    transportTool: '冷藏车',
    vehicleNumber: '豫A45678',
    reason: '牛奶产品销售',
    files: [],
    reviewComments: '符合检疫要求，同意通过',
    quarantineOfficer: '王检疫',
    quarantineTime: '2023-10-05 10:20',
    quarantineComments: '经检疫，该批牛奶符合国家标准，无致病菌，质量合格。',
    certificateNumber: 'QS202310050001',
    status: 'approved',
    declarationDate: '2023-10-05'
  },
  {
    id: '3',
    declarationNumber: 'J202310030001',
    declarationUnit: '新密市祥和养殖场',
    contactPerson: '王五',
    phone: '13712345678',
    type: 'slaughter',
    object: '牛',
    quantity: 80,
    sourcePlace: '新密市',
    destination: '新密市肉类加工厂',
    transportTool: '货车',
    vehicleNumber: '豫A23456',
    reason: '牛只屠宰加工',
    files: [],
    reviewComments: '资料不全，需补充产地检疫证明',
    quarantineOfficer: '赵检疫',
    quarantineTime: '2023-10-03 14:10',
    quarantineComments: '经检查，申报资料不全，缺少产地检疫证明，需补充材料后重新申报。',
    certificateNumber: '',
    status: 'rejected',
    declarationDate: '2023-10-03'
  },
  {
    id: '4',
    declarationNumber: 'J202310070001',
    declarationUnit: '巩义市明星养殖场',
    contactPerson: '周九',
    phone: '13312345678',
    type: 'slaughter',
    object: '牛',
    quantity: 60,
    sourcePlace: '巩义市',
    destination: '巩义市屠宰场',
    transportTool: '货车',
    vehicleNumber: '豫A67890',
    reason: '牛只屠宰',
    files: [],
    reviewComments: '符合检疫要求，同意通过',
    quarantineOfficer: '孙检疫',
    quarantineTime: '2023-10-07 09:45',
    quarantineComments: '经检疫，该批牛只健康状况良好，适合屠宰。',
    certificateNumber: 'QS202310070001',
    status: 'approved',
    declarationDate: '2023-10-07'
  },
  {
    id: '5',
    declarationNumber: 'J202310090001',
    declarationUnit: '二七区红火养殖场',
    contactPerson: '郑十一',
    phone: '13112345678',
    type: 'animal',
    object: '牛',
    quantity: 100,
    sourcePlace: '二七区',
    destination: '江苏省南京市',
    transportTool: '货车',
    vehicleNumber: '豫A78901',
    reason: '牛只销售运输',
    files: [],
    reviewComments: '主动取消',
    quarantineOfficer: '',
    quarantineTime: '',
    quarantineComments: '',
    certificateNumber: '',
    status: 'cancelled',
    declarationDate: '2023-10-09'
  },
  {
    id: '6',
    declarationNumber: 'J202309250001',
    declarationUnit: '荥阳市绿源养殖场',
    contactPerson: '陈十二',
    phone: '13912345679',
    type: 'animal',
    object: '牛',
    quantity: 120,
    sourcePlace: '荥阳市',
    destination: '山东省济南市',
    transportTool: '货车',
    vehicleNumber: '豫A89012',
    reason: '牛只销售运输',
    files: [],
    reviewComments: '符合检疫要求，同意通过',
    quarantineOfficer: '杨检疫',
    quarantineTime: '2023-09-25 16:20',
    quarantineComments: '经检疫，该批牛只健康状况良好，无传染病症状，符合出证条件。',
    certificateNumber: 'QS202309250001',
    status: 'approved',
    declarationDate: '2023-09-25'
  },
  {
    id: '7',
    declarationNumber: 'J202309280001',
    declarationUnit: '新郑市幸福养殖场',
    contactPerson: '吴十三',
    phone: '13612345679',
    type: 'product',
    object: '牛肉制品',
    quantity: 400,
    sourcePlace: '新郑市',
    destination: '北京市',
    transportTool: '冷链物流',
    vehicleNumber: '豫A90123',
    reason: '牛肉制品销售',
    files: [],
    reviewComments: '符合检疫要求，同意通过',
    quarantineOfficer: '郑检疫',
    quarantineTime: '2023-09-28 11:30',
    quarantineComments: '经检疫，该批牛肉制品符合食品安全标准，无质量问题。',
    certificateNumber: 'QS202309280001',
    status: 'approved',
    declarationDate: '2023-09-28'
  },
  {
    id: '8',
    declarationNumber: 'J202309300001',
    declarationUnit: '登封市丰收养殖场',
    contactPerson: '冯十四',
    phone: '13412345679',
    type: 'animal',
    object: '牛',
    quantity: 140,
    sourcePlace: '登封市',
    destination: '湖北省武汉市',
    transportTool: '货车',
    vehicleNumber: '豫A01234',
    reason: '牛只销售运输',
    files: [],
    reviewComments: '资料不全，需补充免疫记录',
    quarantineOfficer: '褚检疫',
    quarantineTime: '2023-09-30 13:45',
    quarantineComments: '经检查，申报资料不全，缺少牛只免疫记录，需补充材料后重新申报。',
    certificateNumber: '',
    status: 'rejected',
    declarationDate: '2023-09-30'
  },
  {
    id: '9',
    declarationNumber: 'J202309200001',
    declarationUnit: '管城回族区快乐养殖场',
    contactPerson: '卫十五',
    phone: '13212345679',
    type: 'animal',
    object: '牛',
    quantity: 90,
    sourcePlace: '管城回族区',
    destination: '陕西省西安市',
    transportTool: '货车',
    vehicleNumber: '豫A12346',
    reason: '牛只销售运输',
    files: [],
    reviewComments: '符合检疫要求，同意通过',
    quarantineOfficer: '蒋检疫',
    quarantineTime: '2023-09-20 10:15',
    quarantineComments: '经检疫，该批牛只健康状况良好，无传染病症状，符合出证条件。',
    certificateNumber: 'QS202309200001',
    status: 'approved',
    declarationDate: '2023-09-20'
  },
  {
    id: '10',
    declarationNumber: 'J202309150001',
    declarationUnit: '惠济区温馨养殖场',
    contactPerson: '沈十六',
    phone: '13012345679',
    type: 'product',
    object: '牛奶',
    quantity: 1500,
    sourcePlace: '惠济区',
    destination: '河北省石家庄市',
    transportTool: '冷藏车',
    vehicleNumber: '豫A23457',
    reason: '牛奶产品销售',
    files: [],
    reviewComments: '符合检疫要求，同意通过',
    quarantineOfficer: '韩检疫',
    quarantineTime: '2023-09-15 14:40',
    quarantineComments: '经检疫，该批牛奶符合国家标准，无致病菌，质量合格。',
    certificateNumber: 'QS202309150001',
    status: 'approved',
    declarationDate: '2023-09-15'
  }
])

// 表格列定义
const columns = [
  {
    title: '申报单号',
    dataIndex: 'declarationNumber',
    key: 'declarationNumber',
    width: 180
  },
  {
    title: '申报单位',
    dataIndex: 'declarationUnit',
    key: 'declarationUnit',
    ellipsis: true
  },
  {
    title: '检疫类型',
    dataIndex: 'type',
    key: 'type',
    width: 120,
    customRender: ({ text }) => getTypeText(text)
  },
  {
    title: '检疫对象',
    dataIndex: 'object',
    key: 'object',
    width: 100
  },
  {
    title: '检疫员',
    dataIndex: 'quarantineOfficer',
    key: 'quarantineOfficer',
    width: 100
  },
  {
    title: '申报日期',
    dataIndex: 'declarationDate',
    key: 'declarationDate',
    width: 120
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 80,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    scopedSlots: { customRender: 'action' }
  }
]

// 状态文本
const getStatusText = (status) => {
  const statusMap = {
    approved: '已通过',
    rejected: '已驳回',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

// 状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    approved: 'green',
    rejected: 'red',
    cancelled: 'default'
  }
  return colorMap[status] || 'default'
}

// 类型文本
const getTypeText = (type) => {
  const typeMap = {
    animal: '动物检疫',
    product: '动物产品检疫',
    transport: '运输检疫',
    slaughter: '屠宰检疫',
    other: '其他检疫'
  }
  return typeMap[type] || type
}

// 搜索处理
const handleSearch = () => {
  // 在实际应用中，这里应该调用API获取数据
  pagination.current = 1
  // 模拟搜索效果
  message.success('搜索成功')
}

// 重置处理
const handleReset = () => {
  searchKeyword.value = ''
  typeFilter.value = ''
  statusFilter.value = ''
  dateRange.value = []
  quarantineOfficer.value = ''
  pagination.current = 1
}

// 导出记录
const handleExport = () => {
  // 在实际应用中，这里应该调用API导出数据
  message.success('导出功能待实现')
}

// 查看记录
const handleView = (record) => {
  viewRecord.value = { ...record }
  isViewModalOpen.value = true
}

// 关闭查看模态框
const handleCloseView = () => {
  isViewModalOpen.value = false
}

// 打印记录
const handlePrint = (id) => {
  // 在实际应用中，这里应该调用API获取打印数据
  message.success('打印功能待实现')
}
</script>

<style scoped>
  h1 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
  }
</style>