<template>
  <el-drawer :model-value="visible" title="申请单信息" size="70%" style="--el-drawer-padding-primary: 0" @close="close()">
    <my-layout v-loading="loading" class="bg-[#f2f3f4]">
      <layout-item>
        <div class="bg-white">
          <div class="px-15px py-12px bg-[#ecf4ff] bg-opacity-30">
            <div class="flex items-center justify-between pb-10px">
              <div>
                <span class="text-16px font-semibold">{{ order.name }}</span>
                <span class="text-14px ml-5px">{{ order.sex }} {{ order.age ? order.age + "岁" : "" }}</span>
              </div>
              <el-button plain type="primary" @click="viewArchive()">病历档案</el-button>
            </div>
            <el-form class="mt-5px" label-suffix="：">
              <el-row>
                <el-col :lg="8" :md="12" :xs="24">
                  <el-form-item class="mb-0" label="身份证号">{{ order.idCard }}</el-form-item>
                </el-col>
                <el-col :lg="8" :md="12" :xs="24">
                  <el-form-item class="mb-0" label="卡号">{{ order.blhno }}</el-form-item>
                </el-col>
                <el-col :lg="8" :md="12" :xs="24">
                  <el-form-item class="mb-0" label="手机号">{{ order.mobile }}</el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="my-10px bg-white">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="" name="advice">
              <template #label>
                <div class="px-12px">医嘱单</div>
              </template>
            </el-tab-pane>
            <el-tab-pane label="" name="apply">
              <template #label>
                <div class="px-12px">患者申请单</div>
              </template>
            </el-tab-pane>
            <!-- <el-tab-pane label="历史病历" name="history">
              <template #label>
                <div class="px-12px">历史病历</div>
              </template>
            </el-tab-pane> -->
          </el-tabs>
        </div>
      </layout-item>
      <layout-main v-if="activeTab === 'advice'" ref="mainRef" class="bg-white">
        <doctor-advice :order="order" :info="info" />
      </layout-main>
      <layout-main v-else-if="activeTab === 'apply'" :scroll="false">
        <illness-summary :order="order" />
      </layout-main>
      <layout-item v-if="info.status === 'INIT'">
        <div class="text-center py-12px bg-white relative z-1" common-shadow--r>
          <el-button plain class="w-100px" type="primary" @click="audit()">审核通过</el-button>
          <el-button plain class="w-100px" type="danger" @click="rejectVisible = true">审核不通过</el-button>
        </div>
      </layout-item>
    </my-layout>
  </el-drawer>
  <reject-modal :memberInfo="memberInfo" :ids="[props.info.rxId]" :visible="rejectVisible" :width="width"
    @close="rejectVisible = false" @change="change()" />
  <archive-drawer :patient="patient" :visible="archiveVisible" @close="archiveVisible = false" />
</template>
<script setup>
import { computed, nextTick, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";

import MyLayout, { LayoutMain, LayoutItem } from "@/components/layout";
import { Delete, Plus } from "@element-plus/icons-vue";
import doctorAdvice from "./advice.vue";
import rejectModal from "./reject-modal.vue";
import archiveDrawer from "@/components/archive-drawer/archive-drawer.vue";

import illnessSummary from "@/components/illness-summary/illness-summary.vue";
import { auditDiagnosis } from "@/api/hlw.js";

const props = defineProps({
  width: {
    type: [Number, String],
  },
  info: {
    type: Object,
    default: () => ({}),
  },
  memberInfo: {
    type: Object,
    default: () => ({}),
  },
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["close"]);
const activeTab = ref("advice");
const rejectVisible = ref(false);
const mainRef = ref();
const patient = ref({});
const archiveVisible = ref(false);
const loading = ref(false);
const order = computed(() => {
  return props.info && props.info.order ? props.info.order : {};
});
function close() {
  emit("close");
}

async function audit() {
  await ElMessageBox.confirm(`确定审核通过吗？`, "提示", { type: "warning" });
  loading.value = true;
  const { success, message, data } = await auditDiagnosis({
    ids: [props.info.rxId],
    status: 'PASS',
    pharmacistNo: props.memberInfo.workNo,
    pharmacist: props.memberInfo.anotherName,
    status: 'PASS'
  });
  loading.value = false;
  const failList = data && Array.isArray(data.failList) ? data.failList : [];
  if (failList.length) {
    ElMessage.error(failList[0].message);
    return
  }
  if (success) {
    ElMessage.success(message);
    change();
  } else {
    ElMessage.error(message);
  }
}

function change() {
  rejectVisible.value = false;
  close();
  emit("change");
}

function viewArchive() {
  patient.value = order.value;
  archiveVisible.value = true;
  console.log(patient.value);

}

// changeFrequency
watch(
  () => props.visible,
  async (n) => {
    if (n) {
      activeTab.value = "advice";
      await nextTick();
      mainRef.value && mainRef.value.scrollTo(0);
    }
  }
);
</script>
<style lang="scss" scoped></style>
