<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" disabled/></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 class="item" style="width: 33.3%;">
        <div class="label">备注：</div>
        <div class="item-input"><a-input  v-model:value="props.infoResult.remark"/></div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="width: 100%;">
        <div class="label">图片：</div>
        <div style="flex:9;display:flex;">
          <a-image-preview-group>
            <div class="video-item" v-for="(item, index) in fileList" :key="index" style="display: inline-block;position:relative;">
              <div class="video-delete-btn" @click="handlerDelete(index)">
                <CloseOutlined />
              </div>
              <a-image :src="item.url" style="width:100px;height:100px;" />
            </div>
          </a-image-preview-group>
          <Upload
            list-type="picture-card"
            :showUploadList="false"
            :custom-request="customRequest"
            @change="handleChange"
          >
            <div>
              <plus-outlined />
              <div style="margin-top: 8px">Upload</div>
            </div>
          </Upload>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="width: 100%;">
        <div class="label">上传SHP：</div>
        <div style="flex:9;display:flex;">
          <a-upload
            v-model:file-list="shpList"
            accept=".zip"
            :maxCount="1"
            :custom-request="shpCustomRequest"
          >
            <a-button>
              <upload-outlined></upload-outlined>
              上传SHP
            </a-button>
            <template #itemRender="{ file, actions }">
              <a-space>
                <span>{{ file.name }}</span>
              </a-space>
            </template>
          </a-upload>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref, watch, defineEmits } from "vue"
import { getChildrenTree } from '@/api/demo/system'
import { getAppEnvConfig } from '@/utils/env';
import axios from "axios";
import { Upload } from 'ant-design-vue';
import { PlusOutlined, CloseOutlined, ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons-vue';
import { uploadFile } from '@/api/formrender/index';
const props = defineProps(['infoData','infoResult','shppath'])
const emits = defineEmits(['update:shppath'])
const countyOptions = ref([])
const streetOptions = ref([])
const communityOptions = ref([])
const fileList = ref<any>([])
const shpList = 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, remark, casepic} = 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
    props.infoResult.remark = remark
    props.infoResult.casepic = casepic

    const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
    props.infoData.casepic && props.infoData.casepic.split(',').forEach(item => {
      fileList.value.push({
        uid: '-1',
        name: item,
        status: 'done',
        url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
      })
    })
})
watch(() => fileList.value.length, (val) => {
  props.infoResult.casepic = fileList.value.map(item => item.name).join(',')
})
const handleChange = (info) => {
  if (info.file.status !== 'uploading') {
  }
  if (info.file.status === 'done') {
  } else if (info.file.status === 'error') {
  }
};
const customRequest = (file) => {
  console.log('handleCustomRequest',file)
  const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
  const formData = new FormData()
  formData.append('files', file.file)
  axios({
    method: 'post',
    url: `${VITE_GLOB_INFO_IMAGE_URL}/api/Platform/Upload`,
    params: { project: 'DroneEnforcement'},
    data: formData,
    headers: {
      'Content-type': 'multipart/form-data',
    },
  }).then(res => {
    let data = res.data.result
    console.log(res)
    fileList.value?.push({
      uid: '-1',
      name: data[0].filePath,
      status: 'done',
      url: VITE_GLOB_INFO_IMAGE_URL + '/' + data[0].filePath,
    });
  })
}
const handlerDelete = (index) => {
  fileList.value.splice(index, 1);
}
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
}
const shpCustomRequest = (file) => {
  const formData = new FormData()
  formData.append('files', file.file)
  uploadFile(formData).then(res => {
    emits('update:shppath',res[0].filePath)
  })
}
</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,
      }
    }
  }
}
:deep(.ant-image){
  margin-right: 10px;
  margin-bottom: 10px;
}
.video-delete-btn {
  position: absolute;
  top: 0px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-bottom-left-radius: 80%;
  background: rgb(0 0 0 / 20%);
  color: #fff;
  line-height: 30px;
  text-align: center;
  z-index: 999;
}
</style>
