<template>
  <!-- <div v-if="ext && ext.id"
    class="w-3/5 relative mx-auto rounded-8px bg-white shadow-lg border border-gray-100 overflow-hidden mb-15px">
    <div class="flex items-center head-linear-bg px-15px py-15px ">
      <img :src="iconUrl" class="w-24px h-24px mr-1" />
      <div class="text-18px font-semibold text-dark-500">电子处方</div>
    </div>
    <div class="px-15px">
      <div class="flex items-center">
        <div class="w-0 flex-grow">
          <div class="flex text-14px mb-10px">
            <div class="flex-shrink-0 text-dark-500 mr-2">患者: </div>
            <div class="text-dark-500">
              <text>{{ext.name}}</text>
              <text v-if="ext.sex || ext.age"> ({{ext.sex || ''}} {{ext.age > 0 ? `${ext.age}岁` : ''}})</text>
            </div>
          </div>
          <div class="flex text-14px mb-10px">
            <div class="flex-shrink-0 text-dark-500 mr-2">诊断: </div>
            <div class="text-dark-500">{{ext.disease || ''}}</div>
          </div>
          <div class="flex text-14px mb-10px">
            <div class="flex-shrink-0 text-dark-500 mr-2">时间: </div>
            <div class="text-dark-500">{{ext.time}}</div>
          </div>
        </div>
        <img class="ml-2 w-70px h-70px flex-shrink-0 transform -translate-y-3" :src="pic" />
      </div>
      <div class="border-t border-dashed border-gray-200"></div>
      <div v-for="(med,idx) in drugs" :key="idx" class="py-10px">
        <div class="flex justify-between">
          <div class="w-0 flex-grow">
            <text class="mr-2 text-16px font-semibold text-dark-500">{{med.drugName}}</text>
            <text class="text-14px text-gray-500">{{med.spec || ''}}</text>
          </div>
          <div class="ml-2 min-w-40px text-right ">
            x {{med.quantity}} {{med.unit || ''}}
          </div>
        </div>
        <div class="text-gray-500">{{ med.memo }}</div>
      </div>
    </div>
  </div> -->
  <!-- v-else -->
  <div class="other-message-item">
    【系统提示】处方审核通过
  </div>
</template>
<script setup>
import { computed } from "vue";

const pic = new URL("@/assets/icons/yikaifang.svg", import.meta.url).href; // 默认logo
const iconUrl = new URL("@/assets/icons/icon-rx-icon.svg", import.meta.url).href;
const props = defineProps({
  extension: {
    type: Object,
    default: () => ({}),
  },
});

const ext = computed(() => {
  try {
    const rx = JSON.parse(props.extension);
    return rx
  } catch (e) { }
  return typeof props.extension === 'string' ? props.extension : '';
});
const drugs = computed(() => {
  if (ext.value && Array.isArray(ext.value.drugs)) {
    return ext.value.drugs.map(i => {
      const memo = [i.usageName, i.frequencyName, i.dosage ? `每次${i.dosage}${i.dosage_unit || ''}` : ''].filter(Boolean).join('，')
      return {
        ...i,
        memo,
      }
    })
  }
  return
})

// const extension
</script>
<style scoped>
.head-linear-bg {
  background: linear-gradient(181deg, #FFF9F2 1.12%, #FFF 19.12%);
}
</style>