<script setup lang="ts">
import type { HealthReportAnalysisCategory } from '@/model/health-report-analysis.config';
import type { HealthReportAnalysisItemVO, HealthReportAnalysisVO } from '@/model/health-report.model';
import type { VxeGridProps } from 'vxe-table';
import type { VxeModalProps } from 'vxe-pc-ui';
import { h } from 'vue';
import { FileImageOutlined } from '@ant-design/icons-vue';

const props = defineProps<{
  category: HealthReportAnalysisCategory;
  analysis: HealthReportAnalysisVO;
}>();
type HealthReportAnalysisItemData = Pick<HealthReportAnalysisItemVO, 'category' | 'subcategory' | 'standardValue'> & HealthReportAnalysisItemVO['values'][number];
const title = computed(() => ({ tongue: '舌象', face: '面象' })[props.category]);
const analysis = computed(() => props.analysis?.[props.category]);

const gridOptions = reactive<VxeGridProps<HealthReportAnalysisItemData>>({
  headerAlign: 'center',
  columns: [
    { field: 'subcategory', title: '维度', align: 'center', width: 120 },
    { field: 'standardValue', title: '标准值', align: 'center', width: 180 },
    { field: 'resultValue', title: '检测结果', align: 'center', width: 180 },
    {
      field: '',
      title: '图片分析',
      width: 180,
      minWidth: 78,
      resizable: true,
      showOverflow: 'ellipsis',
      slots: { default: 'picture-cell' },
    },
    { field: 'feature', title: '特征', resizable: true },
  ],
  mergeCells: [],
  data: [],
  cellStyle({ row, column }) {
    if (column.field === 'resultValue' && row.contrast)
      return {
        color: '#f50',
      };
  },
});

const transform = (data: HealthReportAnalysisItemVO[] = []) => {
  gridOptions.data = [];
  gridOptions.mergeCells = [];
  for (const { category, subcategory, standardValue, values } of data) {
    const length = values.length;
    if (length > 1) {
      const row = gridOptions.data?.length;
      gridOptions.mergeCells?.push(
        { row, col: 0, rowspan: length, colspan: 1 },
        {
          row,
          col: 1,
          rowspan: length,
          colspan: 1,
        }
      );
    }
    for (const item of values) {
      gridOptions.data?.push({ category, subcategory, standardValue, ...item });
    }
  }
};
watchEffect(() => {
  gridOptions.columns![0].title = `${title.value}维度`;
  transform(analysis.value?.analysis);
});

const show = ref(false);
const modalOptions = reactive<VxeModalProps & { data?: HealthReportAnalysisItemData }>({
  position: {},
  mask: false,
  width: 500,
  resize: true,
  minWidth: 300,
});

function open(event: MouseEvent, data: HealthReportAnalysisItemData) {
  console.log(event, data);
  const offset = 32;
  modalOptions.title = data.resultValue;
  modalOptions.position = {
    top: event.pageY - offset,
    left: event.pageX + offset,
  };
  modalOptions.data = data;
  show.value = true;
}
</script>

<template>
  <div v-if="analysis?.result">
    <div class="flex gap-6">
      <a-space direction="vertical" :size="24">
        <div v-for="(item, index) in analysis?.pictures" :key="index" class="size-126px">
          <img class="w-full h-full object-scale-down" :src="item" alt="舌象" />
        </div>
      </a-space>
      <vxe-grid class="flex-auto" v-bind="gridOptions">
        <template #picture-cell="{ row }">
          <a-button v-if="row.cover" :icon="h(FileImageOutlined)" @click="open($event, row)" />
          <a-tag v-for="tag in row.tags" :key="tag" color="#f50" style="margin: 8px 0 0 8px">{{ tag }}</a-tag>
        </template>
      </vxe-grid>
    </div>

    <vxe-modal v-model="show" v-bind="modalOptions">
      <a-descriptions :column="1" bordered size="small" :label-style="{ width: '120px', textAlign: 'center' }">
        <a-descriptions-item>
          <div class="flex flex-row">
            <a-image v-if="modalOptions.data?.cover" :src="modalOptions.data.cover" :width="126" :preview="true" />
            <a-space v-if="modalOptions.data?.tags?.length" direction="vertical">
              <a-tag v-for="v in modalOptions.data?.tags" :key="v" color="#f50" style="margin-left: 8px; margin-right: 0">{{ v }} </a-tag>
            </a-space>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="特征" v-if="modalOptions.data?.feature">{{ modalOptions.data?.feature }} </a-descriptions-item>
        <template v-if="modalOptions.data?.significance">
          <a-descriptions-item v-if="category === 'tongue'" label="临床意义">{{ modalOptions.data?.significance }} </a-descriptions-item>
          <a-descriptions-item v-if="category === 'face'" label="病理意义">{{ modalOptions.data?.significance }} </a-descriptions-item>
        </template>
        <a-descriptions-item label="机理分析" v-if="modalOptions.data?.analysis">{{ modalOptions.data?.analysis }} </a-descriptions-item>
      </a-descriptions>
    </vxe-modal>
  </div>
</template>

<style scoped lang="scss"></style>
