<template>
  <div class="consultation-application-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <span class="tab-title">门诊会诊申请管理</span>
    </div>

    <!-- 查询条件 -->
    <div class="search-section">
      <el-form :model="queryParams" inline>
        <el-form-item label="时间类型">
          <el-select v-model="queryParams.timeType" placeholder="请选择" style="width: 120px">
            <el-option label="会诊时间" value="consultation" />
            <el-option label="申请时间" value="request" />
          </el-select>
        </el-form-item>

        <el-form-item label="开始时间">
          <el-date-picker
            v-model="queryParams.startTime"
            type="datetime"
            placeholder="年/月/日 --:--"
            format="YYYY/MM/DD HH:mm"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 180px"
          />
        </el-form-item>

        <el-form-item label="结束时间">
          <el-date-picker
            v-model="queryParams.endTime"
            type="datetime"
            placeholder="年/月/日 --:--"
            format="YYYY/MM/DD HH:mm"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 180px"
          />
        </el-form-item>

        <el-form-item label="申请科室">
          <el-input
            v-model="queryParams.applyDept"
            placeholder="请输入或输入科室"
            clearable
            style="width: 150px"
          />
        </el-form-item>

        <el-form-item label="申请医生">
          <el-input
            v-model="queryParams.applyDoctor"
            placeholder="请输入或输入医生"
            clearable
            style="width: 150px"
          />
        </el-form-item>

        <el-form-item label="紧急程度">
          <el-select v-model="queryParams.urgency" placeholder="全部" style="width: 120px">
            <el-option label="全部" value="" />
            <el-option label="一般" value="1" />
            <el-option label="紧急" value="2" />
          </el-select>
        </el-form-item>

        <el-form-item label="会诊状态">
          <el-select v-model="queryParams.consultationStatus" placeholder="全部" style="width: 120px">
            <el-option label="全部" value="" />
            <el-option label="未提交" value="0" />
            <el-option label="提交" value="10" />
            <el-option label="结束" value="40" />
          </el-select>
        </el-form-item>

        <el-form-item label="病人姓名">
          <el-input
            v-model="queryParams.patientName"
            placeholder="请输入病人姓名"
            clearable
            style="width: 150px"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <el-icon><Search /></el-icon> 查询
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon> 重置
          </el-button>
          <el-button type="success" @click="handlePrint">
            <el-icon><Printer /></el-icon> 打印
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <el-table
        :data="tableData"
        border
        stripe
        highlight-current-row
        @current-change="handleRowChange"
        v-loading="loading"
        height="400"
      >
        <el-table-column prop="consultationId" label="ID" min-width="150" align="center" show-overflow-tooltip />
        <el-table-column label="急" width="60" align="center">
          <template #default="scope">
            <el-checkbox :model-value="scope.row.consultationUrgency === '2'" disabled />
          </template>
        </el-table-column>
        <el-table-column prop="patientName" label="病人姓名" min-width="100" />
        <el-table-column prop="consultationDate" label="会诊时间" min-width="160">
          <template #default="scope">
            {{ formatDate(scope.row.consultationDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="department" label="申请科室" min-width="120" />
        <el-table-column prop="invitedObject" label="邀请对象" min-width="150" show-overflow-tooltip />
        <el-table-column prop="consultationRequestDate" label="申请时间" min-width="160">
          <template #default="scope">
            {{ formatDate(scope.row.consultationRequestDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="requestingPhysician" label="申请医师" min-width="100" />
        <el-table-column label="提交" width="70" align="center">
          <template #default="scope">
            <el-checkbox :model-value="scope.row.consultationStatus >= STATUS.SUBMITTED" disabled />
          </template>
        </el-table-column>
        <el-table-column label="结束" width="70" align="center">
          <template #default="scope">
            <el-checkbox :model-value="scope.row.consultationStatus === STATUS.ENDED" disabled />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right" align="center">
          <template #default="scope">
            <el-button
              type="success"
              size="small"
              :icon="Printer"
              @click="handlePrint(scope.row)"
              title="打印"
            />
            <el-button
              type="primary"
              size="small"
              :icon="Edit"
              @click="handleEdit(scope.row)"
              :disabled="scope.row.consultationStatus >= STATUS.ENDED"
              title="编辑"
            />
            <el-button
              type="info"
              size="small"
              :icon="View"
              @click="handleView(scope.row)"
              title="查看"
            />
            <el-button
              type="danger"
              size="small"
              :icon="Delete"
              @click="handleDelete(scope.row)"
              :disabled="scope.row.consultationStatus >= STATUS.ENDED"
              title="作废"
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 30, 50, 100]"
          :total="pagination.total"
          :disabled="loading"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 编辑/查看弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="800px"
      :close-on-click-modal="false"
      @close="handleDialogClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="120px"
        :disabled="isViewMode"
      >
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="申请单号">
              <el-input v-model="formData.consultationId" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请时间">
              <el-input :model-value="formatDate(formData.consultationRequestDate)" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="病人姓名">
              <el-input v-model="formData.patientName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-input :model-value="formData.genderEnum === 1 ? '男' : '女'" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="年龄">
              <el-input v-model="formData.age" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="就诊卡号">
              <el-input v-model="formData.patientIdentifierNo" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="申请医师" prop="requestingPhysician">
              <el-input v-model="formData.requestingPhysician" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会诊时间" prop="consultationDate">
              <el-date-picker
                v-model="formData.consultationDate"
                type="datetime"
                placeholder="年/月/日 --:--"
                format="YYYY/MM/DD HH:mm"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="申请科室">
              <el-input v-model="formData.department" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急程度">
              <el-checkbox v-model="formData.isUrgent" :true-value="true" :false-value="false">紧急</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="门诊诊断">
              <el-input v-model="formData.provisionalDiagnosis" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="患者病史及会诊目的" prop="consultationPurpose">
          <el-input
            v-model="formData.consultationPurpose"
            type="textarea"
            :rows="4"
            placeholder="请输入患者病史及会诊目的"
          />
        </el-form-item>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="会诊邀请对象">
              <el-input v-model="formData.invitedObject" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会诊确认参加医师">
              <el-input v-model="formData.confirmingPhysician" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <div class="section-title">会诊记录</div>
        <el-form-item label="会诊意见">
          <el-input
            v-model="formData.consultationOpinion"
            type="textarea"
            :rows="4"
            placeholder="会诊意见"
            disabled
          />
        </el-form-item>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="所属医生">
              <el-input v-model="formData.attendingPhysician" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="代表科室">
              <el-input v-model="formData.representDepartment" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="签名医生">
              <el-input v-model="formData.signPhysician" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签名时间">
              <el-date-picker
                v-model="formData.signTime"
                type="datetime"
                placeholder="年/月/日 --:--"
                format="YYYY/MM/DD HH:mm"
                disabled
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">{{ isViewMode ? '关闭' : '取消' }}</el-button>
          <el-button v-if="!isViewMode" type="primary" @click="handleSave" :loading="saving">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="ConsultationApplication">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Printer, Edit, View, Delete } from '@element-plus/icons-vue'
import { queryConsultationListPage, cancelConsultation, saveConsultation, getConsultationOpinions } from './api'
import { simplePrint, PRINT_TEMPLATE } from '@/utils/printUtils.js'
import { formatDate } from '@/utils/index.js'

const loading = ref(false)
const saving = ref(false)
const tableData = ref([])
const currentRow = ref(null)
const dialogVisible = ref(false)
const isViewMode = ref(false)
const formRef = ref(null)
const opinionList = ref([]) // 会诊意见列表

let abortController = null

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const queryParams = reactive({
  timeType: 'consultation',
  startTime: '',
  endTime: '',
  applyDept: '',
  applyDoctor: '',
  urgency: '',
  consultationStatus: '',
  patientName: ''
})

// 会诊状态常量
const STATUS = {
  NOT_SUBMITTED: 0,
  SUBMITTED: 10,
  CONFIRMED: 20,
  SIGNED: 30,
  ENDED: 40
}

// 初始表单数据模板
const getInitialFormData = () => ({
  id: null,
  consultationId: '',
  patientId: null,
  patientName: '',
  genderEnum: null,
  age: null,
  patientBusNo: '',
  patientIdentifierNo: '',
  encounterId: null,
  departmentId: null,
  department: '',
  requestingPhysicianId: null,
  requestingPhysician: '',
  invitedObject: '',
  consultationDate: '',
  consultationRequestDate: null,
  consultationPurpose: '',
  provisionalDiagnosis: '',
  consultationActivityId: null,
  consultationActivityName: '',
  consultationUrgency: '',
  isUrgent: false,
  consultationStatus: 0,
  consultationOpinion: '',
  consultingPhysicians: '',
  signingPhysicianId: null,
  signingPhysicianName: '',
  signingTime: null,
  invitedPhysiciansText: '',
  attendingPhysician: '',
  representDepartment: '',
  signPhysician: '',
  signTime: null,
  confirmingPhysician: ''
})

// 从 row 数据填充表单
const populateFormData = (row) => ({
  id: row.id || null,
  consultationId: row.consultationId || '',
  patientId: row.patientId || null,
  patientName: row.patientName || '',
  genderEnum: row.genderEnum || null,
  age: row.age || null,
  patientBusNo: row.patientBusNo || '',
  patientIdentifierNo: row.patientIdentifierNo || '',
  encounterId: row.encounterId || null,
  departmentId: row.departmentId || null,
  department: row.department || '',
  requestingPhysicianId: row.requestingPhysicianId || null,
  requestingPhysician: row.requestingPhysician || '',
  invitedObject: row.invitedObject || '',
  consultationDate: row.consultationDate || '',
  consultationRequestDate: row.consultationRequestDate || null,
  consultationPurpose: row.consultationPurpose || '',
  provisionalDiagnosis: row.provisionalDiagnosis || '',
  consultationActivityId: row.consultationActivityId || null,
  consultationActivityName: row.consultationActivityName || '',
  consultationUrgency: row.consultationUrgency || '',
  isUrgent: row.consultationUrgency === '2',
  consultationStatus: row.consultationStatus || 0,
  consultationOpinion: row.consultationOpinion || '',
  consultingPhysicians: row.consultingPhysicians || '',
  signingPhysicianId: row.signingPhysicianId || null,
  signingPhysicianName: row.signingPhysicianName || '',
  signingTime: row.signingTime || null,
  invitedPhysiciansText: row.invitedPhysiciansText || '',
  attendingPhysician: row.attendingPhysician || '',
  representDepartment: row.representDepartment || '',
  signPhysician: row.signPhysician || '',
  signTime: row.signTime || null,
  confirmingPhysician: ''
})

const formData = ref(getInitialFormData())

const formRules = {
  requestingPhysician: [
    { required: true, message: '请输入申请医师', trigger: 'blur' }
  ],
  consultationDate: [
    { required: true, message: '请选择会诊时间', trigger: 'change' }
  ],
  consultationPurpose: [
    { required: true, message: '请输入患者病史及会诊目的', trigger: 'blur' }
  ]
}

const dialogTitle = computed(() => {
  return isViewMode.value ? '会诊申请查看' : '会诊申请编辑'
})

const handleQuery = async () => {
  if (queryParams.startTime && queryParams.endTime) {
    const start = new Date(queryParams.startTime)
    const end = new Date(queryParams.endTime)
    if (end < start) {
      ElMessage.warning('结束时间不能早于开始时间')
      return
    }
  }
  pagination.currentPage = 1
  await loadData()
}

const handleReset = () => {
  Object.keys(queryParams).forEach(key => {
    if (key === 'timeType') {
      queryParams[key] = 'consultation'
    } else {
      queryParams[key] = ''
    }
  })
  pagination.currentPage = 1
  loadData()
}

const handleSizeChange = (val) => {
  pagination.pageSize = val
  pagination.currentPage = 1
  loadData()
}

const handleCurrentChange = (val) => {
  if (loading.value) return
  pagination.currentPage = val
  loadData()
}

const handlePrint = async (row) => {
  const printRow = row || currentRow.value

  if (!printRow) {
    ElMessage.warning('请先选择一条记录')
    return
  }

  try {
    const printData = {
      patientName: printRow.patientName || '',
      gender: printRow.genderEnum === 1 ? '男' : '女',
      age: printRow.age || '',
      deptName: printRow.department || '',
      diagnosis: printRow.provisionalDiagnosis || '',
      consultationReason: printRow.consultationPurpose || '',
      applyTime: printRow.consultationRequestDate || '',
      applyDoctor: printRow.requestingPhysician || ''
    }
    await simplePrint(PRINT_TEMPLATE.CONSULTATION, printData)
  } catch (error) {
    console.error('会诊申请单打印失败:', error)
    ElMessage.error('打印失败')
  }
}

const handleRowChange = (row) => {
  currentRow.value = row
}

// 加载会诊意见列表
const loadConsultationOpinions = async (consultationId) => {
  try {
    const res = await getConsultationOpinions(consultationId)
    if (res.code === 200) {
      opinionList.value = res.data || []
    }
  } catch (error) {
    console.error('加载会诊意见失败', error)
    opinionList.value = []
  }
}

// 打开弹窗的统一方法
const openDialog = async (row, viewOnly = false) => {
  if (!viewOnly && row.consultationStatus >= STATUS.ENDED) {
    ElMessage.warning('已结束的会诊申请不可编辑')
    return
  }
  isViewMode.value = viewOnly
  formData.value = populateFormData(row)

  // 加载会诊意见列表
  await loadConsultationOpinions(row.consultationId)

  // 从会诊意见中填充会诊记录相关字段
  if (opinionList.value.length > 0) {
    // 获取所有已确认参加的医师名称
    const confirmedPhysicians = opinionList.value
      .filter(op => op.physicianName)
      .map(op => op.physicianName)
      .join('、')
    formData.value.confirmingPhysician = confirmedPhysicians

    // 取第一条意见填充会诊意见字段
    const firstOpinion = opinionList.value[0]
    formData.value.consultationOpinion = firstOpinion.opinion || ''
    formData.value.attendingPhysician = firstOpinion.physicianName || ''
    formData.value.representDepartment = firstOpinion.deptName || ''

    // 查找已签名的意见
    const signedOpinion = opinionList.value.find(op => op.isSigned)
    if (signedOpinion) {
      formData.value.signPhysician = signedOpinion.physicianName || ''
      formData.value.signTime = signedOpinion.signatureTime || null
    }
  }

  dialogVisible.value = true
}

const handleEdit = (row) => openDialog(row, false)
const handleView = (row) => openDialog(row, true)

const handleDialogClose = () => {
  formRef.value?.clearValidate()
  formData.value = getInitialFormData()
  opinionList.value = []
}

const handleSave = async () => {
  try {
    await formRef.value.validate()
    saving.value = true
    // 将 isUrgent 转换回 consultationUrgency
    const submitData = {
      ...formData.value,
      consultationUrgency: formData.value.isUrgent ? '2' : '1'
    }
    const res = await saveConsultation(submitData)

    if (res.code === 200) {
      ElMessage.success('保存成功')
      dialogVisible.value = false
      await loadData()
    } else {
      ElMessage.error(res.msg || '保存失败，请重试')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('保存失败:', error)
      ElMessage.error('保存失败，请重试')
    }
  } finally {
    saving.value = false
  }
}

const handleDelete = async (row) => {
  if (row.consultationStatus >= STATUS.ENDED) {
    ElMessage.warning('已结束的会诊申请不可作废')
    return
  }
  
  try {
    await ElMessageBox.confirm('确定要作废该会诊申请吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    loading.value = true
    const res = await cancelConsultation(row.consultationId, '用户作废')
    
    if (res.code === 200) {
      ElMessage.success('作废成功')
      await loadData()
    } else {
      ElMessage.error(res.msg || '作废失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('作废失败:', error)
      ElMessage.error('作废失败')
    }
  } finally {
    loading.value = false
  }
}

const loadData = async () => {
  if (loading.value && abortController) {
    abortController.abort()
  }

  try {
    loading.value = true
    abortController = new AbortController()

    const queryData = {
      department: queryParams.applyDept,
      requestingPhysician: queryParams.applyDoctor,
      consultationStatus: queryParams.consultationStatus,
      patientName: queryParams.patientName,
      consultationRequestDate: queryParams.startTime,
      consultationUrgency: queryParams.urgency
    }

    const res = await queryConsultationListPage(queryData, pagination.currentPage, pagination.pageSize)

    if (res.code === 200) {
      tableData.value = res.data.records || []
      pagination.total = res.data.total || 0
      if (tableData.value.length === 0 && pagination.currentPage === 1) {
        ElMessage.info('暂无查询结果')
      }
    } else {
      if (!res.msg || !res.msg.includes('数据正在处理')) {
        ElMessage.error(res.msg || '加载数据失败')
      }
      tableData.value = []
      pagination.total = 0
    }
  } catch (error) {
    if (error.name === 'AbortError' || error.name === 'CanceledError') {
      return
    }

    const errorMsg = error.message || error.msg || '网络错误'
    if (!errorMsg.includes('数据正在处理')) {
      ElMessage.error('加载数据失败: ' + errorMsg)
    }

    tableData.value = []
    pagination.total = 0
  } finally {
    loading.value = false
    abortController = null
  }
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.consultation-application-container {
  padding: 20px;
  background: #fff;
  min-height: calc(100vh - 84px);
}

.page-header {
  padding-bottom: 12px;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 20px;
}

.tab-title {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: #2563eb;
  border-bottom: 3px solid #2563eb;
  padding-bottom: 8px;
}

.search-section {
  margin-bottom: 20px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
}

.table-section {
  margin-top: 20px;
}

.pagination-container {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 20px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media print {
  .search-section,
  .pagination-container,
  .el-table__column--selection,
  .el-table-column--action {
    display: none !important;
  }
}

/* 表单样式优化 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-input.is-disabled .el-input__inner) {
  background-color: #f5f7fa;
  color: #909399;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
  background-color: #f5f7fa;
  color: #909399;
}
</style>

