<template>
  <el-dialog :model-value="visible" :width="width" title="医嘱预览" @close="close()">
    <el-scrollbar v-if="visible" wrap-class="el-dialog-body-full-scroll">
      <div class="px-15px py-12px">
        <div class="pb-10px">
          <span class="text-16px font-semibold">{{order.name}}</span>
          <span class="text-14px ml-5px">{{order.sex}} {{order.age ? order.age + '岁' : ''}}</span>
        </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="身份证号">{{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-col :lg="8" :md="12" :xs="24">
              <el-form-item class="mb-0" label="挂号科室">{{order.deptName}} </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xs="24">
              <el-form-item class="mb-0" label="就诊日期">
                {{order.createTime ? 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="医生">{{order.doctorName}} </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div active-title-bar>门诊病历</div>
        <el-form class="mt-5px" label-suffix="：">
          <el-form-item class="mb-0" label="主诉">{{ form.complaint }}</el-form-item>
          <el-form-item class="mb-0" label="现病史">{{ form.presentIllness }}</el-form-item>
          <el-form-item class="mb-0" label="处置">{{ form.dispose }}</el-form-item>
          <el-form-item class="mb-0" v-for="(item,idx) in diagnosisList" :label="`诊断${idx+1}`">
            {{ item.name}} {{ item.desc||'' }}
          </el-form-item>
        </el-form>
        <div active-title-bar>西药处方</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>
      </div>
    </el-scrollbar>
    <template #footer>
      <div text-center>
        <el-button plain class="w-100px" type="primary" @click="close()">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import dayjs from 'dayjs'

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

const diagnosisList = computed(() => Array.isArray(props.diagnosisList) ? props.diagnosisList.filter(i => i.code && i.name) : [])
const drugList = computed(() => Array.isArray(props.drugs) ? props.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')
}


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