<!--
 * @Author: chris
 * @Date: 2025-08-25 15:42:45
 * @LastEditors: chris
 * @LastEditTime: 2025-10-15 16:00:17
-->
<script setup>
import ModuleTitle from './moduleTitle.vue';
import { baseInfoDict } from '../config.js';

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

const infoItems = [ 'plantingArea', 'terrain', 'variety', 'plantingNum' ]
</script>

<template>
  <div class="orchard-brief-info">
    <ModuleTitle title="果园概况" icon="nongchangguanli" />
    <div class="list">
      <div class="info-item" v-for="key in infoItems" :key="key">
        <div class="item-icon-box">
          <svg-icon class="item-icon" :icon-class="baseInfoDict[key].svg" color="#2b9908"/>
        </div>
        <p class="item-text">{{ baseInfoDict[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>
