<template>
  <el-card class="right-card">
    <!-- 顶部操作按钮 -->
    <div class="operation-buttons">
      <div class="left-buttons">
        <el-button plain @click="goBack">返回</el-button>
        <el-button plain>打印</el-button>
        <el-button type="success" plain>引用处方</el-button>
        <el-button type="danger" plain>处方作废</el-button>
      </div>
      <div class="pay-status">
        <img src="@/assets/images/pay.png" alt="待支付" />
      </div>
    </div>

    <!-- 停嘱日期 -->
    <div class="stop-date">
      <span class="label">停嘱日期：</span>
      <span class="value">2025-07-24</span>
    </div>

    <!-- 处方表格 -->
    <div class="prescription-tables">
      <!-- 营养产品表格 -->
      <el-table :data="productData" border>
        <el-table-column type="index" label="组号" width="60" align="center" />
        <el-table-column label="营养产品" min-width="180" prop="product" />
        <el-table-column label="用量/次" width="100" align="center">
          <template #default="{row}">
            <span>{{ row.dosage }}g</span>
          </template>
        </el-table-column>
        <el-table-column label="餐次时间" width="180" align="center" prop="mealTime" />
        <el-table-column label="频次" width="100" align="center">
          <template #default>一天3次</template>
        </el-table-column>
        <el-table-column label="首日" width="80" align="center">
          <template #default="{row}">
            <span>{{ row.firstDay }}次</span>
          </template>
        </el-table-column>
        <el-table-column label="用量/日" width="100" align="center">
          <template #default="{row}">
            <span>{{ row.dailyDosage }}g</span>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="140" align="center">
          <template #default="{row}">
            <span>{{ row.specification }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用法" width="80" align="center" prop="usage" />
        <el-table-column label="制剂液量/次" width="120" align="center">
          <template #default="{row}">
            <span>{{ row.liquidVolume }}ml</span>
          </template>
        </el-table-column>
        <el-table-column label="制剂浓度/次" width="120" align="center">
          <template #default="{row}">
            <span>{{ row.concentration }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="能量密度/次" width="140" align="center">
          <template #default="{row}">
            <span>{{ row.energyDensity }}kcal/ml</span>
          </template>
        </el-table-column>
        <el-table-column label="处方备注" min-width="150" prop="note" />
        <el-table-column label="每日热量" width="100" align="center">
          <template #default="{row}">
            <span>{{ row.dailyCalories }}</span>
          </template>
        </el-table-column>
        <el-table-column label="金额" width="100" align="right">
          <template #default="{row}">
            <span>{{ row.amount }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 耗材表格 -->
      <el-table :data="materialData" border>
        <el-table-column type="index" label="组号" width="60" align="center" />
        <el-table-column label="耗材" min-width="200" />
        <el-table-column label="规格" width="120" align="center" />
        <el-table-column label="用量/次" width="100" align="center">
          <template #default="{row}">
            <span>{{ row.dosage }}袋</span>
          </template>
        </el-table-column>
        <el-table-column label="频次" width="100" align="center">
          <template #default>一天3次</template>
        </el-table-column>
        <el-table-column label="用量/日" width="100" align="center">
          <template #default="{row}">
            <span>{{ row.dailyDosage }}袋</span>
          </template>
        </el-table-column>
        <el-table-column label="首日" width="80" align="center">
          <template #default="{row}">
            <span>{{ row.firstDay }}次</span>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="80" align="center">
          <template #default="{row}">
            <span>{{ row.quantity }}袋</span>
          </template>
        </el-table-column>
        <el-table-column label="处方备注" min-width="150" />
        <el-table-column label="金额" width="100" align="right">
          <template #default="{row}">
            <span>{{ row.amount }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 费用统计 -->
      <div class="table-cost">
        <div class="cost-item">处方费用：￥15.25</div>
        <div class="cost-item">营养配置费：￥5</div>
        <div class="cost-item total">总计：￥20.25</div>
      </div>
    </div>

    <!-- 分析区域 -->
    <el-tabs v-model="activeTab" class="analysis-tabs">
      <el-tab-pane label="三大营养素分析" name="nutrition">
        <div class="analysis-content">
          <div class="analysis-data">
            <div class="data-item">
              <span class="label">营养设定：</span>
              <span class="value">897.3kcal/d</span>
            </div>
            <div class="data-item">
              <span class="label">实际热量：</span>
              <span class="value">12.3000kcal/d</span>
            </div>
          </div>
          <div class="analysis-detail">
            <!-- 左侧表格 -->
            <div class="table-container">
              <el-table :data="nutritionData" border>
                <el-table-column label="三大营养素" prop="name" width="120" />
                <el-table-column label="质量 (g)" prop="mass" width="120" align="center" />
                <el-table-column label="热量占比" prop="ratio" width="120" align="center" />
                <el-table-column label="参考值" prop="reference" min-width="120" align="center" />
              </el-table>
              <div class="extra-info">
                <div class="info-item">
                  <span class="label">氮含量：</span>
                  <span class="value">0.1166 g/天</span>
                </div>
                <div class="info-item">
                  <span class="label">热氮比：</span>
                  <span class="value">12.3 : 0.1166</span>
                </div>
              </div>
            </div>
            <!-- 右侧饼图 -->
            <div class="chart-container">
              <div class="chart-title">三大营养素元素质量占比</div>
              <div class="pie-chart" ref="pieChart"></div>
              <div class="chart-legend">
                <div class="legend-item">
                  <span class="color-block" style="background: #36cfc9"></span>
                  <span class="text">蛋白质 30.41%</span>
                </div>
                <div class="legend-item">
                  <span class="color-block" style="background: #ffd666"></span>
                  <span class="text">脂肪 16.27%</span>
                </div>
                <div class="legend-item">
                  <span class="color-block" style="background: #2f54eb"></span>
                  <span class="text">碳水化合物 53.32%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="营养数据分析" name="data">
        <el-table :data="nutritionAnalysisData" border>
          <el-table-column label="元素类型" prop="type" width="120" align="center" />
          <el-table-column label="元素名称" prop="name" width="120" align="center" />
          <el-table-column label="单位" prop="unit" width="80" align="center" />
          <el-table-column label="肠内营养含量/天" align="center">
            <el-table-column label="当前处方" prop="current" width="120" align="center" />
            <el-table-column label="历史处方" prop="history" width="120" align="center" />
          </el-table-column>
          <el-table-column label="肠外营养含量/天" prop="parenteral" width="140" align="center" />
          <el-table-column label="膳食营养含量/天" prop="dietary" width="140" align="center" />
          <el-table-column label="营养设定" prop="target" width="120" align="center" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue';
import * as echarts from 'echarts';

const activeTab = ref('nutrition');
const pieChart = ref(null);

// 营养产品数据
const productData = ref([
  {
    product: '孕妇营养包（1-12月）',
    dosage: '1.0000',
    mealTime: '08:00,12:00,18:00',
    firstDay: 2,
    dailyDosage: '3.0000',
    specification: '840.0000g/袋',
    usage: '口服',
    liquidVolume: '100.0000',
    concentration: '0.9900',
    energyDensity: '0.0410',
    note: '--',
    dailyCalories: '12.3000',
    amount: '5.25'
  }
]);

// 耗材数据
const materialData = ref([
  {
    material: '肠内营养空白合剂',
    specification: '3g/袋',
    dosage: '1.0000',
    dailyDosage: '3.000',
    firstDay: 2,
    quantity: '5.0000',
    amount: '10.00'
  }
]);

// 营养素分析数据
const nutritionData = ref([
  {
    name: '蛋白质',
    mass: '0.729',
    ratio: '23.71%',
    reference: '10% - 15%'
  },
  {
    name: '脂肪',
    mass: '0.39',
    ratio: '28.54%',
    reference: '20% - 30%'
  },
  {
    name: '碳水化合物',
    mass: '1.278',
    ratio: '41.56%',
    reference: '50% - 65%'
  }
]);

// 营养数据分析数据
const nutritionAnalysisData = ref([
  {
    type: '热能及三大营养素',
    name: '热量',
    unit: 'kcal',
    current: '12.3',
    history: '12.3',
    parenteral: '--',
    dietary: '--',
    target: '897.3'
  },
  {
    type: '热能及三大营养素',
    name: '热能',
    unit: 'kj',
    current: '51.45',
    history: '51.45',
    parenteral: '--',
    dietary: '--',
    target: '3754.3'
  },
  {
    type: '热能及三大营养素',
    name: '碳水化合物',
    unit: 'g',
    current: '1.278',
    history: '1.28',
    parenteral: '--',
    dietary: '--',
    target: '112.16'
  },
  {
    type: '热能及三大营养素',
    name: '蛋白质',
    unit: 'g',
    current: '0.729',
    history: '0.73',
    parenteral: '--',
    dietary: '--',
    target: '50'
  },
  {
    type: '热能及三大营养素',
    name: '脂肪',
    unit: 'g',
    current: '0.39',
    history: '0.39',
    parenteral: '--',
    dietary: '--',
    target: '19.94'
  },
  {
    type: '常量元素',
    name: '钠',
    unit: 'mg',
    current: '9',
    history: '9',
    parenteral: '--',
    dietary: '--',
    target: '1500'
  },
  {
    type: '常量元素',
    name: '钙',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '800'
  },
  {
    type: '常量元素',
    name: '磷',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '720'
  },
  {
    type: '常量元素',
    name: '钾',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '2000'
  },
  {
    type: '常量元素',
    name: '镁',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '330'
  },
  {
    type: '常量元素',
    name: '氯',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '2300'
  },
  {
    type: '常量元素',
    name: '铁',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '20'
  },
  {
    type: '常量元素',
    name: '锌',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '7.5'
  }
]);

// 初始化饼图
onMounted(() => {
  const chart = echarts.init(pieChart.value);
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        return `营养数据分析<br/>${params.marker} ${params.name} ${params.value}`;
      },
      backgroundColor: '#fff',
      borderColor: '#eee',
      borderWidth: 1,
      textStyle: {
        color: '#666'
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        emphasis: {
          scale: false,
          scaleSize: 0
        },
        data: [
          {
            value: 30.41,
            name: '蛋白质',
            itemStyle: {
              color: '#36cfc9',
              borderWidth: 0
            }
          },
          {
            value: 16.27,
            name: '脂肪',
            itemStyle: {
              color: '#ffd666',
              borderWidth: 0
            }
          },
          {
            value: 53.32,
            name: '碳水化合物',
            itemStyle: {
              color: '#2f54eb',
              borderWidth: 0
            }
          }
        ]
      }
    ]
  };
  chart.setOption(option);

  // 监听窗口大小变化，重新调整图表大小
  window.addEventListener('resize', () => {
    chart.resize();
  });
});


const emit = defineEmits(['goBack']);
const goBack = () => {
  emit('goBack')
};

</script>

<style lang="scss" scoped>
.right-card {
  flex: 1;
  height: calc(100vh - 40px);
  overflow-y: auto;

  :deep(.el-card__body) {
    padding: 20px;
  }

  .operation-buttons {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;

    .left-buttons {
      display: flex;
      gap: 12px;
    }

    .pay-status {
      position: absolute;
      top: -10px;
      right: -10px;

      img {
        width: 100px;
        height: auto;
      }
    }
  }

  .stop-date {
    margin-bottom: 20px;
    font-size: 14px;

    .label {
      color: #606266;
    }

    .value {
      color: #303133;
    }
  }

  .prescription-tables {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;

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

    .table-cost {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      padding: 16px 0;
      border-bottom: 1px solid #ebeef5;

      .cost-item {
        line-height: 24px;
        color: #606266;
        font-size: 18px;

        &.total {
          color: #f56c6c;
          font-weight: 500;
        }
      }
    }
  }

  .analysis-tabs {
    margin-bottom: 30px;

    :deep(.el-tabs__header) {
      margin-bottom: 20px;
    }

    .analysis-content {
      .analysis-data {
        display: flex;
        gap: 40px;
        margin-bottom: 20px;

        .data-item {
          font-size: 14px;

          .label {
            color: #606266;
          }

          .value {
            color: #303133;
          }
        }
      }

      .analysis-detail {
        display: flex;
        gap: 40px;

        .table-container {
          width: 50%;

          .extra-info {
            margin-top: 16px;
            display: flex;
            justify-content: space-between;
            color: #606266;
            font-size: 14px;

            .info-item {
              .value {
                color: #303133;
                margin-left: 8px;
              }
            }
          }
        }

        .chart-container {
          width: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-right: 20px;

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

          .pie-chart {
            height: 220px;
            margin-bottom: 20px;
          }

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

            .legend-item {
              display: flex;
              align-items: center;
              gap: 8px;

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

              .text {
                font-size: 13px;
                color: #606266;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }

  .footer-cost {
    display: none;
  }

  .copyright {
    text-align: center;
    color: #909399;
    font-size: 12px;
  }
}
</style>
