<template>
  <el-drawer :model-value="visible" title="处方订单详情" size="70%" style="--el-drawer-padding-primary: 0" @close="close()">
    <my-layout>
      <layout-main>
        <div class="px-15px py-12px">
          <div class="pb-10px text-14px leading-20px">
            <div v-if="record.status === 'PASS' && record.uploadStatus && record.uploadStatus !== 'uploaded'"
              class="text-red-500 mt-5px">上传his失败</div>
            <div v-else-if="record.status === 'PASS'"
              class="mx-auto inline-block bg-green-500 text-white rounded-md px-2">
              通过
            </div>
            <div v-else-if="record.status === 'INIT'"
              class="mx-auto inline-block bg-orange-500 text-white rounded-md px-2">
              待审核
            </div>
            <div v-else-if="record.status === 'UNPASS'"
              class="mx-auto inline-block bg-red-500 text-white rounded-md px-2">未通过</div>
            <div v-else-if="record.status === 'EXPIRED'"
              class="mx-auto inline-block bg-gray-300 text-white rounded-md px-2">
              已过期
            </div>
            <div v-else class="mx-auto inline-block bg-gray-300 text-white rounded-md px-2">
              已取消
            </div>

            <div v-if="record.status === 'EXPIRED'" class="inline-block text-gray-500 ml-10px">原因：审核未通过且问诊订单已关闭</div>
            <div v-else-if="record.reasonStr" class="inline-block text-gray-500 ml-10px">原因：{{ record.reasonStr }}</div>
          </div>
          <div active-title-bar>患者就诊信息</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="姓名">
                  <span class="text-blue-500 cursor-pointer" @click="viewPatient()">{{ record.name }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :md="12" :xs="24">
                <el-form-item class="mb-0" label="性别">{{ order.sex }} </el-form-item>
              </el-col>
              <el-col :lg="8" :md="12" :xs="24">
                <el-form-item class="mb-0" label="年龄">{{ order.age }} </el-form-item>
              </el-col>
              <el-col :lg="8" :md="12" :xs="24">
                <el-form-item class="mb-0" label="身份证号">{{ record.idCard }} </el-form-item>
              </el-col>
              <el-col :lg="8" :md="12" :xs="24">
                <el-form-item class="mb-0" label="卡号">{{ record.blhno }} </el-form-item>
              </el-col>
              <el-col :lg="8" :md="12" :xs="24">
                <el-form-item class="mb-0" label="手机号">{{ record.mobile }} </el-form-item>
              </el-col>
              <el-col :lg="8" :md="12" :xs="24">
                <el-form-item class="mb-0" label="挂号科室">{{ record.deptName }} </el-form-item>
              </el-col>
              <el-col :lg="8" :md="12" :xs="24">
                <el-form-item class="mb-0" label="问诊日期">
                  {{ dayjs(order.createTime).format('YYYY-MM-DD HH:mm') }}
                </el-form-item>
              </el-col>
              <el-col :lg="8" :md="12" :xs="24">
                <el-form-item class="mb-0" label="医生">{{ record.doctorName }} </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div active-title-bar class="mt-10px">门诊病历</div>
          <el-form class="mt-5px" label-suffix="：">
            <el-form-item class="mb-0" label="主诉">{{ record.complaint }}</el-form-item>
            <el-form-item class="mb-0" label="现病史">{{ record.presentIllness }}</el-form-item>
            <el-form-item class="mb-0" label="处置">{{ record.dispose }}</el-form-item>
            <el-form-item class="mb-0" v-for="(item, idx) in (record.diagnosisList || [])" :label="`诊断${idx + 1}`">
              {{ item.name }} {{ item.desc || '' }}
            </el-form-item>
          </el-form>
          <template v-if="record.prescriptionType === 'medicalWinePurchase'">
            <div active-title-bar class="mt-10px">药品信息</div>
            <el-table class="mt-10px" :data="record.wines">
              <el-table-column label="序号" prop="index" :width="60">
                <template #default="{ $index }">{{ $index + 1 }}</template>
              </el-table-column>
              <el-table-column label="药品" prop="showName" :min-width="200">
                <template #default="{ row }">
                  <span class="mr-2">{{ row.name }}</span>
                  <span v-if="row.details" class="text-gray-500">({{ row.details }})</span>
                </template>
              </el-table-column>
              <el-table-column label="数量" prop="quantity" :width="100">
                <template #default="{ row }">{{ row.quantity }} {{ row.unit }}</template>
              </el-table-column>
            </el-table>
          </template>
          <template v-else>
            <div active-title-bar class="mt-10px">西药处方</div>
            <el-table class="mt-10px" :data="drugList">
              <el-table-column label="序号" prop="index" :width="60">
                <template #default="{ $index }">{{ $index + 1 }}</template>
              </el-table-column>
              <el-table-column label="药品" prop="showName" :min-width="200">
                <template #default="{ row }">{{ row.showName }}</template>
              </el-table-column>
              <el-table-column label="数量" prop="quantity" :width="100">
                <template #default="{ row }">{{ row.quantity }} {{ row.unit }}</template>
              </el-table-column>
              <el-table-column label="用法" prop="memo" :min-width="100">
                <template #default="{ row }">{{ row.memo }}</template>
              </el-table-column>
            </el-table>
          </template>
          <div active-title-bar class="mt-10px">其他信息</div>
          <el-form class="mt-5px" label-suffix="：">
            <el-form-item class="mb-0" label="订单编号">{{ record.orderId }} </el-form-item>
            <el-form-item class="mb-0" label="医嘱提交时间">
              {{ record.createTime ? dayjs(record.createTime).format('YYYY-MM-DD HH:mm') : '' }}
            </el-form-item>
            <el-form-item class="mb-0" label="审方药师">
              {{ record.pharmacist || '-' }}
            </el-form-item>
            <el-form-item class="mb-0" label="审核时间">
              {{ record.auditTime ? dayjs(record.auditTime).format('YYYY-MM-DD HH:mm') : '' }}
            </el-form-item>
          </el-form>
        </div>
      </layout-main>
      <layout-item>
        <div class="text-center py-12px bg-white relative z-1" common-shadow--r>
          <el-button v-if="record.status === 'PASS' && record.uploadStatus !== 'uploaded'" plain class="w-100px"
            type="success" @click="reUpload()">重新上传</el-button>
          <el-button v-if="record.status === 'PASS'" class="w-100px" type="primary"
            @click="paperVisible = true">查看处方笺</el-button>
        </div>
      </layout-item>
    </my-layout>
  </el-drawer>

  <rx-paper-drawer :visible="paperVisible" :data="record" @close="paperVisible = false" />
</template>
<script setup>
import { computed, ref } from 'vue';
import dayjs from 'dayjs'
import MyLayout, { LayoutMain, LayoutItem } from "@/components/layout";
import { reUploadDiagnosticRecord } from "@/api/hlw";
import RxPaperDrawer from "@/components/rx-paper-drawer/rx-paper-drawer.vue";

const emits = defineEmits(['close', 'change'])
const props = defineProps({
  record: {
    type: Object,
    default: () => ({})
  },
  order: {
    type: Object,
    default: () => ({})
  },
  visible: {
    type: Boolean,
    default: false
  }
})

const paperVisible = ref(false);
const drugList = computed(() => props.record && Array.isArray(props.record.drugs) ? props.record.drugs.map((drug) => {
  const spec = drug.specification ? `（${drug.specification}）` : '';
  const showName = drug.drugName + spec;
  const memo = [drug.usageName, drug.frequencyName, (drug.dosage || '') + (drug.dosage_unit || '')].filter(Boolean).join('，')
  return { ...drug, memo, showName }
}).filter(i => i.insurance_code) : [])


function close() {
  emits('close')
}

async function reUpload(row) {
  loadingInstance.value = ElLoading.service({})
  const { success } = await reUploadDiagnosticRecord(row._id);
  loadingInstance.value.close();
  loadingInstance.value = null;
  if (success) {
    ElMessage.success("重新上传成功");
    close()
    emits('change')
  } else {
    ElMessage.error("重新上传失败");
  }
}


</script>
<style lang="scss" scoped></style>
