<template>
  <div class="bottom">
      <div class="img">
        <img style="width: 100%;height: 100%" :src="base_img_url+'qs.jpg'"/>
      </div>
      <div class="info">
        <div class="field-list">
          <div class="info-title">{{title}}</div>
          <div class="line"></div>
          <div v-for="(item,index) in fieldList" :key="index" class="item">
            <font class="label">{{item.label}}：</font>{{item.val}}
          </div>
        </div>
      </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {useStore} from "vuex";
import {base_img_url} from "@/api/config"
let store = useStore()
let userinfo = store.getters.userinfo
console.log(userinfo)
const title = ref("");
const fieldList = ref([
    {label:"果园ID",val:""},
    {label:"负责人",val:""},
    {label:"指导专家",val:""},
    {label:"面积",val:""},
    {label:"果树数量",val:""},
    {label:"过往产量",val:""},
]);
onMounted(()=> {
  loadData(userinfo.organId)
})

async function loadData(organId){
  VE_API.organ.getOrganExplain({id:organId}).then(({code,data})=>{
    title.value = data.name;
    fieldList.value = [
      {label:"果园ID",val:data.organId},
      {label:"负责人",val:data.fzr},
      {label:"指导专家",val:data.zdzj},
      {label:"面积",val:data.mianji+"亩"},
      {label:"果树数量",val:data.gssl+"棵"},
      {label:"过往产量",val:data.gwcl+"斤"},
    ]
  })
}
</script>

<style lang="scss" scoped>
.bottom {
  width: 100%;
  height: 77%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  color: #f0f0f0;
  .img {
    width: 60%;
  }

  .info {
    width: 36%;
    background: rgba(3, 44, 57, 0.9);
    border: 1px solid rgba(81, 233, 240, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;

    .field-list {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
      height: 100%;
      background: rgba(3, 44, 57, 0.9);
      border: 1px solid rgba(81, 233, 240, 0.3);
      box-sizing: border-box;
      padding-left: 12px;

      .info-title {
        width: 100%;
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        line-height: 22px;
      }

      .line {
        box-sizing: border-box;
        width: 100%;
        height: 1px;
        border: 1px solid rgba(255, 255, 255, 0.3);
      }

      .label {
        width: 82px;
        height: 24px;
        font-size: 14px;
        font-weight: 400;
        color: #B4FFFB;
        line-height: 24px;
      }
    }
  }
}


</style>
