<template>
  <div class="content">
    <div class="row">
      <div class="item" style="flex: 1;">
        <div class="label">图斑编号：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.case_no"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">图斑描述：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.case_description"/></div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="flex: 1;">
        <div class="label">区县：</div>
        <div class="item-input">
          <a-select
            v-model:value="props.infoResult.countyid"
            style="width: 100%"
            :options="countyOptions"
            @change="changeCounty"
          ></a-select>
        </div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">乡镇：</div>
        <div class="item-input">
          <a-select
            v-model:value="props.infoResult.streetid"
            style="width: 100%"
            :options="streetOptions"
            @change="changeStreet"
          ></a-select>
        </div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">社区：</div>
        <div class="item-input">
          <a-select
            v-model:value="props.infoResult.communityid"
            style="width: 100%"
            :options="communityOptions"
            @change="changeCommunity"
          ></a-select>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="flex: 1;">
        <div class="label">地址：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.address"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">经度：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.lng"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">纬度：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.lat"/></div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="flex: 1;">
        <div class="label">总面积：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.area"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">农用地面积：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.nongyongdi_area"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">耕地面积：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.gengdi_area"/></div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="flex: 1;">
        <div class="label">永农面积：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.yongjiujibennongtian_area"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">重点区域面积：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.zhongdianquyu_area"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">生态保护红线面积：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.shengtaibaohuhongxian_area"/></div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="width: 33.3%;">
        <div class="label">国土空间规划面积：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.guotukongjianguihua_area"/></div>
      </div>
      <div class="item" style="width: 33.3%;">
        <div class="label">无人机编号：</div>
        <div class="item-input"><a-input  v-model:value="props.infoResult.drone_no"/></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref } from "vue"
import { getChildrenTree } from '@/api/demo/system'
const props = defineProps(['infoData','infoResult'])
const countyOptions = ref([])
const streetOptions = ref([])
const communityOptions = ref([])
onMounted(() => {
  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} = props.infoData
    getChildrenTree({parentId:371300}).then(res =>{
      countyOptions.value = res.map(item => {
        return {
          value: item.id.toString(),
          label: item.name
        }
      })
    })
    if(countyid){
      getChildrenTree({parentId:countyid}).then(res =>{
        streetOptions.value = res.map(item => {
          return {
            value: item.id.toString(),
            label: item.name
          }
        })
      })
    }
    if(streetid){
      getChildrenTree({parentId:streetid}).then(res =>{
        communityOptions.value = res.map(item => {
          return {
            value: item.id.toString(),
            label: item.name
          }
        })
      })
    }
    props.infoResult.id = id
    props.infoResult.case_no = case_no
    props.infoResult.case_description = case_description
    props.infoResult.countyid = countyid
    props.infoResult.countyname = countyname
    props.infoResult.streetid = streetid
    props.infoResult.streetname = streetname
    props.infoResult.communityid = communityid
    props.infoResult.communityname = communityname
    props.infoResult.address = address
    props.infoResult.drone_no = drone_no
    props.infoResult.lng = lng
    props.infoResult.lat = lat
    props.infoResult.area = area
    props.infoResult.nongyongdi_area = nongyongdi_area
    props.infoResult.gengdi_area = gengdi_area
    props.infoResult.yongjiujibennongtian_area = yongjiujibennongtian_area
    props.infoResult.zhongdianquyu_area = zhongdianquyu_area
    props.infoResult.shengtaibaohuhongxian_area = shengtaibaohuhongxian_area
    props.infoResult.guotukongjianguihua_area = guotukongjianguihua_area
})
const changeCounty = (val) => {
  props.infoResult.countyname = countyOptions.value.find(item => item.value == val)?.label
  props.infoResult.streetid = ''
  props.infoResult.streetname = ''
  props.infoResult.communityid = ''
  props.infoResult.communityname = ''
  getChildrenTree({parentId:val}).then(res =>{
    streetOptions.value = res.map(item => {
      return {
        value: item.id.toString(),
        label: item.name
      }
    })
  })
  communityOptions.value = []
}
const changeStreet = (val) => {
  props.infoResult.streetname = streetOptions.value.find(item => item.value == val)?.label
  props.infoResult.communityid = ''
  props.infoResult.communityname = ''
  getChildrenTree({parentId:val}).then(res =>{
    communityOptions.value = res.map(item => {
      return {
        value: item.id.toString(),
        label: item.name
      }
    })
  })
}
const changeCommunity = (val) => {
  props.infoResult.communityname = communityOptions.value.find(item => item.value == val)?.label
}
</script>
<style lang="scss" scoped>
.content{
  padding: 20px;
  .row{
    display: flex;
    margin-bottom: 25px;
    .item{
      display: flex;
      .label{
        width: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .item-input{
        flex: 1,
      }
    }
  }
}
</style>
