<template>
  <el-dialog
    v-model="dialogVisible"
    destroy-on-close
    width="600px"
    :close-on-click-modal="false"
    title="转科申请"
    @close="closeDialog"
  >
    <div style="padding: 0 80px">
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item label="转入科室" prop="targetOrganizationId">
          <el-select
            v-model="form.targetOrganizationId"
            @change="fetchWardList"
            placeholder="请选择转入科室"
          >
            <el-option
              v-for="item in deptList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="转入病区" prop="targetLocationId">
          <el-select v-model="form.targetLocationId" no-data-text="请先选择科室" placeholder="请选择转入病区">
            <el-option
              v-for="item in wardList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="转科时间" prop="startTime">
          <el-radio-group v-model="form.startTime">
            <el-radio :value="today">今日</el-radio>
            <el-radio :value="tomorrow">明日</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="转科原因" prop="reasonText">
          <el-input
            v-model="form.reasonText"
            type="textarea"
            rows="5"
            placeholder="请输入转科原因"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitApplicationForm"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { transferOrganization } from './api.js';
import { getWardList, getOrgList } from '@/api/public.js';
import { patientInfo } from '../../../store/patient.js';
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const deptList = ref([]); // 科室列表
const wardList = ref([]); // 病区列表
const today = ref(proxy.formatDateStr(new Date(),'YYYY-MM-DD HH:mm:ss'))
const tomorrow = ref(proxy.formatDateStr(new Date().setDate(new Date + 1),'YYYY-MM-DD HH:mm:ss'))

const form = reactive({
  targetOrganizationId: '',
  targetLocationId: '',
  startTime: '',
  reasonText: '',
});

// 表单校验规则
const rules = ref({
  targetOrganizationId: [{ required: true, message: '请选择转入科室', trigger: 'change' }],
  targetLocationId: [{ required: true, message: '请选择转入病区', trigger: 'change' }],
  startTime: [{ required: true, message: '请选择转科时间', trigger: 'change' }],
  reasonText: [{ required: false }],
});

// 获取科室列表
function fetchDeptList() {
  getOrgList().then((response) => {
    deptList.value = response.data;
  });
}

// 获取病区列表
function fetchWardList() {
  getWardList({ orgId: form.targetOrganizationId }).then((response) => {
    wardList.value = response.data;
  });
}

function openDialog() {
  dialogVisible.value = true;
  // 打开对话框时获取数据
  fetchDeptList();
}

// 提交表单
function submitApplicationForm() {
  proxy.$refs.formRef.validate((valid) => {
    console.log(patientInfo.value);
    if (valid) {
      form.encounterId = patientInfo.value.encounterId
      form.patientId = patientInfo.value.patientId
      // 表单校验通过，执行提交逻辑
      transferOrganization(form).then((res) => {
        if (res.code == 200) {
          proxy.$modal.msgSuccess('转科申请已提交');
          dialogVisible.value = false;
        }
      });
    } else {
      // 表单校验不通过
      proxy.$modal.msgWarning('请完善必填信息');
      return false;
    }
  });
}

// 关闭对话框
function closeDialog() {
  // 重置表单
  proxy.$refs.formRef.resetFields();
  // 重置数据
  Object.assign(form, {
    targetOrganizationId: '',
    targetLocationId: '',
    startTime: '',
    reasonText: '',
  });
}

defineExpose({
  openDialog,
});
</script>