<!--
 * @Author: chris
 * @Date: 2025-08-25 15:42:45
 * @LastEditors: chris
 * @LastEditTime: 2025-09-02 16:28:57
-->
<script setup>
import ModuleTitle from './moduleTitle.vue';
const itemDict = {
  acreage: {
    svg: 'nongshi',
    text: '种植面积（亩）'
  },
  terrain: {
    svg: 'dixing',
    text: '地形'
  },
  typeNum: {
    svg: 'pinzhong',
    text: '种植品种（种）'
  },
  type: {
    svg: 'dapengzhongmiaoguanli',
    text: '主要品种'
  },
  lichee: {
    svg: 'shuguo',
    text: '种植荔枝（棵）'
  },
  yield: {
    svg: 'caizhaiguanli',
    text: '去年产量（吨）'
  }
}

const prop = defineProps({
  info: {
    type: Object,
    default: () => {}
  }
})
</script>

<template>
  <div class="orchard-brief-info">
    <ModuleTitle title="果园概况" icon="nongchangguanli" />
    <div class="list">
      <div class="info-item" v-for="key in Object.keys(prop.info)" :key="key">
        <div class="item-icon-box">
          <svg-icon class="item-icon" :icon-class="itemDict[key].svg" color="#2b9908"/>
        </div>
        <p class="item-text">{{ itemDict[key].text }}</p>
        <p class="item-value">{{ prop.info[key] }}</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$main-font-color: #2b9908;
$main-bg-color: rgba(174, 227, 158, 0.2);
$font-color: #9ca3af;
.orchard-brief-info {
  @apply p-20px;

  .list {
    @apply flex flex-wrap w-100% justify-between py-10px;
  }

  .info-item {
    @apply w-50% p-10px my-16px;
  }

  .item-icon-box {
    @apply float-left m-r-10px w-50px h-50px flex justify-center items-center rounded-50%;
    background-color: rgba(174, 227, 158, 0.2);
  }

  .item-icon {
    @apply w-20px h-20px;
  }

  .item-text {
    @apply m-b-5px font-size-14px color-#9ca3af;
  }

  .item-value {
    @apply font-size-20px font-600;
  }
}
</style>
