<template>
  <a-descriptions 
    :column="2" 
    bordered
    :contentStyle="{
      'text-align': 'center',
      'min-width': '250px',
      'word-break': 'break-all'
    }">
    <a-descriptions-item label="id">{{ id }}</a-descriptions-item>
    <a-descriptions-item label="案件编号">{{ case_no }}</a-descriptions-item>
    <a-descriptions-item label="案件名称">{{ case_name }}</a-descriptions-item>
    <a-descriptions-item label="案件描述">{{ case_description }}</a-descriptions-item>
    <a-descriptions-item label="图斑编号">{{ geomid }}</a-descriptions-item>
    <a-descriptions-item label="案件地址">{{ address }}</a-descriptions-item>
    <a-descriptions-item label="总面积">{{ area? area: '-' }} 亩</a-descriptions-item>
    <a-descriptions-item label="耕地面积">{{ gengdi_area? gengdi_area: '-' }} 亩</a-descriptions-item>
    <a-descriptions-item label="国土空间规划面积">{{ guotukongjianguihua_area? guotukongjianguihua_area: '-' }} 亩</a-descriptions-item>
    <a-descriptions-item label="农用地面积">{{ nongyongdi_area? nongyongdi_area: '-' }} 亩</a-descriptions-item>
    <a-descriptions-item label="生态保护红线面积">{{ shengtaibaohuhongxian_area? shengtaibaohuhongxian_area: '-' }} 亩</a-descriptions-item>
    <a-descriptions-item label="永久基本农田面积">{{ yongjiujibennongtian_area? yongjiujibennongtian_area: '-' }} 亩</a-descriptions-item>
    <a-descriptions-item label="重点区域面积">{{ zhongdianquyu_area? zhongdianquyu_area: '-' }} 亩</a-descriptions-item>
    <a-descriptions-item label="创建时间">{{ createtime }}</a-descriptions-item>
  </a-descriptions>
</template>

<script setup lang="ts">
import { defineProps } from "vue"
const props = defineProps(["showInfoData"])
const {
  address,
  area,
  case_description,
  case_name,
  case_no,
  createtime,
  gengdi_area,
  guotukongjianguihua_area,
  id,
  geomid,
  nongyongdi_area,
  shengtaibaohuhongxian_area,
  yongjiujibennongtian_area,
  zhongdianquyu_area 
} = props.showInfoData
</script>

<style lang="scss" scoped></style>
