<script setup lang="ts">
import { useWatcher } from 'alova/client';
import { getTonguefaceAnalysisReportMethod } from '@/request/api/report.api';
import type { DeviceReportModel } from '@/model/device.model';
import HealthReportAnalysisWidget from '@/widgets/HealthReportAnalysisWidget.vue';

const props = defineProps<{
  report: Partial<DeviceReportModel>;
}>();


// 患者最后一次健康分析报告
const { data: healthRecord } = useWatcher(() => getTonguefaceAnalysisReportMethod(props?.report?.tonguefaceAnalysisReportId?.toString()!), [() => props.report.tonguefaceAnalysisReportId], {
  initialData: {},
  immediate: true,
  middleware: (_, next) => {
    console.log(healthRecord, 'props?.report?.tonguefaceAnalysisReportId');
    if (props?.report?.tonguefaceAnalysisReportId) next();
  },
});

// 判断是否有数据
const hasData = computed(() => {
  return props?.report?.tonguefaceAnalysisReportId && 
         healthRecord.value && 
         Object.keys(healthRecord.value).length > 0 &&
         healthRecord.value?.analysis;
});
</script>

<template>
  <div class="p-6">
    <!-- 有数据时显示分析组件 -->
    <template v-if="hasData">
      <HealthReportAnalysisWidget class="row" category="tongue" :analysis="healthRecord?.analysis"></HealthReportAnalysisWidget>
      <HealthReportAnalysisWidget class="row" category="face" :analysis="healthRecord?.analysis"></HealthReportAnalysisWidget>
    </template>
    
    <!-- 无数据时显示暂无数据提示 -->
    <template v-else>
      <div class="no-data-container">
        <div class="no-data-content">
          <div class="no-data-icon">📊</div>
          <div class="no-data-text">暂无数据</div>
          <div class="no-data-desc">当前没有舌面分析报告数据</div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
section {
  color: rgba(0, 0, 0, 0.85);

  > header {
    font-size: 18px;
    font-weight: 700;

    :deep(.ant-btn-link) {
      padding-block: 0;
      font-size: 18px;
      border: none;
    }
  }

  > main {
    margin-left: 18px * 4;
    padding: 0 15px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);

    > .row > .ant-space {
      font-size: 16px;
    }

    .row {
      padding: 12px 0;

      span > label {
        color: rgba(0, 0, 0, 0.45);
      }

      label::after {
        margin-left: 2px;
        margin-right: 8px;
        content: ':';
      }

      > header::before {
        $size: 10px;
        content: '';
        display: inline-block;
        margin-right: 12px;
        width: $size;
        height: $size;
        border: 2px solid #1d6ff6;
        border-radius: 50%;
      }

      > main {
        margin-left: 18px * 2;
      }
    }
  }

  .ant-tag {
    margin-top: 6px;
  }
}

.separate {
  :deep(.ant-space-item) {
    & + .ant-space-item::before {
      content: '，';
      margin-right: 2px;
    }
  }

  span + span::before {
    content: '，';
    margin-right: 2px;
  }
}

.panel-wrapper {
  :deep(.ant-tabs-content-holder) {
    padding-top: 12px;
    height: calc(100vh - 60px - 24px - 32px);

    .ant-tabs-content {
      height: 100%;
    }
  }
}

.trend-up {
  color: #ff4d4f;
  border-color: #ff4d4f;
}

.trend-down {
  color: #87d068;
  border-color: #87d068;
}

// 暂无数据样式
.no-data-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  width: 100%;
}

.no-data-content {
  text-align: center;
  color: #999;
  
  .no-data-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
  }
  
  .no-data-text {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #666;
  }
  
  .no-data-desc {
    font-size: 14px;
    color: #999;
  }
}
</style>
