<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="ID号" prop="searchKey">
        <el-input
          v-model="queryParams.searchKey"
          placeholder="请输入门诊号/处方号/病人ID"
          clearable
          style="width: 210px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="处方号" prop="prescriptionNo">
        <el-input
          v-model="queryParams.prescriptionNo"
          placeholder="请输入处方号"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="病人ID" prop="patientBusNo">
        <el-input
          v-model="queryParams.patientBusNo"
          placeholder="请输入病人ID"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="电话" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入电话"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="查询时间">
        <el-date-picker
          v-model="dateRange"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="皮试项目状态" prop="clinicalStatusEnum">
        <el-select
          v-model="queryParams.clinicalStatusEnum"
          placeholder="请选择状态"
          clearable
          @keyup.enter="handleQuery"
          style="width: 160px"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.info"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="skinRecordList" border style="width: 100%">
      <el-table-column prop="prescriptionNo" label="处方号" width="150" />
      <el-table-column prop="encounterBusNo" label="门诊号" width="150" />
      <el-table-column prop="patientBusNo" label="病人ID" width="150" />
      <el-table-column prop="patientName" label="病人" width="120" />
      <el-table-column label="发药状态" width="180">
        <template #default="scope">
          <span
            :class="getStatusColor(scope.row.medicationStatusEnum_enumText)"
          >
            {{ scope.row.medicationStatusEnum_enumText }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="medicationInformation"
        label="药品信息"
        width="150"
      />
      <el-table-column prop="medicationDetail" label="药品" width="160" />
      <el-table-column
        prop="medicationLotNumber"
        label="药品批号"
        width="160"
      />
      <el-table-column
        prop="verificationStatusEnum_enumText"
        label="皮试状态"
        width="80"
      />
      <el-table-column
        prop="clinicalStatusEnum_enumText"
        label="皮试结果"
        width="120"
      >
        <template #default="scope">
          <span
            :class="getClinicalStatus(scope.row.clinicalStatusEnum_enumText)"
          >
            {{ scope.row.clinicalStatusEnum_enumText }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="performerId_dictText"
        label="执行护士"
        width="130"
      />
      <el-table-column
        prop="performerCheckId_dictText"
        label="核对护士"
        width="130"
      />
      <el-table-column
        prop="occurrenceStartTime"
        key="occurrenceStartTime"
        label="开始时间"
        width="180"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.occurrenceStartTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="occurrenceEndTime"
        key="occurrenceEndTime"
        label="结束时间"
        width="180"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.occurrenceEndTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="doctorId_dictText" label="开单医生" width="180" />
      <el-table-column prop="note" label="备注" width="180" />
      <el-table-column
        label="操作"
        align="center"
        width="210"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            :disabled="!!scope.row.performerCheckId_dictText"
            >修改</el-button
          >
          <el-button
            link
            type="primary"
            icon="EditPen"
            @click="sign(scope.row)"
            :disabled="
              !!scope.row.performerCheckId_dictText ||
              scope.row.medicationStatusEnum_enumText == '未完成'
            "
            >签名</el-button
          >
          <!-- <el-button link type="primary" icon="Finished" @click="submitForm(scope.row)" v-hasPermi="['system:menu:add']">保存</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-dialog title="查看" v-model="open" width="900px" append-to-body>
      <el-form
        ref="skinRecordRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item label="处方号" prop="prescriptionNo">
              <el-input v-model="form.prescriptionNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="门诊号" prop="encounterBusNo">
              <el-input v-model="form.encounterBusNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="病人" prop="patientName">
              <el-input v-model="form.patientName" disabled />
            </el-form-item>
          </el-col> </el-row
        ><br />
        <el-row>
          <el-col :span="8">
            <el-form-item label="药品信息" prop="medicationInformation">
              <el-input
                v-model="form.medicationInformation"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="药品" prop="medicationDetail">
              <el-input v-model="form.medicationDetail" disabled />
            </el-form-item>
          </el-col> </el-row
        ><br />
        <el-row>
          <el-col :span="7">
            <el-form-item label="药品批号" prop="medicationLotNumber">
              <el-input v-model="form.medicationLotNumber" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="皮试状态" prop="verificationStatusEnum">
              <el-select
                v-model="form.verificationStatusEnum"
                placeholder="请选择皮试状态"
                clearable
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.info"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="皮试结果" prop="clinicalStatusEnum">
              <el-select
                v-model="form.clinicalStatusEnum"
                placeholder="请选择皮试结果"
                clearable
                :disabled="isViewMode"
              >
                <el-option
                  v-for="item in skinResultList"
                  :key="item.value"
                  :label="item.info"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col> </el-row
        ><br />
        <el-row>
          <el-col :span="7">
            <el-form-item label="执行护士" prop="performerId_dictText">
              <el-input v-model="form.performerId_dictText" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="核对护士" prop="performerCheckId_dictText">
              <el-input v-model="form.performerCheckId_dictText" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="开单医生" prop="name">
              <el-input v-model="form.name" disabled />
            </el-form-item>
          </el-col> </el-row
        ><br />
        <el-row>
          <el-col :span="8">
            <el-form-item label="开始时间" prop="occurrenceStartTime">
              <el-date-picker
                v-model="form.occurrenceStartTime"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="开始时间"
                :default-time="defaultTime"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束时间" prop="occurrenceEndTime">
              <el-date-picker
                v-model="form.occurrenceEndTime"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="结束时间"
                :default-time="defaultTime"
              />
            </el-form-item>
          </el-col> </el-row
        ><br />
        <el-row>
          <el-col :span="7">
            <el-form-item label="发药状态" prop="medicationStatusEnum">
              <el-input v-model="form.medicationStatusEnum" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="note">
              <el-input v-model="form.note" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="saveForm">确认项目</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script  setup name="skinRecord">
import { ref, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

import {
  listSkinRecord,
  updateNurseSign,
  updateSkinTestRecord,
  lists,
} from "./component/api";

const showSearch = ref(true);
const total = ref(1);
const dateRange = ref([]);
const skinRecordList = ref([]);
const skinResultList = ref([]);
const statusList = ref([]);

const open = ref(false);

const getStatusColor = (clinicalStatusEnum) => {
  return clinicalStatusEnum !== "已完成" ? "status-red" : "";
};

const getClinicalStatus = (clinicalStatusEnum) => {
  return clinicalStatusEnum === "阳性" ? "status-red" : "";
};

const { proxy } = getCurrentInstance();

const data = reactive({
  form: {},
  queryParams: {
    pageNo: 1,
    pageSize: 10,
    // encounterBusNo: undefined,
    // prescriptionNo: undefined,
    // patientBusNo: undefined,
    searchKey: undefined,
    phone: undefined,
    clinicalStatusEnum: undefined,
  },
});
const { queryParams, form } = toRefs(data);
/** 表单重置 */
function reset() {
  form.value = {
    prescriptionNo: 0,
    encounterBusNo: undefined,
    patientName: undefined,
    medicationInformation: undefined,
    medicationDetail: undefined,
    medicationLotNumber: undefined,
    status: undefined,
    clinicalStatusEnum: 0,
    performerId_dictText: undefined,
    performerCheckId_dictText: undefined,
    occurrenceStartTime: undefined,
    occurrenceEndTime: undefined,
    medicationStatusEnum: undefined,
    note: undefined,
  };
  proxy.resetForm("skinRecordRef");
}

/** 查询门诊皮试列表 */
function getList() {
  listSkinRecord(queryParams.value).then((response) => {
    console.log("12346999999");
    skinRecordList.value = response.data.records;
    total.value = response.data.total;
  });
  lists().then((response) => {
    console.log("1234", response);
    // skinResultList.value = response.data.verificationStatus;
    // statusList.value = response.data.clinicalStatus;
    //皮试状态
    statusList.value = response.data.verificationStatus;
    //皮试结果
    skinResultList.value = response.data.clinicalStatus;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.recordedDateSTime =
    dateRange.value && dateRange.value.length == 2 ? dateRange.value[0] : "";
  queryParams.value.recordedDateETime =
    dateRange.value && dateRange.value.length == 2 ? dateRange.value[1] : "";
  queryParams.value.pageNo = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

function cancel() {
  open.value = false;
  reset();
}
function handleUpdate(row) {
  if (row.medicationStatusEnum_enumText === "已发药") {
    // 如果状态是“已完成”，允许编辑
    reset();
    open.value = true;
    form.value = row;
  } else {
    // 如果状态不是“已完成”，提示用户
    ElMessageBox.alert("请先领药", "提示", {
      type: "error",
      center: true, // 确保对话框居中
    });
  }
}
function sign(row) {
  console.log("564564", row);
  proxy.$modal
    .confirm("签字后无法修改信息")
    .then(() => {
      updateNurseSign(row)
        .then((response) => {
          proxy.$modal.msgSuccess("签名成功");
          open.value = false;
          getList();
        })
        .catch((error) => {
          // 处理签名失败的逻辑
          proxy.$modal.msgError("签名失败：" + error.message);
        });
    })
    .catch(() => {});
}

function saveForm() {
  if (form.value.startTime > form.value.endTime) {
    ElMessage({
      message: "开始时间不能大于结束时间",
      type: "error",
    });
  } else {
    updateSkinTestRecord(form.value).then((response) => {
      proxy.$modal.msgSuccess("更新成功");
      open.value = false;
      getList();
    });
    open.value = false;
  }
}

// function submitForm() {
//   proxy.$refs["patientRef"].validate((valid) => {
//     if (valid) {
//       updateSkinTestRecord(form.value).then((response) => {
//         proxy.$modal.msgSuccess("更新成功");
//         open.value = false;
//         getList();
//       });
//     }
//   });
// }

getList();
</script>

<style scoped>
.status-red {
  color: red; /* 设置字体颜色为红色 */
}
</style>