<template>
  <el-drawer :model-value="visible" title="处方订单详情" size="70%" style="--el-drawer-padding-primary: 0" @close="close()">
    <my-layout>
      <layout-main>
         <div v-if="data" class="prescription-container">
          <div class="header">
            <div class="row">
              <div class="company">绍兴市同源健康管理有限公司越城</div>
              <div class="prescription-type">
                <div>普通</div>
                <div>处方</div>
              </div>
            </div>
            <div class="hospital">震元堂中医院互联网医院处方笺</div>
            <div class="sub-header">
              <span class="no">NO:{{ no }}</span>
            </div>
          </div>
          <div class="patient-info">
            <div class="info-row">
              <div class="info-item" style="width: 28%">姓名：{{ data.name }}</div>
              <div class="info-item" style="width: 20%">性别：{{ info.sex }}</div>
              <div class="info-item" style="width: 28%">费别：</div>
              <div class="info-item" style="width: 24%">年龄：{{ info.age }}</div>
            </div>
            <div class="info-row">
              <div class="info-item" style="width: 60%">门诊病历号：{{ data.blhno }}</div>
              <div class="info-item" style="width: 40%">科别：{{ data.deptName }}</div>
            </div>
            <div class="info-row">
              <div class="info-item full-width">地址： {{ data.address }}</div>
            </div>
            <div class="info-row">
              <div class="info-item full-width">电话号：{{ data.mobile }}</div>
            </div>
          </div>
          <!-- 诊断信息 -->
          <div class="diagnosis-section">
            <div class="diagnosis-header">
              <span>诊断：</span>
              <span class="date">开方日期：{{ info.time }}</span>
            </div>
            <div class="diagnosis-items">
              <div v-for="(i, idx) in diagnosis" :key="i.code">{{ idx + 1 }}. {{ i.name }}</div>
            </div>
          </div>
          <!-- 药品处方区域 -->
          <div class="medicine-section">
            <div class="rp-symbol">Rp</div>
            <div v-if="data.prescriptionType === 'medicalWinePurchase'" class="medicine-list">
              <div v-for="i in data.wines" :key="i._id" class="medicine-item">
                <div class="medicine-name">{{ i.name }} x {{ i.quantity }} {{ i.unit }}</div>
                <div class="medicine-spec">{{ i.details }}</div>
              </div>
            </div>
            <div v-else class="medicine-list">
              <div v-for="i in drugList" :key="i.insurance_code" class="medicine-item">
                <div class="medicine-name">{{ i.drugName }} x {{ i.quantity }} {{ i.unit }}</div>
                <div class="medicine-spec">规格：{{ i.specification }}</div>
                <div class="medicine-usage">用法：{{ i.memo }}</div>
              </div>
            </div>
          </div>
          <!-- 底部签章区域 -->
          <div class="footer">
            <div class="stamp-area">
              <div class="signatures">
                <div class="signature-item" style="width: 33%">
                  <div>医生：
                    <img v-if="doctorImg" class="signImage" :src="doctorImg" />
                    <text v-else>{{ data.doctorName }}</text>
                  </div>
                  <div class="stamp">
                    <!-- <image class="stamp-img" src="/static/stamp.png"></image> -->
                  </div>
                </div>
                <div class="signature-item" style="width: 33%">
                  <div>审方：<img v-if="yaoshiImg" class="signImage" :src="yaoshiImg" />
                    <text v-else>{{ data.pharmacist }}</text>
                  </div>
                  <div>发药：</div>
                </div>
                <div class="signature-item" style="width: 34%">
                  <div class="stamp">收费盖章：
                    <!-- <image class="stamp-img" src="/static/stamp.png"></image> -->
                  </div>
                  <div>配方：</div>
                  <div>复核：</div>
                </div>
              </div>
            </div>
            <div class="notice">注意：请勿丢失，处方当日有效，因特殊情况，该处方有效为天（签名：）</div>
          </div>
        </div>
      </layout-main>
     
    </my-layout>
  </el-drawer>
</template>
<script setup>
import { computed, ref ,watch} from 'vue';
import { getSealImage } from '@/api/hlw';
import validate from "@/utils/validate";
import dayjs from 'dayjs';

const emits = defineEmits(['close'])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  }
})
const doctorCode = ref('')
const pharmacistNo=ref('')
const doctorImg = ref('')
const yaoshiImg = ref('')
const diagnosis = computed(() => props.data && Array.isArray(props.data.diagnosisList) ? props.data.diagnosisList : [])
const drugList = computed(() => {
  const drugs = props.data && Array.isArray(props.data.drugs) ? props.data.drugs : [];
  return drugs.map((item) => {
    const arr = [item.usageName, item.frequencyName, item.dosage ? `每次${item.dosage}${item.dosage_unit || ''}` : ''].filter(Boolean);
    return { ...item, memo: arr.join(' ') }
  })
})
const info = computed(() => {
  const idNo = typeof props.data.idCard === 'string' ? props.data.idCard : '';
  const [isIdNo] = validate.isChinaId(idNo || '');
  if(!isIdNo){return {age:'',sex:''}}
  const birthDate = `${idNo.slice(6, 10)}-${idNo.slice(10, 12)}-${idNo.slice(12, 14)}`;
  const sexCode = idNo.slice(16, 17);
  const createTime = props.data.createTime && dayjs(props.data.createTime).isValid() ? dayjs(props.data.createTime) : '';
  const info = {sex: sexCode % 2 === 0 ? '女' : '男'}; 
  if(createTime){
    info.age = createTime.diff(dayjs(birthDate), 'year') + '岁';
    info.time = createTime.format('YYYY-MM-DD');
  }
  return info
})
const no = computed(()=> {
  // if(props.data.prescriptionType === "medicalWinePurchase"){
  //   return props.data.orderNo
  // }
  return props.data.medOrgOrderNo
})

function getDoctorSign() {
  if (props.data && props.data.doctorCode && props.data.doctorCode !== doctorCode.value) {
    doctorCode.value = props.data.doctorCode;
    getSealImage(props.data.doctorCode).then(res => {
      doctorImg.value = res.data && res.data.data ? `data:image/png;base64,${res.data.data}` : '';
    })
  }
  if (props.data && props.data.pharmacistNo && props.data.pharmacistNo !== pharmacistNo.value) {
    pharmacistNo.value = props.data.pharmacistNo;
    getSealImage(props.data.pharmacistNo).then(res => {
      yaoshiImg.value = res.data && res.data.data ? `data:image/png;base64,${res.data.data}` : '';
    })
  }
}

function close() {
  emits('close', false)
}
watch(()=>props.visible, val=> {
  if(val){
    getDoctorSign();
  }
})



</script>
<style lang="scss" scoped>
.side-wrapper {
  height: 100vh;
  min-width: 500px;
  width: 80vw;
  max-width: 640px;
  background: red;
}

.prescription-container {
  margin: 0 auto;
  font-family: "SimSun", serif;
  background: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  line-height: 1.5;
  padding: 12px 12px 120px;
  font-size: 14px;
}

/* 头部样式 */
.header {
  border-bottom: 1px solid #000;
  padding-bottom: 16px;
  margin-bottom: 12px;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.company {
  font-size: 15px;
  font-weight: bold;
}

.prescription-type {
  font-size: 14px;
  color: #666;
  border: 1px solid #333;
  width: 40px;
  text-align: center;
}

.hospital {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 8px 0;
}

.sub-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 10px;
  flex-direction: column;
}

/* 患者信息表格 */
.patient-info {
  margin: 12px 0;
}

.info-row {
  display: flex;
  padding: 6px 4px;
}

.info-row:last-child {
  border-bottom: none;
}

.info-item {
  padding: 0 4px;
  white-space: normal;
}

.full-width {
  width: 100% !important;
}

/* 诊断区域 */
.diagnosis-section {
  margin: 15px 0;
}

.diagnosis-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.date {
  font-size: 13px;
  color: #666;
}

/* 药品处方 */
.medicine-section {
  position: relative;
  padding-left: 30px;
  margin: 18px 0;
}

.rp-symbol {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}

.medicine-item {
  margin-bottom: 15px;
}

.medicine-name {
  font-weight: bold;
}

.medicine-spec {
  color: #666;
  margin: 3px 0;
}

/* 底部签章 */
.footer {
  border-top: 1px dashed #999;
  padding-top: 15px;
  margin-top: 20px;
}

.stamp-area {
  margin-bottom: 15px;
}

.signatures {
  display: flex;
  margin-top: 15px;
}

.signature-item {
  padding: 0 8px;
}

.stamp {
  position: relative;
  /* margin-top: 50rpx; */
}

.signImage {
  display: inline-block;
  width: 50px;
  height: 20px;
}

.stamp-img {
  position: absolute;
  left: 0;
  top: 75px;
  width: 140px;
  height: 140px;
}

.notice {
  color: #d32f2f;
  font-size: 12px;
  margin-top: 15px;
}

.no {
  margin-top: 5px;
}
</style>
