<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="pending">待审核</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-input v-model:value="quarantinePersonFilter" placeholder="检疫人员" style="width: 150px;" />
        
        <a-range-picker
          v-model:value="dateRange"
          style="width: 300px;"
          format="YYYY-MM-DD"
          :placeholder="['开始日期', '结束日期']"
        />
        
        <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="default" @click="handleExport">
          <span class="iconfont icon-export"></span> 导出
        </a-button>
      </div>
    </a-card>
    
    <!-- 数据列表 -->
    <a-card>
      <a-table
        :columns="columns"
        :data-source="quarantineRecords"
        :pagination="pagination"
        row-key="id"
        :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
        :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)" v-if="record.status === 'approved'">打印</a-button>
            <a-button size="small" @click="handleRecheck(record.id)" v-if="record.status === 'approved'">重新检疫</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; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0;">申报信息</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>{{ 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.declarationDate }}</p>
            </div>
          </div>
        </div>
        
        <!-- 检疫信息 -->
        <div style="margin-bottom: 20px;">
          <h3 style="margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0;">检疫信息</h3>
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">检疫人员</p>
              <p>{{ viewRecord.quarantinePerson }}</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>{{ viewRecord.result ? '合格' : '不合格' }}</p>
            </div>
            <div>
              <p style="color: #8c8c8c; margin-bottom: 4px;">证书编号</p>
              <p>{{ viewRecord.certificateNumber || '-' }}</p>
            </div>
          </div>
        </div>
        
        <!-- 检疫详情 -->
        <div style="margin-bottom: 20px;">
          <h3 style="margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0;">检疫详情</h3>
          <div style="margin-bottom: 12px;">
            <p style="color: #8c8c8c; margin-bottom: 4px;">检疫项目</p>
            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
              <a-tag v-for="item in viewRecord.quarantineItems" :key="item.id">
                {{ item.name }}
              </a-tag>
            </div>
          </div>
          
          <div style="margin-bottom: 12px;">
            <p style="color: #8c8c8c; margin-bottom: 4px;">检疫过程描述</p>
            <p>{{ viewRecord.processDescription || '-' }}</p>
          </div>
          
          <div style="margin-bottom: 12px;">
            <p style="color: #8c8c8c; margin-bottom: 4px;">检疫结论</p>
            <p>{{ viewRecord.conclusion || '-' }}</p>
          </div>
          
          <div v-if="viewRecord.photos && viewRecord.photos.length > 0" style="margin-bottom: 12px;">
            <p style="color: #8c8c8c; margin-bottom: 4px;">检疫照片</p>
            <div style="display: flex; flex-wrap: wrap; gap: 12px;">
              <a-avatar
                v-for="photo in viewRecord.photos"
                :key="photo.id"
                :src="photo.url"
                style="width: 80px; height: 80px;"
                @click="handleViewPhoto(photo)"
              />
            </div>
          </div>
        </div>
        
        <!-- 其他信息 -->
        <div>
          <h3 style="margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0;">其他信息</h3>
          <div style="margin-bottom: 12px;">
            <p style="color: #8c8c8c; margin-bottom: 4px;">审核意见</p>
            <p>{{ viewRecord.reviewComments || '-' }}</p>
          </div>
          
          <div>
            <p style="color: #8c8c8c; margin-bottom: 4px;">备注</p>
            <p>{{ viewRecord.notes || '-' }}</p>
          </div>
        </div>
      </div>
      
      <div style="display: flex; justify-content: flex-end; margin-top: 24px;">
        <a-button @click="handleCloseView">关闭</a-button>
      </div>
    </a-modal>
    
    <!-- 照片查看模态框 -->
    <a-modal
      v-model:open="isPhotoModalOpen"
      title="检疫照片"
      :footer="null"
      width={600}
    >
      <img :src="currentPhotoUrl" alt="检疫照片" style="width: 100%; height: auto;" />
      <div style="display: flex; justify-content: flex-end; margin-top: 24px;">
        <a-button @click="handleClosePhoto">关闭</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 quarantinePersonFilter = ref('')
const dateRange = ref([])

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

// 选中行
const selectedRowKeys = ref([])
const onSelectChange = (newSelectedRowKeys) => {
  selectedRowKeys.value = newSelectedRowKeys
}

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

// 当前查看的记录和照片
const viewRecord = ref(null)
const currentPhotoUrl = ref('')

// 检疫记录数据（模拟数据）
const quarantineRecords = ref([
  {
    id: '1',
    declarationNumber: 'JD20231001001',
    declarationUnit: '郑州市金水区阳光养殖场',
    contactPerson: '张三',
    phone: '13812345678',
    type: 'animal',
    object: '牛',
    quantity: 150,
    declarationDate: '2023-10-01',
    quarantinePerson: '王五',
    quarantineTime: '2023-10-02 10:30:00',
    result: true,
    certificateNumber: 'JZZS20231002001',
    quarantineItems: [
      { id: '1', name: '体温检测' },
      { id: '2', name: '临床检查' },
      { id: '3', name: '疫苗接种记录' },
      { id: '4', name: '疫情监测' }
    ],
    processDescription: '按照《动物检疫管理办法》规定，对申报的150头牛进行了体温检测、临床检查、疫苗接种记录核查和疫情监测，所有检测项目均符合要求。',
    conclusion: '经检疫，该批牛只健康状况良好，无传染病症状，符合出证条件，准予放行。',
    photos: [
      { id: '1', url: 'https://via.placeholder.com/300x200?text=Photo1' },
      { id: '2', url: 'https://via.placeholder.com/300x200?text=Photo2' }
    ],
    reviewComments: '符合检疫要求，同意通过',
    notes: '',
    status: 'approved',
    createdAt: '2023-10-01'
  },
  {
    id: '2',
    declarationNumber: 'JD20231002001',
    declarationUnit: '新郑市绿源养殖场',
    contactPerson: '李四',
    phone: '13912345678',
    type: 'product',
    object: '牛肉',
    quantity: 500,
    declarationDate: '2023-10-02',
    quarantinePerson: '赵六',
    quarantineTime: '2023-10-03 14:20:00',
    result: false,
    certificateNumber: '',
    quarantineItems: [
      { id: '5', name: '感官检查' },
      { id: '6', name: '微生物检测' },
      { id: '7', name: '兽药残留检测' },
      { id: '8', name: '重金属检测' }
    ],
    processDescription: '对申报的500公斤牛肉进行了感官检查、微生物检测、兽药残留检测和重金属检测，发现微生物指标超标。',
    conclusion: '经检疫，该批牛肉微生物指标不符合食品安全标准，不予出证，禁止销售。',
    photos: [
      { id: '3', url: 'https://via.placeholder.com/300x200?text=Photo3' },
      { id: '4', url: 'https://via.placeholder.com/300x200?text=Photo4' }
    ],
    reviewComments: '微生物指标超标，不同意通过',
    notes: '建议加强冷链管理',
    status: 'rejected',
    createdAt: '2023-10-02'
  },
  {
    id: '3',
    declarationNumber: 'JD20231003001',
    declarationUnit: '新密市祥和养殖场',
    contactPerson: '王五',
    phone: '13712345678',
    type: 'slaughter',
    object: '牛',
    quantity: 80,
    declarationDate: '2023-10-03',
    quarantinePerson: '孙七',
    quarantineTime: '2023-10-04 09:15:00',
    result: true,
    certificateNumber: 'JZZS20231004001',
    quarantineItems: [
      { id: '9', name: '宰前检查' },
      { id: '10', name: '宰后检验' },
      { id: '11', name: '内脏检查' },
      { id: '12', name: '肉品质量检查' }
    ],
    processDescription: '对80头牛进行了宰前检查，确认健康状况良好；宰后进行了头蹄、内脏、胴体等部位的检验，未发现异常。',
    conclusion: '经检疫，该批屠宰牛只健康状况良好，符合屠宰检疫要求，准予屠宰销售。',
    photos: [
      { id: '5', url: 'https://via.placeholder.com/300x200?text=Photo5' },
      { id: '6', url: 'https://via.placeholder.com/300x200?text=Photo6' }
    ],
    reviewComments: '符合检疫要求，同意通过',
    notes: '',
    status: 'approved',
    createdAt: '2023-10-03'
  },
  {
    id: '4',
    declarationNumber: 'JD20231004001',
    declarationUnit: '登封市幸福养殖场',
    contactPerson: '赵六',
    phone: '13612345678',
    type: 'animal',
    object: '牛',
    quantity: 120,
    declarationDate: '2023-10-04',
    quarantinePerson: '钱八',
    quarantineTime: '',
    result: false,
    certificateNumber: '',
    quarantineItems: [],
    processDescription: '',
    conclusion: '',
    photos: [],
    reviewComments: '',
    notes: '',
    status: 'pending',
    createdAt: '2023-10-04'
  },
  {
    id: '5',
    declarationNumber: 'JD20231005001',
    declarationUnit: '中牟县希望养殖场',
    contactPerson: '钱七',
    phone: '13512345678',
    type: 'product',
    object: '牛奶',
    quantity: 2000,
    declarationDate: '2023-10-05',
    quarantinePerson: '周九',
    quarantineTime: '2023-10-06 11:45:00',
    result: true,
    certificateNumber: 'JZZS20231006001',
    quarantineItems: [
      { id: '13', name: '感官检查' },
      { id: '14', name: '理化指标检测' },
      { id: '15', name: '微生物检测' },
      { id: '16', name: '兽药残留检测' }
    ],
    processDescription: '对2000升牛奶进行了感官检查、理化指标检测、微生物检测和兽药残留检测，所有指标均符合国家标准。',
    conclusion: '经检疫，该批牛奶质量合格，符合食品安全标准，准予销售。',
    photos: [
      { id: '7', url: 'https://via.placeholder.com/300x200?text=Photo7' },
      { id: '8', url: 'https://via.placeholder.com/300x200?text=Photo8' }
    ],
    reviewComments: '符合检疫要求，同意通过',
    notes: '',
    status: 'approved',
    createdAt: '2023-10-05'
  },
  {
    id: '6',
    declarationNumber: 'JD20231006001',
    declarationUnit: '荥阳市快乐养殖场',
    contactPerson: '孙八',
    phone: '13412345678',
    type: 'transport',
    object: '牛',
    quantity: 90,
    declarationDate: '2023-10-06',
    quarantinePerson: '吴十',
    quarantineTime: '2023-10-07 08:30:00',
    result: true,
    certificateNumber: 'JZZS20231007001',
    quarantineItems: [
      { id: '17', name: '动物健康检查' },
      { id: '18', name: '运输工具检查' },
      { id: '19', name: '消毒情况检查' },
      { id: '20', name: '检疫证明检查' }
    ],
    processDescription: '对90头牛进行了健康检查，确认无异常；检查运输工具符合要求，已消毒，检疫证明齐全。',
    conclusion: '经检疫，该批运输牛只符合跨区域调运要求，准予调运。',
    photos: [
      { id: '9', url: 'https://via.placeholder.com/300x200?text=Photo9' },
      { id: '10', url: 'https://via.placeholder.com/300x200?text=Photo10' }
    ],
    reviewComments: '符合检疫要求，同意通过',
    notes: '',
    status: 'approved',
    createdAt: '2023-10-06'
  },
  {
    id: '7',
    declarationNumber: 'JD20231007001',
    declarationUnit: '巩义市明星养殖场',
    contactPerson: '周九',
    phone: '13312345678',
    type: 'slaughter',
    object: '牛',
    quantity: 60,
    declarationDate: '2023-10-07',
    quarantinePerson: '郑十一',
    quarantineTime: '2023-10-08 13:20:00',
    result: true,
    certificateNumber: 'JZZS20231008001',
    quarantineItems: [
      { id: '21', name: '宰前检查' },
      { id: '22', name: '宰后检验' },
      { id: '23', name: '内脏检查' },
      { id: '24', name: '肉品质量检查' }
    ],
    processDescription: '对60头牛进行了宰前检查，确认健康状况良好；宰后进行了头蹄、内脏、胴体等部位的检验，未发现异常。',
    conclusion: '经检疫，该批屠宰牛只健康状况良好，符合屠宰检疫要求，准予屠宰销售。',
    photos: [
      { id: '11', url: 'https://via.placeholder.com/300x200?text=Photo11' },
      { id: '12', url: 'https://via.placeholder.com/300x200?text=Photo12' }
    ],
    reviewComments: '符合检疫要求，同意通过',
    notes: '',
    status: 'approved',
    createdAt: '2023-10-07'
  },
  {
    id: '8',
    declarationNumber: 'JD20231008001',
    declarationUnit: '惠济区温馨养殖场',
    contactPerson: '吴十',
    phone: '13212345678',
    type: 'other',
    object: '牛精液',
    quantity: 500,
    declarationDate: '2023-10-08',
    quarantinePerson: '王十二',
    quarantineTime: '',
    result: false,
    certificateNumber: '',
    quarantineItems: [],
    processDescription: '',
    conclusion: '',
    photos: [],
    reviewComments: '',
    notes: '',
    status: 'pending',
    createdAt: '2023-10-08'
  },
  {
    id: '9',
    declarationNumber: 'JD20231009001',
    declarationUnit: '二七区红火养殖场',
    contactPerson: '郑十一',
    phone: '13112345678',
    type: 'animal',
    object: '牛',
    quantity: 100,
    declarationDate: '2023-10-09',
    quarantinePerson: '张三',
    quarantineTime: '',
    result: false,
    certificateNumber: '',
    quarantineItems: [],
    processDescription: '',
    conclusion: '',
    photos: [],
    reviewComments: '申请人主动取消',
    notes: '',
    status: 'cancelled',
    createdAt: '2023-10-09'
  },
  {
    id: '10',
    declarationNumber: 'JD20231010001',
    declarationUnit: '中原区丰收养殖场',
    contactPerson: '王十二',
    phone: '13012345678',
    type: 'product',
    object: '牛肉制品',
    quantity: 300,
    declarationDate: '2023-10-10',
    quarantinePerson: '李四',
    quarantineTime: '',
    result: false,
    certificateNumber: '',
    quarantineItems: [],
    processDescription: '',
    conclusion: '',
    photos: [],
    reviewComments: '',
    notes: '',
    status: 'pending',
    createdAt: '2023-10-10'
  }
])

// 表格列定义
const columns = [
  {
    title: '申报单号',
    dataIndex: 'declarationNumber',
    key: 'declarationNumber',
    ellipsis: true
  },
  {
    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: 'quantity',
    key: 'quantity',
    width: 80
  },
  {
    title: '检疫人员',
    dataIndex: 'quarantinePerson',
    key: 'quarantinePerson',
    width: 100
  },
  {
    title: '检疫时间',
    dataIndex: 'quarantineTime',
    key: 'quarantineTime',
    width: 150
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 80,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    key: 'action',
    width: 180,
    scopedSlots: { customRender: 'action' }
  }
]

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

// 状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    pending: 'blue',
    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 = ''
  quarantinePersonFilter.value = ''
  dateRange.value = []
  pagination.current = 1
}

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

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

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

// 重新检疫
const handleRecheck = (id) => {
  // 在实际应用中，这里应该调用API创建重新检疫任务
  message.success('重新检疫功能待实现')
}

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

// 查看照片
const handleViewPhoto = (photo) => {
  currentPhotoUrl.value = photo.url
  isPhotoModalOpen.value = true
}

// 关闭照片模态框
const handleClosePhoto = () => {
  isPhotoModalOpen.value = false
}
</script>

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