<template>
<a-spin :spinning="props.modalLoading">
  <div class="modal-content">
    <div class="row">
      <div class="item">
        <div class="label">图斑编号：</div>
        <div class="item-value" style="flex:2">
          <a-input v-model:value="props.infoData.case_no" :disabled="!props.control"/>
        </div>
      </div>
      <div class="item">
        <div class="label">图斑类型：</div>
        <div class="item-value">
          <a-select
            style="width: 100%"
            v-model:value="props.infoData.typename"
            :options="typenameOptions"
            placeholder="请选择图斑类型" 
            :disabled="!props.control"/>
        </div>
      </div>
      <div class="item" style="flex:2">
        <div class="label">图斑详情：</div>
        <div class="item-value" style="flex:3">
          <a-input v-model:value="props.infoData.case_description" :disabled="!props.control"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="item">
        <div class="label">县/区：</div>
        <div class="item-value">
          <a-select
            style="width: 100%"
            v-model:value="props.infoData.countyid"
            :options="countyOptions"
            @change="handleCountyChange"
            placeholder="请选择县/区" 
            :disabled="!props.control"/>
        </div>
      </div>
      <div class="item">
        <div class="label">乡镇/街道：</div>
        <div class="item-value">
          <a-select
            style="width: 100%"
            v-model:value="props.infoData.streetid"
            :options="streetOptions"
            @change="handleStreetChange"
            placeholder="请选择乡镇/街道"
            :disabled="!props.control"/>
        </div>
      </div>
      <div class="item">
        <div class="label">社区/村：</div>
        <div class="item-value">
          <a-select
            style="width: 100%"
            v-model:value="props.infoData.communityid"
            :options="communityOptions"
            @change="handleCommunityChange"
            placeholder="请选择社区/村"
            :disabled="!props.control"/>
        </div>
      </div>
      <div class="item">
        <div class="label">详细地址：</div>
        <div class="item-value"  style="flex:2">
          <a-input v-model:value="props.infoData.address" :disabled="!props.control"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="item">
        <div class="label">违法开采面积：</div>
        <div class="item-value">
          <a-input v-model:value="props.infoData.weifakaicaiarea_base" :disabled="!props.control"/>
        </div>
      </div>
      <div class="item">
        <div class="label">违法占地面积：</div>
        <div class="item-value">
          <a-input v-model:value="props.infoData.weifazhandiarea_base" :disabled="!props.control"/>
        </div>
      </div>
      <div class="item">
        <div class="label">基本农田面积：</div>
        <div class="item-value">
          <a-input v-model:value="props.infoData.jbntarea_base" :disabled="!props.control"/>
        </div>
      </div>
      <div class="item">
        <div class="label">耕地面积：</div>
        <div class="item-value">
          <a-input v-model:value="props.infoData.gengdi_area" :disabled="!props.control"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="item">
        <div class="label">城市开发边界面积：</div>
        <div class="item-value">
          <a-input v-model:value="props.infoData.cskfbjarea_base" :disabled="!props.control"/>
        </div>
      </div>
      <div class="item">
        <div class="label">生态保护红线面积：</div>
        <div class="item-value">
          <a-input v-model:value="props.infoData.stbhhxarea_base" :disabled="!props.control"/>
        </div>
      </div>
      <div class="item">
        <div class="label" style="font-size: 13px;">疑似违法涉矿图斑面积：</div>
        <div class="item-value">
          <a-input v-model:value="props.infoData.weifaarea_base"  :disabled="!props.control"/>
        </div>
      </div>
      <div class="item">
        <div class="label">所属年度：</div>
        <div class="item-value">
          <a-input v-model:value="props.infoData.syear_base" :disabled="!props.control"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="item">
        <div class="label">是否重点矿区：</div>
        <div class="item-value">
          <a-select
            style="width: 100%"
            v-model:value="props.infoData.zhongdianflag_base"
            :options="yesOrNoOptions"
            :disabled="!props.control" />
        </div>
      </div>
      <div class="item">
        <div class="label">重点矿区名称：</div>
        <div class="item-value">
          <a-input v-model:value="props.infoData.zhongdianname_base" :disabled="!props.control" />
        </div>
      </div>
      <div class="item">
        <div class="label" style="font-size: 12px;">是否在国家自然保护区内：</div>
        <div class="item-value">
          <a-select
            style="width: 100%;"
            v-model:value="props.infoData.ziranbaohuflag_base"
            :options="yesOrNoOptions"
            :disabled="!props.control" />
        </div>
      </div>
      <div class="item">
        <div class="label" style="font-size: 12px;">所属国家自然保护区名称：</div>
        <div class="item-value">
          <a-input v-model:value="props.infoData.ziranbaohuname_base" :disabled="!props.control" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="item">
        <div class="label">前影像名称：</div>
        <div class="item-value" style="flex:2">
          <a-input v-model:value="props.infoData.qianshixiang_base" disabled />
        </div>
      </div>
      <div class="item">
        <div class="label">前时相时间：</div>
        <div class="item-value" style="flex:2">
          <a-input v-model:value="props.infoData.pre_phase_time" disabled/>
        </div>
      </div>
      <div class="item">
        <div class="label">是否符合土地利用总体规划：</div>
        <div class="item-value">
          <a-select
            style="width: 100%;"
            v-model:value="props.infoData.tudiliyongflag_base"
            :options="yesOrNoOptions"
            :disabled="!props.control"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="item">
        <div class="label">后影像名称：</div>
        <div class="item-value" style="flex:2">
          <a-input v-model:value="props.infoData.houshixiang_base" disabled/>
        </div>
      </div>
      <div class="item">
        <div class="label">后时相时间：</div>
        <div class="item-value" style="flex:2">
          <a-input v-model:value="props.infoData.later_phase_time" disabled/>
        </div>
      </div>
      <div class="item">
        <div class="label">经纬度：</div>
        <div class="item-value" style="flex:2;display: flex">
          <a-input id="lnglat" style="margin-right: 15px;" :value="`${props.infoData.centerlng_base},${props.infoData.centerlat_base}`" disabled/>
          <a-button @click="copyText">复制</a-button>
          <textarea id="copyText" style="position: absolute;left: -9999px;top: -9999px;" :value="`${props.infoData.centerlng_base},${props.infoData.centerlat_base}`"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="item">
        <div class="label">判读人：</div>
        <div class="item-value" style="flex:2">
          <a-input v-model:value="props.infoData.identification_user" disabled/>
        </div>
      </div>
      <div class="item">
        <div class="label">判读时间：</div>
        <div class="item-value" style="flex:2">
          <a-input v-model:value="props.infoData.identification_time" disabled/>
        </div>
      </div>
      <div class="item">
        <div class="label">到期时限：</div>
        <div class="item-value" style="flex:2">
          <a-input v-model:value="props.infoData.chulishixian_base" disabled/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="item">
        <div class="label">情况说明：</div>
        <div class="item-value" style="flex:2">
          <a-input v-model:value="props.infoData.resubmitremark" disabled/>
        </div>
      </div>
      <div class="item"></div>
      <div class="item"></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 v-if="props.control" 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
            v-if="props.control"
            list-type="picture-card"
            :showUploadList="false"
            :custom-request="customRequest"
            @change="handleChange"
            :disabled="!props.control"
          >
            <div>
              <plus-outlined />
              <div style="margin-top: 8px">Upload</div>
            </div>
          </Upload>
        </div>
      </div>
    </div>
    <div style="width: 50%; height: 300px; margin-bottom: 10px;">
      <MapboxMap 
        @mapOnLoad="onMapboxLoad"
        ref="MapboxComponent"/>
    </div>
    <div class="footer">
      <div class="button-div">
        <a-button style="margin-right: 10px;" @click="emits('closeModal')">关闭弹窗</a-button>
        <a-button v-if="props.control" style="margin-right: 10px;" type="primary" class="danger-button" @click="emits('closeCase',props.infoData.id)">关闭线索</a-button>
        <a-button v-if="props.control" style="margin-right: 10px;" type="primary" @click="submit">审核通过</a-button>
        <a-button v-if="props.control" style="margin-right: 10px;" type="primary" class="danger-button" @click="reSubmit">复提</a-button>
      </div>
    </div>
  </div>
</a-spin>
</template>

<script setup lang="ts">
import { defineProps, ref, watch, onMounted, defineEmits, createVNode } from "vue"
import { PlusOutlined, CloseOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Upload, message, Modal } from 'ant-design-vue';
import { uploadFile } from '@/api/formrender/index';
import { getAppEnvConfig } from '@/utils/env';
import { getLoad } from '@/api/sys/sysDataItemDetail';
import { getChildrenTree } from '@/api/demo/system';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getGeom } from '@/api/sys/layerManagement';
import axios from "axios";
import { IsReSubmit } from '@/api/audit/index'

const props = defineProps(['infoData','control','modalLoading'])
const emits = defineEmits(['handleOk','closeModal','closeCase','reSubmit','changeLoading'])

const typenameOptions = ref([])
const countyOptions = ref([])
const streetOptions = ref([])
const communityOptions = ref([])
const fileList = ref<any>([])
const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
const geomsList = ref()
const MapboxComponent = ref();
const yesOrNoOptions = ref([
  { label: '是', value: '1' },
  { label: '否', value: '2' }
])

onMounted(() => {
  getLoad({code:'kctubanleixing'}).then(res => {
    typenameOptions.value = res.map(item => {
      return {
        label: item.itemName,
        value: item.itemValue
      }
    })
  })
  getChildrenTree({ parentId: 371300 }).then(res => {
    countyOptions.value = res.map(item => {
      return {
        label: item.name,
        value: item.id.toString(),
      }
    })
  })
  props.infoData.countyid && getChildrenTree({ parentId: props.infoData.countyid }).then(res => {
    streetOptions.value = res.map(item => {
      return {
        label: item.name,
        value: item.id.toString(),
      }
    })
  })
  props.infoData.streetid && getChildrenTree({ parentId: props.infoData.streetid }).then(res => {
    communityOptions.value = res.map(item => {
      return {
        label: item.name,
        value: item.id.toString(),
      }
    })
  })
  const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
  props.infoData.tubanpic_base && props.infoData.tubanpic_base.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.infoData.tubanpic_base = 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 => {
    console.log(res)
    let data = res.data.result
    fileList.value?.push({
      uid: '-1',
      name: data[0].filePath,
      status: 'done',
      url: VITE_GLOB_INFO_IMAGE_URL + '/' + data[0].filePath,
    });
  })
}
const handlePreview = () => {

}
const handleRemove = () => {

}
const handlerDelete = (index) => {
  fileList.value.splice(index, 1);
}
const handlerPreviewImage = (url,list) => {
  
}
const submit = () => {
  Modal.confirm({
    title: '确认审核通过吗？',
    icon: createVNode(ExclamationCircleOutlined),
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      IsReSubmit({originalcaseno: props.infoData.original_case_no, subjectkey: 'Subject_FFCK'}).then(res => {
        if(res){
          let params = {
            ...props.infoData,
            subject: '非法采矿',
          }
          emits('handleOk',params)
        }else{
          message.error('审核失败')
        }
      })
    }
  })
}
const reSubmit = () => {
  emits('reSubmit',props.infoData.original_case_no)
}
const copyText = () => {
  const copyTextDom = document.getElementById('copyText')
  console.log(copyTextDom)
  if(copyTextDom){
    copyTextDom.select()
    document.execCommand('Copy');
    message.success('复制成功')
  }
}
async function changeTask() {
  let getGeomPrams = {
    TableName: 'drone_shp_data ',
    FieldName: 'gid',
    FieldValue: props.infoData.geomid?.split(','),
    page: 1,
    limit: 999,
    key: null,
  };
  if (props.infoData.geomid) {
    getGeom(getGeomPrams).then((res) => {
      let geoms: Array<{ key: string; mapgeom: any }> = [];
      if (res) {
        if (res.items?.length > 0) {
          res.items.forEach((item, index) => {
            let geom = {
              key: item.gid,
              mapgeom: item.geometry,
            };
            geoms.push(geom);
            geomsList.value = geoms;
          });
        }
        MapboxComponent.value.handlerDraw('Details', geoms, false);
      } else {
        geomsList.value = null;
        message.error('当前数据没有图斑！');
      }
    });
  } else {
    message.error('当前数据没有图斑！');
  }
}
const onMapboxLoad = () => {
  changeTask();
}
const handleCountyChange = (value,item) => {
  props.infoData.countyname = item.label
  props.infoData.streetid = ''
  props.infoData.streetname = ''
  props.infoData.communityid = ''
  props.infoData.communityname = ''
  getChildrenTree({ parentId: value }).then(res => {
    streetOptions.value = res.map(item => {
      return {
        label: item.name,
        value: item.id.toString(),
      }
    })
    communityOptions.value = []
  })
}
const handleStreetChange = (value,item) => {
  props.infoData.streetname = item.label
  props.infoData.communityid = ''
  props.infoData.communityname = ''
  getChildrenTree({ parentId: value }).then(res => {
    communityOptions.value = res.map(item => {
      return {
        label: item.name,
        value: item.id.toString(),
      }
    })
  })
}
const handleCommunityChange = (value,item) => {
  props.infoData.communityname = item.label
}
</script>

<style lang="scss" scoped>
: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;
}
.modal-content{
  padding: 20px;
}
.row{
  display: flex;
  margin-bottom: 15px;
}
.select-width{
  width:100%;
}
.item{
  display: flex;
  flex:1;
  .label{
    flex: 1;
    padding: 0px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .item-value{
    padding: 0px 15px;
    flex:1;
  }
}
.button-div{
  display: flex;
  justify-content: flex-end;
  .danger-button{
    background: #ed6f6f;
    &:hover{
      background: #faa19d;
    }
  }
}
</style>
