<template>
  <div class="container">
    <div class="main-content">
      <!-- 左侧卡片 -->
      <LeftCard @gotoTop="goHistoryPrescription" :patientInfo="patientInfo"
        @nutritionProductsChange="handleNutritionProductsChange" />
      <!-- 右侧卡片 -->
      <RightCard :nutritionProducts="currentNutritionProducts" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import LeftCard from './components/LeftCard.vue';
import RightCard from './components/RightCard.vue';

const { patientInfo } = defineProps<{ patientInfo: any }>();
// 解决bug核心
const emit = defineEmits(['change']);

// 当前营养产品列表
const currentNutritionProducts = ref<Array<{
  name: string,
  productCode: string,
  type: string,
  protein?: number,
  fat?: number,
  carbohydrate?: number,
  calorie?: number,
  dosePerTime?: number,
  quantity?: number
}>>([]);

const goHistoryPrescription = () => {
  emit('change', 'enteralNutritionHistory');
};

// 处理营养产品变化
const handleNutritionProductsChange = (products: Array<{
  name: string,
  productCode: string,
  type: string,
  protein?: number,
  fat?: number,
  carbohydrate?: number,
  calorie?: number,
  dosePerTime?: number,
  quantity?: number
}>) => {
  currentNutritionProducts.value = products;
  console.log('父组件接收到营养产品变化:', products);
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
}

.main-content {
  display: flex;
  gap: 20px;
  min-height: calc(100vh - 40px);
}
</style>
