<script setup>
import { computed } from 'vue';

const props = defineProps({
  data: {
    type: Object,
    required: true,
    validator: (value) => {
      return (
        typeof value.diversity === 'number' &&
        typeof value.richness === 'number' &&
        Array.isArray(value.distribution)
      );
    },
  },
});

const diversityLevel = computed(() => {
  const value = props.data.diversity;
  if (value > 0.8) return { text: '高', type: 'success' };
  if (value > 0.5) return { text: '中', type: 'warning' };
  return { text: '低', type: 'danger' };
});
</script>

<template>
  <div class="species-analysis">
    <el-descriptions :column="3" border>
      <el-descriptions-item label="多样性指数">
        {{ data.diversity }}
        <el-tag :type="diversityLevel.type" size="small">
          {{ diversityLevel.text }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="物种丰富度">
        {{ data.richness }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 分布情况图表 -->
    <div class="distribution-chart">
      <!-- 这里可以添加物种分布的图表展示 -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.species-analysis {
  .distribution-chart {
    margin-top: 20px;
  }
}
</style>