<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 @click="deleteNutrition" v-if="!status.delFlag">处方作废</el-button>
      </div>
      <div class="pay-status">
        <template v-if="status.delFlag">
          <img src="@/assets/images/zuoFei.png" alt="已作废" />
        </template>
        <template v-else-if="status.paymentStatus=='0'">
          <img src="@/assets/images/pay.png" alt="待支付" />
        </template>
        <template v-else-if="status.paymentStatus=='2'">
          <img src="@/assets/images/pay.png" alt="已退款" />
        </template>
        <template v-else-if="status.paymentStatus=='3'">
          <img src="@/assets/images/shiXiao.png" alt="已失效" />
        </template>
        <template v-else">
          <img src="@/assets/images/pay.png" alt="已支付" />
        </template>
      </div>
    </div>

    <!-- 停嘱日期 -->
    <div class="stop-date" v-if="status.prescriptionDate!=null">
      <span class="label">停嘱日期：</span>
      <span class="value">{{ status.prescriptionDate }}</span>
    </div>

    <!-- 处方表格 -->
    <div class="prescription-tables">
      <!-- 营养产品表格 -->
      <div class="table-wrapper">
        <table class="custom-table">
          <thead>
            <tr>
              <th width="60" class="fixed-width">组号</th>
              <th width="160" class="fixed-width">营养产品</th>
              <th width="100" class="fixed-width">用量/次</th>
              <th width="180" class="fixed-width">餐次时间</th>
              <th width="100" class="fixed-width">频次</th>
              <th width="80" class="fixed-width">首日</th>
              <th width="100" class="fixed-width">用量/日</th>
              <th width="140" class="fixed-width">规格</th>
              <th width="80" class="fixed-width">用法</th>
              <th width="120" class="fixed-width">制剂液量/次</th>
              <th width="120" class="fixed-width">制剂浓度/次</th>
              <th width="140" class="fixed-width">能量密度/次</th>
              <th width="150" class="fixed-width">处方备注</th>
              <th width="100" class="fixed-width">每日热量</th>
              <th width="100" class="fixed-width">金额</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableNutritionData" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td>{{ item.nutritionProduct || '--' }}</td>
              <td>{{ item.dosePerTime || '--' }}g</td>
              <td>{{ item.mealTime || '--' }}</td>
              <td>一天{{ item.frequency || '--' }}次</td>
              <td>{{ item.firstDay || '--' }}次</td>
              <td>{{ item.dosePerDay || '--' }}g</td>
              <td>{{ item.specification || '--' }}</td>
              <td>{{ item.usage || '--' }}</td>
              <td>{{ item.preparationVolumePerTime || '--' }}ml</td>
              <td>{{ item.preparationConcentrationPerTime || '--' }}%</td>
              <td>{{ item.energyDensityPerTime || '--' }}kcal/ml</td>
              <td>{{ item.prescriptionRemark || '--' }}</td>
              <td>{{ item.dailyCalories || '--' }}</td>
              <td class="text-right">{{ item.amount || '--' }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 耗材表格 -->
      <div class="table-wrapper">
        <table class="custom-table">
          <thead>
            <tr>
              <th width="60" class="fixed-width">组号</th>
              <th width="200" class="fixed-width">耗材</th>
              <th width="120" class="fixed-width">规格</th>
              <th width="100" class="fixed-width">用量/次</th>
              <th width="100" class="fixed-width">频次</th>
              <th width="100" class="fixed-width">用量/日</th>
              <th width="80" class="fixed-width">首日</th>
              <th width="80" class="fixed-width">数量</th>
              <th width="150" class="fixed-width">处方备注</th>
              <th width="100" class="fixed-width">金额</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in consumableListData" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td>{{ item.consumable || '--' }}</td>
              <td>{{ item.specification || '--' }}</td>
              <td>{{ item.dosePerTime || '--' }}袋</td>
              <td>一天{{ item.frequency || '--' }}次</td>
              <td>{{ item.dosePerDay || '--' }}袋</td>
              <td>{{ item.firstDay || '--' }}次</td>
              <td>{{ item.quantity || '--' }}袋</td>
              <td>{{ item.prescriptionRemark || '--' }}</td>
              <td>{{ item.amount || '--' }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 费用统计 -->
      <div class="table-cost">
        <div class="cost-item">处方费用：￥{{ totalCost.nutritionCost }}</div>
        <div class="cost-item">营养配置费：￥{{ totalCost.configCost }}</div>
        <div class="cost-item total">总计：￥{{ totalCost.total }}</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">
              <div class="table-wrapper">
                <table class="custom-table">
                  <thead>
                    <tr>
                      <th width="120" class="fixed-width">三大营养素</th>
                      <th width="120" class="fixed-width">质量 (g)</th>
                      <th width="120" class="fixed-width">热量占比</th>
                      <th width="120" class="fixed-width">参考值</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in nutritionData" :key="index">
                      <td>{{ item.name }}</td>
                      <td>{{ item.mass }}</td>
                      <td>{{ item.ratio }}</td>
                      <td>{{ item.reference }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <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">
        <div class="table-wrapper table-fixed-header">
          <table class="custom-table">
            <thead>
              <tr>
                <th width="120" class="fixed-width">元素类型</th>
                <th width="120" class="fixed-width">元素名称</th>
                <th width="80" class="fixed-width">单位</th>
                <th colspan="2" class="fixed-width text-center">肠内营养含量/天</th>
                <th width="140" class="fixed-width">肠外营养含量/天</th>
                <th width="140" class="fixed-width">膳食营养含量/天</th>
                <th width="120" class="fixed-width">营养设定</th>
              </tr>
              <tr>
                <th colspan="3"></th>
                <th width="120" class="fixed-width">当前处方</th>
                <th width="120" class="fixed-width">历史处方</th>
                <th colspan="3"></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in nutritionAnalysisData" :key="index">
                <td v-if="isFirstInGroup(item, index)" :rowspan="getGroupRowSpan(item.type)">{{ item.type }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.unit }}</td>
                <td>{{ item.current }}</td>
                <td>{{ item.history || '--' }}</td>
                <td>{{ item.parenteral || '--' }}</td>
                <td>{{ item.dietary || '--' }}</td>
                <td>{{ item.target }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue';
import * as echarts from 'echarts';
import { useHistoryStore } from '@/store/modules/history';
import {delEnteralNutrition} from '@/api/patients/nutrition';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const historyStore = useHistoryStore();

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

// 营养产品表格数据
const tableNutritionData = ref([]);
// 耗材表格数据
const consumableListData = ref([]);
const status = ref({
  paymentStatus: '1',
  delFlag: false,
  stopFlag: false,
  prescriptionDate:null,
  settlementId: '0'
});

const delResult = ref({});

const deleteNutrition = () => {
  delEnteralNutrition(status.value.settlementId).then(() => {
    delResult.value[status.value.settlementId]=true;
    status.value.delFlag=true;
    let row=tableNutritionData.value[0];
    row.delFlag=true;
    proxy?.$modal.msgSuccess('作废成功');
  });
};


// 监听 store 数据变化
watch(
  () => historyStore.historyList,
  (newVal: any) => {
    if (newVal) {
      // 如果是数组，取第一个元素的数据
      if (Array.isArray(newVal)) {
        tableNutritionData.value = newVal[0]?.nutritionList || [];
        consumableListData.value = newVal[0]?.consumableList || [];       
      } else {
        // 如果是单个对象，直接取数据
        tableNutritionData.value = newVal?.nutritionList || [];
        consumableListData.value = newVal?.consumableList || [];
      }

      if(tableNutritionData.value.length>0){
          let row=tableNutritionData.value[0];
          let delFlag=delResult.value[row.settlementId];

          status.value = {
            paymentStatus: row.paymentStatus,
            delFlag: delFlag!=null?delFlag:row.delFlag,
            stopFlag: row.stopFlag,
            prescriptionDate: row.prescriptionDate,
            settlementId: row.settlementId
          }
        }        
    } else {
      // 如果没有数据，设置为空数组
      tableNutritionData.value = [];
      consumableListData.value = [];
    }
  },
  { immediate: true, deep: true }
);

// 计算总费用
const totalCost = computed(() => {
  // 营养产品费用
  const nutritionCost = tableNutritionData.value.reduce((sum, item) => {
    return sum + (Number(item.amount) || 0);
  }, 0);

  // 耗材费用
  const consumableCost = consumableListData.value.reduce((sum, item) => {
    return sum + (Number(item.amount) || 0);
  }, 0);

  // 配置费用固定为 5 元
  const configCost = 5;

  return {
    nutritionCost: nutritionCost.toFixed(2),
    consumableCost: consumableCost.toFixed(2),
    configCost: configCost.toFixed(2),
    total: (nutritionCost + consumableCost + configCost).toFixed(2)
  };
});

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

// 判断是否是组内第一个元素
const isFirstInGroup = (item: any, index: number) => {
  if (index === 0) return true;
  return item.type !== nutritionAnalysisData.value[index - 1].type;
};

// 获取组的行数
const getGroupRowSpan = (type: string) => {
  return nutritionAnalysisData.value.filter((item) => item.type === type).length;
};
 

// 营养数据分析数据
const nutritionAnalysisData = ref([
  // 热能及三大营养素
  {
    type: '热能及三大营养素',
    name: '热量',
    unit: 'kcal',
    current: '12.3',
    history: '60.42',
    parenteral: '--',
    dietary: '--',
    target: '897.3'
  },
  {
    type: '热能及三大营养素',
    name: '热能',
    unit: 'kj',
    current: '51.45',
    history: '252.72',
    parenteral: '--',
    dietary: '--',
    target: '3754.3'
  },
  {
    type: '热能及三大营养素',
    name: '碳水化合物',
    unit: 'g',
    current: '1.278',
    history: '6.91',
    parenteral: '--',
    dietary: '--',
    target: '112.16'
  },
  {
    type: '热能及三大营养素',
    name: '蛋白质',
    unit: 'g',
    current: '0.729',
    history: '3.88',
    parenteral: '--',
    dietary: '--',
    target: '50'
  },
  {
    type: '热能及三大营养素',
    name: '脂肪',
    unit: 'g',
    current: '0.39',
    history: '0.78',
    parenteral: '--',
    dietary: '--',
    target: '19.94'
  },
  // 常量元素
  {
    type: '常量元素',
    name: '钠',
    unit: 'mg',
    current: '9',
    history: '51',
    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'
  },
  // 微量元素
  {
    type: '微量元素',
    name: '硒',
    unit: 'μg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '60'
  },
  {
    type: '微量元素',
    name: '铜',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '0.8'
  },
  {
    type: '微量元素',
    name: '锰',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '4.5'
  },
  {
    type: '微量元素',
    name: '碘',
    unit: 'μg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '120'
  },
  {
    type: '微量元素',
    name: '氟',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '1.5'
  },
  {
    type: '微量元素',
    name: '铬',
    unit: 'μg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '30'
  },
  {
    type: '微量元素',
    name: '钼',
    unit: 'μg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '100'
  },
  // 脂肪酸
  {
    type: '脂肪酸',
    name: '多不饱和脂肪酸',
    unit: 'g',
    current: '0.0033',
    history: '0.01',
    parenteral: '--',
    dietary: '--',
    target: '--'
  },
  // 维生素
  {
    type: '维生素',
    name: '维生素A',
    unit: 'μgRAE',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '700'
  },
  {
    type: '维生素',
    name: '维生素D',
    unit: 'μg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '10'
  },
  {
    type: '维生素',
    name: '维生素E',
    unit: 'mgα-TE',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '14'
  },
  {
    type: '维生素',
    name: '维生素K',
    unit: 'μg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '80'
  },
  {
    type: '维生素',
    name: '维生素B1',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '1.2'
  },
  {
    type: '维生素',
    name: '维生素B2',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '1.2'
  },
  {
    type: '维生素',
    name: '维生素B6',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '1.4'
  },
  {
    type: '维生素',
    name: '维生素B12',
    unit: 'μg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '2.4'
  },
  {
    type: '维生素',
    name: '烟酸（尼克酸）',
    unit: 'mgNE',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '12'
  },
  {
    type: '维生素',
    name: '维生素C',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '100'
  },
  {
    type: '维生素',
    name: '生物素',
    unit: 'μg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '40'
  },
  {
    type: '维生素',
    name: '泛酸',
    unit: 'mg',
    current: '0',
    history: '--',
    parenteral: '--',
    dietary: '--',
    target: '5'
  },
  // 其他
  {
    type: '其他',
    name: '膳食纤维',
    unit: 'g',
    current: '0.363',
    history: '1.45',
    parenteral: '--',
    dietary: '--',
    target: '25'
  }
]);

// 初始化饼图
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;
  }
}

.table-wrapper {
  margin-bottom: 20px;
  overflow-x: auto;

  &.table-fixed-header {
    position: relative;
    height: calc(100vh - 400px); // 调整合适的高度
    overflow-y: auto;

    thead {
      position: sticky;
      top: 0;
      z-index: 1;

      tr:first-child th {
        position: sticky;
        top: 0;
        background: #f5f7fa;
        border-bottom: none;
      }

      tr:last-child th {
        position: sticky;
        top: 41px; // 第一行表头的高度
        background: #f5f7fa;
      }
    }

    tbody {
      tr:first-child td {
        border-top: none;
      }
    }
  }

  // 添加横向滚动条的样式
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #909399;
    border-radius: 4px;
  }

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

.custom-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate; // 改为 separate 以支持固定表头
  border-spacing: 0;
  border: 1px solid #ebeef5;

  th,
  td {
    padding: 12px 8px;
    border: 1px solid #ebeef5;
    text-align: center;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #fff; // 添加背景色防止内容透明

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

  th {
    background-color: #f5f7fa;
    color: #303133;
    font-weight: 600;
    height: 40px; // 固定表头高度
  }

  tbody tr:hover {
    background-color: #f5f7fa;

    td {
      background-color: #f5f7fa;
    }
  }
}
</style>
