<template>
  <el-drawer :model-value="visible" :title="title" size="80%" style="--el-drawer-padding-primary: 0" @close="close()">
    <my-layout v-loading="getting" class="bg-[#f2f3f4]">
      <layout-item>
        <div class="p-15px bg-white border-b border-gray-200">
          <el-radio-group v-model="tab">
            <el-radio-button label="profile" value="profile">基础信息</el-radio-button>
            <el-radio-button label="record" value="record">就诊记录</el-radio-button>
            <el-radio-button label="rx" value="rx">处方单</el-radio-button>
          </el-radio-group>
        </div>
      </layout-item>
      <layout-main :scroll="false">
        <div v-if="tab === 'profile'" class="p-15px bg-white">
          <el-descriptions title="" :column="2">
            <el-descriptions-item label="姓名：">{{patient.name}}</el-descriptions-item>
            <el-descriptions-item label="病历号：">{{patient.blhno}}</el-descriptions-item>
            <el-descriptions-item label="年龄：">{{patient.age}}</el-descriptions-item>
            <el-descriptions-item label="性别：">{{patient.sex}}</el-descriptions-item>
            <el-descriptions-item label="证件类型："> {{ idInfo[1] ?'身份证':'' }}</el-descriptions-item>
            <el-descriptions-item label="证件号：">{{idInfo[0] }}</el-descriptions-item>
            <el-descriptions-item label="手机号：">{{ patient.mobile }}</el-descriptions-item>
            <el-descriptions-item label="地址："> {{patient.address }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <visit-record v-else-if="tab === 'record'" :patient="patient" />
        <rx-record v-else-if="tab === 'rx'" :patient="patient" />
      </layout-main>
    </my-layout>
  </el-drawer>

</template>
<script setup>
import { computed, nextTick, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from 'dayjs';
import validate from "@/utils/validate";
import { maskIdNo, maskPhone } from "@/utils";

import MyLayout, { LayoutMain, LayoutItem } from "@/components/layout";
import visitRecord from "./visit-record.vue";
import rxRecord from "./rx-record.vue";

const emit = defineEmits(["close"]);
const props = defineProps({
  patient: {
    type: Object,
    default: () => ({})
  },
  visible: {
    type: Boolean,
    default: false,
  },
});
const tab = ref('profile')
const title = ref('')
const idInfo = computed(() => {
  const idNo = typeof props.patient.idCard === 'string' ? props.patient.idCard : '';
  const [isIdNo] = validate.isChinaId(idNo || '');
  const str = isIdNo ? idNo.replace(/^(\d{3})\d+(\w{4})$/, "$1***********$2") : idNo;
  return [str, isIdNo]
})

function close() {
  emit("close")
}



watch(() => props.visible, n => {
  if (n) {
    title.value = props.patient && props.patient.name ? `${props.patient.name}的档案` : '患者档案'
    tab.value = 'profile';
  }
})
</script>
<style lang="scss" scoped></style>
