<template>
  <el-dialog :title="title" v-model="openPatientDossier" :width="`${width}`">
    <el-form :model="queryParams" ref="queryRef" label-width="90px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="就诊人类型" prop="patientType" hidden>
            <el-select v-model="queryParams.patientType" placeholder="请选择就诊人类型" clearable>
              <el-option v-for="dict in healthcare_os_patient_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学号/工号" prop="studentId">
            <el-input v-model="queryParams.studentId" placeholder="请输入学号/工号" clearable @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>

        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            <el-button @click="addPatientInformation()">开卡建档</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="24">
        <!-- 表格  -->
        <el-table v-loading="loading" :data="healthcareOsPatientInfoList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />

          <el-table-column label="学号/工号" align="center" prop="studentId" />
          <el-table-column label="姓名" align="center" prop="name" />
          <el-table-column label="性别" align="center" prop="gender">
            <template #default="scope">
              <dict-tag :options="sys_user_sex" :value="scope.row.gender" />
            </template>
          </el-table-column>
          <el-table-column label="年龄" align="center" prop="age" />
          <el-table-column label="电话" align="center" prop="phone" />
          <el-table-column label="学院" align="center" prop="department" />
          <el-table-column label="专业" align="center" prop="major" />
          <el-table-column label="班级" align="center" prop="classInfo" />

          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="selectValue(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </el-col>
    </el-row>
  </el-dialog>
  <!-- 患者信息 -->
  <PatientInformation ref="patientInformationRef" :open="openPatientInformation" :title="titlePatientInformation" :width="widthPatientInformation" @select-value="selectPatientInformation" />
</template>

<script setup name="PatientDossier">
// 患者档案
import { getStudentInfo, getTeachingStaffInfo, listHealthcareOsPatientInfo } from '@/api/healthcare/outpatientService/healthcareOsPatientInfo'

const { proxy } = getCurrentInstance()
const { healthcare_os_patient_type } = proxy.useDict('healthcare_os_patient_type')
const { sys_user_sex } = proxy.useDict('sys_user_sex')

const healthcareOsPatientInfoList = ref([])
const loading = ref(false)
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  patientType: null,
  studentId: null,
  name: null
})

const props = defineProps({
  // 宽度
  width: {
    type: String,
    default: '900px'
  },
  open: {
    type: Boolean
  },
  //
  patientQuery: {
    type: Object,
    onUpdate: Function
  }
})

//
const openPatientDossier = ref(props.open)

// 监听 父组件传来的数值
watch(
  () => props.patientQuery,
  (newValue, oldValue) => {
    console.log('获取id:', newValue)
    queryParams.value = props.patientQuery
    getList()
  }
)

watch(
  () => props.open,
  (newValue, oldValue) => {
    openPatientDossier.value = newValue
  }
)

/** 查询患者信息列表 */
function getList() {
  // console.log("父亲的数值:", props.patientQuery);
  // queryParams.value = props.patientQuery;
  loading.value = true
  listHealthcareOsPatientInfo(queryParams.value).then(response => {
    healthcareOsPatientInfoList.value = response.rows
    total.value = response.total
    // console.log("第一款:" , response.rows.length ,queryParams.value.patientType )
    // 学生 查询  2021007
    if (response.rows.length == 0 && queryParams.value.patientType == 0) {
      getStudentInfo(queryParams.value).then(res => {
        healthcareOsPatientInfoList.value = res.rows
        total.value = res.total
        // console.log("学生:", res)
      })
    }
    // 学工 教职工 teaching and administrative staff
    // TeachingStaffInfo
    if (response.rows.length == 0 && queryParams.value.patientType == 1) {
      getTeachingStaffInfo(queryParams.value).then(res => {
        healthcareOsPatientInfoList.value = res.rows
        total.value = res.total
        // console.log("教职工:", res)
      })
    }
    //
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

// 表单重置
function reset() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    patientType: null,
    studentId: null,
    name: null
  }
  proxy.resetForm('queryRef')
}

/** 重置按钮操作 */
function resetQuery() {
  reset()
  proxy.resetForm('queryRef')
  handleQuery()
}

const emit = defineEmits(['select-value', 'input-query'])

/** 选择按钮操作 */
function selectValue(row) {
  if (row != null) {
    console.log('获取患者信息', row)
    const data = {
      id: row.id,
      patientType: row.patientType,
      studentId: row.studentId,
      name: row.name,
      gender: row.gender,
      counselor: row.counselor,
      department: row.department,
      major: row.major,
      classInfo: row.classInfo,
      phone: row.phone,
      age: row.age,
      idCard: row.idCard,
    }
    // console.log('从来源处获取患者信息', data)
    emit('select-value', data)

  }
}

// 使用 使用 父组件 传送 过来 的
const requestValueUpdate = () => {
  //
  props.onUpdate()
}

getList()

//  子组件 处方列表 使用
import PatientInformation from '@/components/Healthcare/OutpatientService/PatientInformation/index.vue'
import patientInformationUse from '@/components/Healthcare/OutpatientService/PatientInformation/use.ts'

//
const { openPatientInformation, titlePatientInformation, widthPatientInformation } = patientInformationUse()

//
const patientInformationRef = ref(null)

// 开卡建档 按钮 的 处理 方法
function addPatientInformation() {
  console.log('点击了 开卡建档 按钮', patientInformationRef.value)
  // 表单重置 患者 基础 信息 的 重置
  patientInformationRef.value.reset()
  //
  patientInformationRef.value.openDialog()
}

// 父组件 传 数据
const selectPatientInformation = value => {
  emit('select-value', value)
  closeDialog()
}

// 方法 控制 弹框 的 显示
const openDialog = () => {
  openPatientDossier.value = true
}
// 方法 控制 弹框 的 隐藏
const closeDialog = () => {
  openPatientDossier.value = false
}
//
const confirm = () => {
  // 处理确定逻辑
  closeDialog()
}

// 可以 给 queryRef 组件 暴露 方法   父组件 可以 调用 子组件 的 方法
defineExpose({
  openDialog,
  closeDialog
})
</script>
