<template>
  <div class="container">
    <!-- 食谱卡片 -->
    <el-card class="recipe-card">
      <img src="../../../assets/images/no_pay.png" alt="待支付" class="pay-status-icon" />
      <!-- 返回按钮和标题 -->
      <div class="card-header">
        <el-button plain @click="goBack" class="back">返回</el-button>
        <span class="title">日常膳食</span>
      </div>

      <!-- 日期和操作栏 -->
      <div class="date-operation-bar">
        <div class="date-picker">
          <span>配餐日期：</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            disabled
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="default"
            class="date-input"
          />
        </div>
        <div class="operation-btns">
          <el-button type="primary" plain size="default">打印</el-button>
          <el-button type="success" plain size="default" @click="quoteMealPlan">引用处方</el-button>
          <el-button type="danger" plain size="default" @click="deleteMealPlan">作废</el-button>
        </div>
      </div>

      <!-- 食谱标题区域 -->
      <div class="recipe-header">
        <div class="recipe-title-wrapper">
          <div class="recipe-buttons">
            <el-button
              v-for="(recipe, index) in allRecipesData"
              :key="index"
              :type="currentRecipeIndex === index ? 'success' : 'default'"
              plain
              class="recipe-btn"
              @click="switchToRecipe(index)"
            >
              食谱{{ index + 1 }}
            </el-button>
          </div>
          <span class="recipe-tip">周食谱模板的食谱数量小于7时，食谱可循环使用</span>
        </div>
      </div>

      <!-- 营养警告 -->
      <div class="nutrition-warning">
        <el-alert
          :title="'当前处方中的热量、蛋白质、脂肪、碳水化合物、钙、铁、维生素A、维生素B2、维生素C、维生素E元素可能过量'"
          type="warning"
          show-icon
          :closable="false"
        />
      </div>

      <!-- 食谱表格 -->
      <div class="table-wrapper">
        <table style="text-align: center" class="recipe-table">
          <thead>
            <tr>
              <th>餐次</th>
              <th>用餐时间</th>
              <th>食谱名称</th>
              <th>食谱分类</th>
              <th>份数</th>
              <th>食材重量</th>
              <th>热量</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(meal, mealIndex) in tableData" :key="mealIndex">
              <tr v-for="(recipe, recipeIndex) in meal.recipes" :key="recipeIndex" :class="{'row-even': recipeIndex % 2 === 1}">
                <td v-if="recipeIndex === 0" :rowspan="meal.recipes.length" class="text-center">{{ meal.meal }}</td>
                <td v-if="recipeIndex === 0" :rowspan="meal.recipes.length" class="text-center">{{ meal.time }}</td>
                <td>{{ recipe.name }}</td>
                <td>{{ recipe.category }}</td>
                <td class="text-center">{{ recipe.count }}</td>
                <td class="text-center">{{ recipe.weight }}</td>
                <td class="text-center">{{ recipe.calorie }}</td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </el-card>

    <!-- 营养分析卡片 -->
    <el-card v-if="false" class="analysis-card">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="三大营养分析" name="nutrition">
          <div class="nutrition-header">
            <div class="nutrition-target">
              营养设定：<span>{{ nutritionTarget }}kcal/d</span>
            </div>
            <div class="nutrition-actual">
              实际热量：<span>{{ actualCalories }}kcal/d</span>
            </div>
          </div>
          <div class="nutrition-content">
            <!-- 左侧表格 -->
            <div class="table-section">
              <table class="nutrition-table">
                <thead>
                  <tr>
                    <th>三大营养素</th>
                    <th>质量(g)</th>
                    <th>热量占比</th>
                    <th>参考值</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in nutritionData" :key="item.name">
                    <td>{{ item.name }}</td>
                    <td>{{ item.weight }}</td>
                    <td>{{ item.ratio }}%</td>
                    <td>{{ item.reference }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- 右侧图表 -->
            <div class="chart-section">
              <div class="chart-title">三大营养素元素质量占比</div>
              <div ref="chartRef" class="chart-container"></div>
              <div class="chart-legend">
                <div class="legend-item">
                  <span class="color-dot protein"></span>
                  <span>蛋白质 26.14%</span>
                </div>
                <div class="legend-item">
                  <span class="color-dot fat"></span>
                  <span>脂肪 11.64%</span>
                </div>
                <div class="legend-item">
                  <span class="color-dot carbs"></span>
                  <span>碳水化合物 62.02%</span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="营养数据分析" name="data">
          <div style="text-align: center" class="table-wrapper">
            <table class="nutrition-analysis-table">
              <thead>
                <tr>
                  <th rowspan="2">元素类型</th>
                  <th rowspan="2">元素名称</th>
                  <th rowspan="2">单位</th>
                  <th colspan="2">膳食营养含量/天</th>
                  <th rowspan="2">肠外营养含量/天</th>
                  <th rowspan="2">肠内营养含量/天</th>
                  <th rowspan="2">营养设定</th>
                </tr>
                <tr>
                  <th>当前处方</th>
                  <th>历史处方</th>
                </tr>
              </thead>
              <tbody>
                <template v-for="group in groupedNutritionData" :key="group.type">
                  <template v-for="(item, itemIndex) in group.items" :key="item.name">
                    <tr>
                      <td v-if="itemIndex === 0" :rowspan="group.items.length" class="type-cell">{{ group.type }}</td>
                      <td class="name-cell">{{ item.name }}</td>
                      <td class="unit-cell">{{ item.unit }}</td>
                      <td :class="{highlight: item.current > item.target}">{{ item.current }}</td>
                      <td>{{ item.history || '--' }}</td>
                      <td>{{ item.external || '--' }}</td>
                      <td>{{ item.internal || '--' }}</td>
                      <td>{{ item.target }}</td>
                    </tr>
                  </template>
                </template>
              </tbody>
            </table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, computed, watch} from 'vue';
import * as echarts from 'echarts';
import {ArrowLeft} from '@element-plus/icons-vue';
const emit = defineEmits(['change', 'del', 'add']);

import {getMealPlan} from '@/api/patients/dailyMealPlan';
import {MealPlanVO, MealPlanQuery, MealPlanForm} from '@/api/patients/dailyMealPlan/types';

interface NutritionItem {
  type: string;
  name: string;
  unit: string;
  current: string;
  history: string;
  external: string; // 肠外营养含量
  internal: string; // 肠内营养含量
  target: string;
}
// 表格数据
const tableData = ref([]);
const activeTab = ref('nutrition');
const mealPlanVo = ref();
const dateRange = ref(['2025-07-16', '2025-07-16']);
const currentRecipeIndex = ref(0); // 当前显示的食谱索引
const allRecipesData = ref([]); // 存储所有食谱数据

// 切换食谱
const switchRecipe = (direction: number) => {
  const newIndex = currentRecipeIndex.value + direction;
  if (newIndex >= 0 && newIndex < allRecipesData.value.length) {
    currentRecipeIndex.value = newIndex;
    tableData.value = allRecipesData.value[currentRecipeIndex.value] || [];
  }
};

// 直接切换到指定食谱
const switchToRecipe = (index: number) => {
  if (index >= 0 && index < allRecipesData.value.length) {
    currentRecipeIndex.value = index;
    tableData.value = allRecipesData.value[currentRecipeIndex.value] || [];
  }
};

// 营养数据
const nutritionData = ref([
  {name: '蛋白质', weight: '71.4860', ratio: '23.74', reference: '10% - 15%'},
  {name: '脂肪', weight: '32.3765', ratio: '24.19', reference: '20% - 30%'},
  {name: '碳水化合物', weight: '169.6211', ratio: '56.32', reference: '50% - 65%'}
]);

// 图表引用
const chartRef = ref<HTMLElement | null>(null);
// 声明接收的 props
const props = defineProps({
  infoId: {
    type: [Number, String],
    required: true
  }
});
// 修改图表配置
const initChart = () => {
  if (!chartRef.value) return;

  const chart = echarts.init(chartRef.value);
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}%'
    },
    legend: {
      show: false
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        emphasis: {
          scale: false,
          scaleSize: 0
        },
        data: [
          {
            value: 26.14,
            name: '蛋白质',
            itemStyle: {
              color: '#36cfc9',
              borderWidth: 0
            }
          },
          {
            value: 11.64,
            name: '脂肪',
            itemStyle: {
              color: '#ffd666',
              borderWidth: 0
            }
          },
          {
            value: 62.02,
            name: '碳水化合物',
            itemStyle: {
              color: '#85a5ff',
              borderWidth: 0
            }
          }
        ]
      }
    ]
  };

  chart.setOption(option);

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    chart.resize();
  });
};

// 返回上一页
const goBack = async () => {
  emit('change', 'dailyIndex');
};

// 添加响应式数据
const nutritionTarget = ref('1035.35');
const actualCalories = ref('1204.60');

// 按元素类型分组的数据
const groupedNutritionData = computed(() => {
  const groups: {
    [key: string]: any[];
  } = {};
  nutritionAnalysisData.forEach((item) => {
    if (!groups[item.type]) {
      groups[item.type] = [];
    }
    groups[item.type].push(item);
  });
  return Object.entries(groups).map(([type, items]) => ({
    type,
    items
  }));
});

// 营养数据分析数据
const nutritionAnalysisData: NutritionItem[] = [
  {
    type: '热能及三大营养素',
    name: '热量',
    unit: 'kcal',
    current: '1204.5965',
    history: '--',
    external: '--',
    internal: '--',
    target: '1035.35'
  },
  {
    type: '热能及三大营养素',
    name: '蛋白质',
    unit: 'g',
    current: '71.486',
    history: '--',
    external: '--',
    internal: '--',
    target: '50'
  },
  {
    type: '热能及三大营养素',
    name: '脂肪',
    unit: 'g',
    current: '32.3765',
    history: '--',
    external: '--',
    internal: '--',
    target: '23.01'
  },
  {
    type: '热能及三大营养素',
    name: '碳水化合物',
    unit: 'g',
    current: '169.6211',
    history: '--',
    external: '--',
    internal: '--',
    target: '129.42'
  },
  {
    type: '热能及三大营养素',
    name: '热能-kilojoules',
    unit: 'kj',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '4331.9'
  },
  {
    type: '常量元素',
    name: '钠',
    unit: 'mg',
    current: '1026.8556',
    history: '--',
    external: '--',
    internal: '--',
    target: '1500'
  },
  {
    type: '常量元素',
    name: '磷',
    unit: 'mg',
    current: '331.8685',
    history: '--',
    external: '--',
    internal: '--',
    target: '720'
  },
  {
    type: '常量元素',
    name: '钙',
    unit: 'mg',
    current: '862.651',
    history: '--',
    external: '--',
    internal: '--',
    target: '800'
  },
  {
    type: '常量元素',
    name: '钾',
    unit: 'mg',
    current: '439.089',
    history: '--',
    external: '--',
    internal: '--',
    target: '2000'
  },
  {
    type: '常量元素',
    name: '镁',
    unit: 'mg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '530'
  },
  {
    type: '常量元素',
    name: '氯',
    unit: 'mg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '2300'
  },
  {
    type: '微量元素',
    name: '铁',
    unit: 'mg',
    current: '20.6671',
    history: '--',
    external: '--',
    internal: '--',
    target: '20'
  },
  {
    type: '微量元素',
    name: '锌',
    unit: 'mg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '7.5'
  },
  {
    type: '微量元素',
    name: '硒',
    unit: 'μg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '60'
  },
  {
    type: '微量元素',
    name: '铜',
    unit: 'mg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '0.8'
  },
  {
    type: '微量元素',
    name: '锰',
    unit: 'mg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '4.5'
  },
  {
    type: '微量元素',
    name: '碘',
    unit: 'μg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '120'
  },
  {
    type: '微量元素',
    name: '氟',
    unit: 'mg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '1.5'
  },
  {
    type: '微量元素',
    name: '铬',
    unit: 'μg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '30'
  },
  {
    type: '维生素',
    name: '维生素B2',
    unit: 'mg',
    current: '1.9407',
    history: '--',
    external: '--',
    internal: '--',
    target: '1.2'
  },
  {
    type: '维生素',
    name: '维生素C',
    unit: 'mg',
    current: '166.742',
    history: '--',
    external: '--',
    internal: '--',
    target: '100'
  },
  {
    type: '维生素',
    name: '维生素B1',
    unit: 'mg',
    current: '1.1105',
    history: '--',
    external: '--',
    internal: '--',
    target: '1.2'
  },
  {
    type: '维生素',
    name: '烟酸',
    unit: 'mg',
    current: '10.396',
    history: '--',
    external: '--',
    internal: '--',
    target: '12'
  },
  {
    type: '维生素',
    name: '维生素E',
    unit: 'mg',
    current: '20.4819',
    history: '--',
    external: '--',
    internal: '--',
    target: '14'
  },
  {
    type: '维生素',
    name: '维生素D',
    unit: 'μg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '10'
  },
  {
    type: '维生素',
    name: '维生素K',
    unit: 'μg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '80'
  },
  {
    type: '维生素',
    name: '维生素B6',
    unit: 'mg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '1.4'
  },
  {
    type: '维生素',
    name: '维生素B12',
    unit: 'μg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '2.4'
  },
  {
    type: '维生素',
    name: '叶酸',
    unit: 'μgDFE',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '400'
  },
  {
    type: '维生素',
    name: '胆碱',
    unit: 'mg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '400'
  },
  {
    type: '维生素',
    name: '生物素',
    unit: 'μg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '40'
  },
  {
    type: '维生素',
    name: '泛醇',
    unit: 'mg',
    current: '0',
    history: '--',
    external: '--',
    internal: '--',
    target: '5'
  },
  {
    type: '脂类',
    name: '胆固醇',
    unit: 'g',
    current: '0.6345',
    history: '--',
    external: '--',
    internal: '--',
    target: '--'
  },
  {
    type: '其他',
    name: '水分',
    unit: 'ml',
    current: '1147.0572',
    history: '--',
    external: '--',
    internal: '--',
    target: '--'
  },
  {
    type: '其他',
    name: '膳食纤维',
    unit: 'g',
    current: '10.7333',
    history: '--',
    external: '--',
    internal: '--',
    target: '25'
  }
];

/** 查询日常膳食主列表 */
const getDetail = async () => {
  if (props.infoId && (typeof props.infoId === 'number' || typeof props.infoId === 'string')) {
    try {
      const res = await getMealPlan(props.infoId);

      if (res.code === 200 && res.data) {
        const data = res.data as any;
        mealPlanVo.value = res.data;
        // 更新日期范围
        if (data.recommendStartDate && data.recommendEndDate) {
          dateRange.value = [data.recommendStartDate, data.recommendEndDate];
        }

        // 更新表格数据
        if (data.mealRecipeList && data.mealRecipeList.length > 0) {
          // 按食谱编号分组数据
          const recipeGroups = {};

          data.mealRecipeList.forEach((recipe) => {
            const recipeNo = recipe.recipeNo;
            if (!recipeGroups[recipeNo]) {
              recipeGroups[recipeNo] = [];
            }

            // 按餐次分组
            const mealTime = recipe.mealTime;
            let mealGroup = recipeGroups[recipeNo].find((group) => group.meal === mealTime);

            if (!mealGroup) {
              mealGroup = {
                meal: mealTime,
                time: recipe.eatTime ? recipe.eatTime.split(' ')[1] : '08:00',
                recipes: []
              };
              recipeGroups[recipeNo].push(mealGroup);
            }

            mealGroup.recipes.push({
              name: recipe.foodName,
              category: recipe.foodCategoryName,
              count: recipe.amount,
              weight: recipe.foodWeight ? recipe.foodWeight.toString() : '0',
              calorie: recipe.calorie ? recipe.calorie.toString() : '0'
            });
          });

          // 存储所有食谱数据
          allRecipesData.value = Object.values(recipeGroups) as any[];
          // 设置当前显示的食谱
          tableData.value = allRecipesData.value[currentRecipeIndex.value] || [];

          // 如果有多个食谱，可以在这里添加食谱切换功能
        }
      }
    } catch (error) {
      console.error('获取详情失败:', error);
    }
  }
};

const quoteMealPlan = async () => {
  emit('add', 'dailyDetail', mealPlanVo.value);
};

const deleteMealPlan = async () => {
  emit('del', 'dailyDetail', props.infoId);
};

// 监听 infoId 变化，当有值时执行 getDetail
watch(
  () => props.infoId,
  (newVal) => {
    if (newVal) {
      getDetail();
    }
  }
);

onMounted(() => {
  initChart();
  // 如果 onMounted 时已经有 infoId，也执行一次
  if (props.infoId) {
    getDetail();
  }
});
</script>

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

.recipe-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 16px;
  position: relative;
  width: 89vw;

  .pay-status-icon {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 100px;
    /* 调整为更合适的大小 */
    height: 100px;
    transform: rotate(10deg);
    /* 添加轻微旋转以匹配设计 */
    z-index: 1;
  }

  .card-header {
    margin-bottom: 20px;

    .back {
      margin-right: 20px;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 12px;

      .back-btn {
        border-radius: 4px;
        padding: 8px 16px;
      }

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
      }
    }
  }

  .date-operation-bar {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 16px;

    .date-picker {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #606266;
      margin-right: 20px;

      .date-input {
        width: 240px;
      }
    }

    .operation-btns {
      display: flex;
      gap: 12px;
    }
  }

  .recipe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .recipe-title-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 12px;

      .recipe-buttons {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;

        .recipe-btn {
          font-size: 14px;
          padding: 8px 16px;
          min-width: 80px;
          transition: all 0.3s;

          &:hover {
            transform: translateY(-1px);
          }
        }
      }

      .recipe-tip {
        color: #ff9900;
        font-size: 14px;
      }
    }
  }

  .nutrition-warning {
    margin-bottom: 16px;

    :deep(.el-alert) {
      background: #fff9ed;
      border: 1px solid #faecd8;
      padding: 8px 16px;

      .el-alert__icon {
        font-size: 16px;
        color: #e6a23c;
      }

      .el-alert__title {
        font-size: 14px;
        color: #e6a23c;
      }
    }
  }

  .recipe-table {
    margin-bottom: 16px;

    :deep(.el-table) {
      &::before {
        display: none;
      }

      .el-table__header {
        th {
          background-color: #f5f7fa;
          color: #606266;
          font-weight: 500;
          padding: 8px 0;
        }
      }

      .el-table__body {
        td {
          padding: 8px;
        }
      }

      .cell {
        color: #606266;
      }
    }
  }
}

.nutrition-analysis {
  background: #fff;
  border-radius: 8px;
  padding: 20px;

  .nutrition-content {
    .nutrition-header {
      display: flex;
      gap: 24px;
      margin-bottom: 20px;

      .nutrition-target,
      .nutrition-actual {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #606266;

        .value {
          color: #409eff;
          font-weight: 600;
        }
      }
    }
  }

  .chart-container {
    text-align: center;
    padding: 20px;

    .chart-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 20px;
    }

    .chart-content {
      height: 300px;
      margin-bottom: 20px;
    }

    .chart-legend {
      display: flex;
      justify-content: center;
      gap: 24px;

      .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #606266;
        font-size: 14px;

        .color-block {
          width: 12px;
          height: 12px;
          border-radius: 2px;

          &.protein {
            background-color: #36cfc9;
          }

          &.fat {
            background-color: #ffa940;
          }

          &.carbs {
            background-color: #2f54eb;
          }
        }
      }
    }
  }
}

:deep(.el-table) {
  .el-table__header {
    th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 500;
    }
  }

  .cell {
    white-space: pre-line;
  }
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 16px;
}

.recipe-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ebeef5;

  th,
  td {
    border: 1px solid #ebeef5;
    padding: 12px 8px;
    font-size: 14px;
    line-height: 1.5;
  }

  th {
    background-color: #e8f4ff;
    color: #333;
    font-weight: normal;
    text-align: center;
  }

  td {
    background-color: #fff;
    color: #606266;
  }

  .text-center {
    text-align: center;
  }

  tbody {
    tr {
      &.row-even {
        td {
          background-color: #f5f7fa;
        }
      }

      &:hover td {
        background-color: #f5f7fa;
      }
    }
  }
}

// 设置列宽
.recipe-table {
  th,
  td {
    &:nth-child(1) {
      width: 80px;
    }

    // 餐次
    &:nth-child(2) {
      width: 120px;
    }

    // 用餐时间
    &:nth-child(3) {
      min-width: 180px;
    }

    // 食谱名称
    &:nth-child(4) {
      width: 160px;
    }

    // 食谱分类
    &:nth-child(5) {
      width: 80px;
    }

    // 份数
    &:nth-child(6) {
      width: 120px;
    }

    // 食材重量
    &:nth-child(7) {
      width: 120px;
    }

    // 热量
    &:nth-child(7) {
      width: 100px;
    }
  }
}

.analysis-card {
  margin-top: 16px;

  .nutrition-header {
    display: flex;
    gap: 32px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #606266;

    span {
      color: #409eff;
      margin-left: 4px;
    }
  }

  .nutrition-content {
    display: flex;
    gap: 24px;
  }

  .table-section {
    flex: 1;
    min-width: 0;
  }

  .nutrition-table {
    width: 100%;
    border-collapse: collapse;

    th,
    td {
      padding: 12px;
      text-align: left;
      border: 1px solid #ebeef5;
      font-size: 14px;
    }

    th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: normal;
    }

    td {
      background: #fff;
      color: #606266;
    }
  }

  .chart-section {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .chart-title {
    font-size: 14px;
    color: #303133;
    margin-bottom: 16px;
    text-align: center;
  }

  .chart-container {
    width: 100%;
    height: 220px;
  }

  .chart-legend {
    margin-top: 16px;
    display: flex;
    gap: 16px;
    justify-content: center;

    .legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #606266;
    }

    .color-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;

      &.protein {
        background-color: #36cfc9;
      }

      &.fat {
        background-color: #ffd666;
      }

      &.carbs {
        background-color: #85a5ff;
      }
    }
  }
}

.nutrition-analysis-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;

  thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #fff;

    th {
      background-color: #e8f4ff;
      border: 1px solid #ebeef5;
      padding: 12px 8px;
      font-size: 14px;
      line-height: 1.5;
      text-align: center;
      vertical-align: middle;
      color: #606266;
      font-weight: normal;
      height: 44px;
      white-space: nowrap;
    }
  }

  td {
    padding: 12px 8px;
    border: 1px solid #ebeef5;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    color: #606266;
    height: 44px;
    white-space: nowrap;
    background-color: #fff; // 内容单元格统一使用白色背景

    &.highlight {
      color: #ff4d4f; // 保持高亮数字的红色
    }

    &.type-cell {
      text-align: center;
      background-color: #fff; // 类型单元格也使用白色背景
      display: table-cell;
    }
  }

  tbody {
    tr {
      background-color: #fff; // 所有行使用白色背景
    }
  }
}

.table-wrapper {
  height: 500px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background: #f5f7fa;
  }

  table {
    width: 100%;
    border-collapse: collapse;

    thead {
      position: sticky;
      top: 0;
      z-index: 1;
      background-color: #e8f4ff;

      th {
        background-color: #e8f4ff;
        border: 1px solid #ebeef5;
        padding: 12px 8px;
        font-size: 14px;
        line-height: 1.5;
        text-align: center;
        vertical-align: middle;
        color: #606266;
        font-weight: normal;
        height: 44px;
        white-space: nowrap;
      }
    }

    tbody {
      td {
        border: 1px solid #ebeef5;
        padding: 12px 8px;
        font-size: 14px;
        line-height: 1.5;
        text-align: center;
        vertical-align: middle;
        color: #606266;
        height: 44px;
        white-space: nowrap;
        background-color: #fff;

        &.highlight {
          color: #ff4d4f;
        }

        &.type-cell {
          text-align: center;
          background-color: #fff;
          display: table-cell;
        }
      }

      tr {
        background-color: #fff;
      }
    }
  }
}
</style>
