<!-- 图形展示 -->
<template>
  <div class="box">
    <!-- 左侧数据 -->
    <div class="left-box">
      <div class="tle">
        <span class="title-img"></span>
        <div class="title-box">{{ "企业基本信息" }}</div>
      </div>
      <a-descriptions :column="1" bordered>
        <a-descriptions-item label="统一社会信用代码">{{ informationData.creditCode }}</a-descriptions-item>
        <a-descriptions-item label="企业名称">{{ informationData.orgName }}</a-descriptions-item>
        <a-descriptions-item label="法定代表人">{{ informationData.legalPerson }}</a-descriptions-item>
        <a-descriptions-item label="企业地址">{{ informationData.registeredAddress }}</a-descriptions-item>
        <a-descriptions-item label="库区编码">{{ informationData.kqbm }}</a-descriptions-item>
        <a-descriptions-item label="总仓容（吨）">{{ informationData.designCapacitySum }}</a-descriptions-item>
        <a-descriptions-item label="总罐容（吨）">{{ informationData.tankCapacitySum }}</a-descriptions-item>
        <a-descriptions-item label="库区地址">{{ informationData.address }}</a-descriptions-item>
        <a-descriptions-item label="占地面积（㎡）">{{ informationData.depotArea }}</a-descriptions-item>
        <a-descriptions-item label="仓房数">{{ informationData.stoehouseCount }}</a-descriptions-item>
        <!-- 暂无字段等待后端提供字段 -->
        <a-descriptions-item label="货位数">{{ informationData.warehouseCount }}</a-descriptions-item>
        <a-descriptions-item label="油罐数">{{ informationData.tankCount }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <!-- 中间数据 -->
    <div class="center-box">
      <div class="right-box">
        <div class="right-btn">
          <span class="right-img"></span>
          <p class="title-text">{{ '粮库基本信息' }}</p>
        </div>
        <div class="text-content">{{ informationData.briefIntroduction }}</div>
      </div>
      <div class="img-box">
        <img :src="informationData.birdsEye" alt="">
      </div>
    </div>
  </div>
</template>
<script setup>
import reserveDataApi from '@/api/reserveData.info/reserveDataApi'
import { useRoute } from 'vue-router';

const route = useRoute();

const informationData = ref({})

const onSearch = () => {
  reserveDataApi.getGraphData({ orgId: route.query.orgId }).then((res) => {
    informationData.value = res
  })
}

onMounted(() => {
  onSearch()
})
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 700px;
  display: flex;

  .left-box {
    width: 32%;
    margin-right: 22px;

    .tle {
      width: 100%;
      height: 42px;
      line-height: 40px;
      border: 2px #f0f0f0 solid;
      border-bottom: none;
      display: flex;
      justify-content: center;
    }

    .title-img {
      background-image: url('../../../assets/img/标题三角图标.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: block;
      width: 20px;
      height: 20px;
      margin: auto 12px;
    }

    .title-box {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }
  }

  .center-box {
    width: 65%;
    height: 91.5%;
  }

  .right-box {
    padding: 12px;
    width: 100%;
    height: 146px;
    background-color: #f1f5ff;
    border-radius: 12px;
    margin-bottom: 12px;

    .title-text {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      margin: 0;
      margin-bottom: 10px;
    }

    .text-content {
      font-size: 18px;
      color: #59595D;
      letter-spacing: 4px;
      word-wrap: break-word;
      max-width: 46ch;
      padding-left: 26px;

    }
  }

  .right-btn {
    display: flex;
    line-height: 40px;

    .right-img {
      background-image: url('../../../assets/img/粮库基本信息图标.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: block;
      width: 10px;
      height: 12px;
      margin: auto 8px;
    }
  }

  .img-box {
    border: 1px #f0f0f0 solid;
    height: calc(100% - 154px);
  }
}

/deep/.ant-descriptions-bordered .ant-descriptions-view {
  border: 2px #f0f0f0 solid;
}

/deep/.ant-descriptions {
  width: 100%;
  color: #333;
}

/deep/.ant-descriptions-item-content {
  height: 42px;

}

/deep/.ant-descriptions-item-label {
  width: 140px;
  font-size: 16px;
  padding: 12px 10px;
  color: #333;
}

/deep/ .ant-descriptions-item-content {
  width: 270px;
  font-size: 16px;
  padding: 12px 10px;
  height: 36px;
  color: #333;
}
</style>