<script setup lang="ts">
import type { ReportModel }                           from '@/model';
import ReportAnalysisWidgetFace                       from '@/widgets/ReportAnalysisWidgetFace.vue';
import ReportAnalysisWidgetTongue                     from '@/widgets/ReportAnalysisWidgetTongue.vue';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
import { h }                                          from 'vue';


const props = withDefaults(defineProps<{
  dataset: ReportModel;
  loading?: boolean;
  title?: string;
}>(), {
  title: '症状信息',
});
const container = ref<HTMLDivElement | null>(null);
const collapsed = defineModel('collapsed', { required: false, default: false });
const collapse = (value: boolean) => {
  collapsed.value = value;
  container.value?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
};
</script>
<template>
  <div ref="container" class="card card__report-analysis">
    <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">
          <a-tooltip :title="collapsed ? '展开' : '收起'">
            <a-button
              shape="circle" size="small" :icon="collapsed ? h(FullscreenOutlined) : h(FullscreenExitOutlined)"
              @click="collapse(!collapsed)"
            />
          </a-tooltip>
        </a-space>
        <a-space style="margin-left: 8px">
          <slot name="tool-bar" :reportId="props.dataset.id"></slot>
        </a-space>
      </div>
    </div>
    <div class="card__content">
      <a-space direction="vertical">
        <a-card class="card no-bordered" size="small" style="background-color: #f7f7f7">
          <a-descriptions :column="1">
            <a-descriptions-item v-if="props.dataset.pickedSymptom" label="症状信息">
              {{ props.dataset.pickedSymptom }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.dataset.algorithmInferSymptom" label="联想症状">
              {{ props.dataset.algorithmInferSymptom }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
        <template v-if="!collapsed">
          <a-space class="flex items-start">
            <ReportAnalysisWidgetTongue style="flex: 1 1 60%" v-bind="props" title="舌象分析" />
            <ReportAnalysisWidgetFace style="flex: 1 1 40%" v-bind="props" title="面象分析" />
          </a-space>
        </template>
      </a-space>
    </div>
  </div>
</template>
<style scoped lang="scss">
@import "@/themes/report-card";
</style>
