<template>
  <div class="pig-nutrient-requirements-display">
    <el-table :data="nutrientRequirements" border style="width: 100%">
      <el-table-column prop="nutrient_name" label="营养素名称"></el-table-column>
      <el-table-column prop="min_requirement" label="最小需求量"></el-table-column>
      <el-table-column prop="max_requirement" label="最大需求量"></el-table-column>
    </el-table>
    <div v-if="nutrientRequirements.length === 0" class="no-data-message">
      暂无该品种该年龄阶段的营养需求数据。
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PigNutrientRequirementsDisplay',
  props: {
    nutrientRequirements: {
      type: Array,
      default: () => [],
    },
    breedName: {
      type: String,
      default: '',
    },
    ageStageName: {
      type: String,
      default: '',
    },
  },
});
</script>

<style scoped>
.pig-nutrient-requirements-display {
  padding: 10px;
}

.no-data-message {
  text-align: center;
  color: #909399;
  margin-top: 20px;
}
</style>
