<template>
  <div style="padding: 20px;">
    <a-descriptions :column="3" bordered>
      <a-descriptions-item label="线索编号">{{case_no}}</a-descriptions-item>
      <a-descriptions-item label="线索描述">{{case_description}}</a-descriptions-item>
      <a-descriptions-item label="区县">{{countyname}}</a-descriptions-item>
      <a-descriptions-item label="乡镇">{{streetname}}</a-descriptions-item>
      <a-descriptions-item label="社区">{{communityname}}</a-descriptions-item>
      <a-descriptions-item label="地址">{{address}}</a-descriptions-item>
      <a-descriptions-item label="经度">{{lng}}</a-descriptions-item>
      <a-descriptions-item label="纬度">{{lat}}</a-descriptions-item>
      <a-descriptions-item label="总面积">{{area}}</a-descriptions-item>
      <a-descriptions-item label="农用地面积">{{nongyongdi_area}}</a-descriptions-item>
      <a-descriptions-item label="耕地面积">{{gengdi_area}}</a-descriptions-item>
      <a-descriptions-item label="永农面积">{{yongjiujibennongtian_area}}</a-descriptions-item>
      <a-descriptions-item label="重点区域面积">{{zhongdianquyu_area}}</a-descriptions-item>
      <a-descriptions-item label="生态保护红线面积">{{shengtaibaohuhongxian_area}}</a-descriptions-item>
      <a-descriptions-item label="国土空间规划面积">{{guotukongjianguihua_area}}</a-descriptions-item>
      <a-descriptions-item label="无人机编号">{{drone_no}}</a-descriptions-item>
      <a-descriptions-item label="备注" :span="2">{{remark}}</a-descriptions-item>
      <a-descriptions-item label="图片" :span="4">
        <div class="image-div">
          <a-image-preview-group>
            <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
              <a-image
                v-if="imageItem"
                width="100px"
                height="100px"
                :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
              ></a-image>
            </template>
          </a-image-preview-group>
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script setup lang="ts">
import {defineProps, computed} from "vue"
import { getAppEnvConfig } from '@/utils/env';
const props = defineProps(['info'])
const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
const { id, case_no, case_description, countyid, 
    countyname, streetid, streetname,communityid, communityname, address, drone_no, lng, lat,
    area, nongyongdi_area, gengdi_area, yongjiujibennongtian_area, zhongdianquyu_area, shengtaibaohuhongxian_area,
    guotukongjianguihua_area, remark, casepic } = props.info

const casepicList = computed(() => {
  return casepic ? casepic.split(',') : [];
});
</script>

<style lang="scss" scoped>
  .image-div {
    min-width: 340px;
    max-height: 220px;
    overflow: auto;
  }
  :deep(.ant-image) {
    margin-right: 10px;
    margin-bottom: 10px;
  }
</style>
