<script setup lang="ts">
import { useDictionary }             from '@/libs/dictionary';
import type { PatientModel }         from '@/model';
import { patientDictionariesMethod } from '@/request/api/dictionary.api';
import { useRequest }                from 'alova/client';


const props = withDefaults(defineProps<{
  dataset: PatientModel;
  loading?: boolean;
  title?: string;
}>(), {
  title: '基础信息',
});

const { data: dictionaries } = useRequest(patientDictionariesMethod);

const gender = useDictionary(dictionaries, 'sys_user_sex', computed(() => props.dataset.gender));
const job = useDictionary(dictionaries, 'job', computed(() => props.dataset.job));
const drinkState = useDictionary(dictionaries, 'sys_yes_no', computed(() => props.dataset.drinkState));
const smokeState = useDictionary(dictionaries, 'sys_yes_no', computed(() => props.dataset.smokeState));
const hobbyFlavor = useDictionary(dictionaries, 'hobby_flavor', computed(() => props.dataset.hobbyFlavor));
const foodAllergy = useDictionary(dictionaries, 'food_allergy', computed(() => props.dataset.foodAllergy));
const womenSpecialPeriod = useDictionary(
  dictionaries,
  'women_special_period',
  computed(() => props.dataset.womenSpecialPeriod),
);
const containerRef = ref<HTMLElement>();
defineExpose({
  elementTarget: containerRef,
});
</script>
<template>
  <div class="card patient-card" ref="containerRef">
    <div class="card__header sticky flex justify-between items-center">
      <div class="card__title">
        <span>{{ props.title }}</span>
        <a-spin v-if="props.loading" size="small" style="margin-left: 4px;" />
        <a-space style="margin-left: 8px">
          <slot name="tool-bar" :reportId="props.dataset.id"></slot>
        </a-space>
      </div>
    </div>
    <div class="card__content">
      <div class="row">
        <span v-if="props.dataset.name">{{ props.dataset.name }}</span>
        <span v-if="gender?.length">{{ gender.join() }}</span>
        <span v-if="props.dataset.age">{{ props.dataset.age }}岁</span>
        <span v-if="womenSpecialPeriod?.length">{{ womenSpecialPeriod.join('，') }}</span>
        <span v-if="job?.length">{{ job.join('，') }}</span>
        <span v-if="props.dataset.phone">手机号：{{ props.dataset.phone }}</span>
        <span v-if="props.dataset.cardno">身份证号：{{ props.dataset.cardno }}</span>
      </div>
      <div class="row">
        <span v-if="props.dataset.height">{{ props.dataset.height }}cm</span>
        <span v-if="props.dataset.weight">{{ props.dataset.weight }}kg</span>
        <span v-if="drinkState?.length">饮酒：{{ drinkState.join('，') }}</span>
        <span v-if="smokeState?.length ">抽烟：{{ smokeState.join('，') }}</span>
        <span v-if="foodAllergy?.length">食物过敏：<a-tag v-for="d in foodAllergy" :key="d">{{ d }}</a-tag></span>
        <span v-if="hobbyFlavor?.length">喜好口味：<a-tag v-for="d in hobbyFlavor" :key="d">{{ d }}</a-tag></span>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
@import "@/themes/report-card";

.patient-card {
  .card__content {
    > div {
      &:nth-of-type(1) {
        > span::after {
          content: "，";
        }
      }

      &:nth-of-type(2) {
        > span::after {
          content: "；";
        }
      }
    }
  }
}
</style>
