<template>
  <div class="content">
    <div class="form-div">
      <div class="row">
        <div class="item">
          <div class="label">编号：</div>
          <div class="item-value" style="flex:2">
            <a-input :value="props.showInfoData.serialNumber" 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.showInfoData.specificNature" :disabled="props.isRead"/>
          </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.showInfoData.area" :disabled="props.isRead"/>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="item">
          <div class="label">储水量(m³)：</div>
          <div class="item-value" style="flex:2">
            <a-input v-model:value="props.showInfoData.chushuiliang" :disabled="props.isRead"/>
          </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="address" :disabled="props.isRead"/>
          </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.showInfoData.dongzhi" :disabled="props.isRead"/>
          </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.showInfoData.xizhi" :disabled="props.isRead"/>
          </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.showInfoData.nanzhi" :disabled="props.isRead"/>
          </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.showInfoData.beizhi" :disabled="props.isRead"/>
          </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.showInfoData.landUseTerm" :disabled="props.isRead"/>
          </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.showInfoData.circulationTerm" :disabled="props.isRead"/>
          </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.showInfoData.price" :disabled="props.isRead"/>
          </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.showInfoData.currentStatusDescription" :disabled="props.isRead"/>
          </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.showInfoData.owner" :disabled="props.isRead"/>
          </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.showInfoData.contactNumber" :disabled="props.isRead"/>
          </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.showInfoData.remarks" :disabled="props.isRead"/>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="item" style=" width: 100%;">
          <div class="label">图片：</div>
          <div style="flex:2;display:flex;flex-wrap: wrap">
            <a-image-preview-group>
              <div class="video-item" v-for="(item, index) in imageList" :key="index" style="display: inline-block;position:relative;">
                <div class="video-delete-btn" @click="handlerDelete(index)" v-if="!props.isRead">
                  <CloseOutlined />
                </div>
                <a-image :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`" style="width:100px;height:100px;" />
              </div>
            </a-image-preview-group>
            <Upload
              v-if="!props.isRead"
              list-type="picture-card"
              :showUploadList="false"
              :custom-request="customRequest"
              @change="handleChange"
              style="width: 100px !important;"
            >
              <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">视频：</div>
          <div style="flex:2;display:flex;flex-wrap: wrap">
            <a-image-preview-group>
              <div class="video-item" v-for="(item, index) in videoList" :key="index" style="display: inline-block;position:relative;">
                <div v-if="!props.isRead" class="video-delete-btn" @click="handlerDelete(index)">
                  <CloseOutlined />
                </div>
                <img src="/video.png" style="width:100px;height:100px;margin-right: 10px;margin-bottom: 10px;"  @click="handlePreview(item)" alt="">
              </div>
            </a-image-preview-group>
            <Upload
              v-if="!props.isRead"
              list-type="picture-card"
              :showUploadList="false"
              :custom-request="customVideoRequest"
              @change="handleChange"
              style="width: 100px !important;"
            >
              <div>
                <plus-outlined />
                <div style="margin-top: 8px">Upload</div>
              </div>
            </Upload>
          </div>
        </div>
      </div>
    </div>
    <div class="map-div">
      <MapboxMap :isRead="props.isRead" :id="props.showInfoData.id" :geoms="geomList" :showInfoFlyToPoint="props.showInfoFlyToPoint" @handlerDrawComplete="handlerDrawComplete"/>
    </div>
  </div>
  <Modal :open="previewOpen" :title="previewTitle" :footer="null" @cancel="handleCancel">
    <video :src="previewImage" class="video-player" controls muted autoplay></video>
  </Modal>
</template>

<script setup lang="ts">
import { defineAsyncComponent, defineProps, onMounted, ref } from "vue"
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
import { PlusOutlined, CloseOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Upload, message, Modal } from 'ant-design-vue';
import { getAppEnvConfig } from '@/utils/env';
import axios from "axios";

const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();

const props = defineProps(['showInfoData','isRead','showInfoFlyToPoint'])
const previewOpen = ref<boolean>(false);
const previewImage = ref<string>('');
const previewTitle = ref<string>('');
const geomList = ref<string[]>([])
const imageList = ref<string[]>([])
const videoList = ref<string[]>([])
const address = ref()

onMounted(() => {
  // geomList.value = props.showInfoData.geoms
  if(props.showInfoData.zhaopian){

    let zhaopianList = props.showInfoData.zhaopian.split(',')
    zhaopianList.forEach(item => {
      if(item){
        imageList.value.push(item)
      }
    })
  }
  if(props.showInfoData.shipin){
    let shipinList = props.showInfoData.shipin.split(',')
    shipinList.forEach(item => {
      if(item){
        videoList.value.push(item)
      }
    })
  }
  if(props.showInfoData.detailedLocation){
    const areaList = JSON.parse(props.showInfoData.detailedLocation)
    address.value = areaList[0].address
    areaList.forEach(item => {
      geomList.value.push(item.geom)
    })
  }
})

const handlerDelete = (index) => {
  props.showInfoData.images.splice(index, 1);
}
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: 'xxcj'},
    data: formData,
    headers: {
      'Content-type': 'multipart/form-data',
    },
  }).then(res => {
    let data = res.data.result[0]
    props.showInfoData.images.push({
      fileName: data.fileName,
      fileSize: data.fileSize,
      path: data.filePath,
      type: 0,
      lng: '',
      lat: '',
      angle: 0,
      tag: ''
    })
  })
}
const customVideoRequest = (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: 'xxcj'},
    data: formData,
    headers: {
      'Content-type': 'multipart/form-data',
    },
  }).then(res => {
    let data = res.data.result[0]
    props.showInfoData.videos.push({
      fileName: data.fileName,
      fileSize: data.fileSize,
      path: data.filePath,
      type: 0,
      lng: '',
      lat: '',
      angle: 0,
      tag: ''
    })
  })
}
const handleChange = (info) => {
  if (info.file.status !== 'uploading') {
  }
  if (info.file.status === 'done') {
  } else if (info.file.status === 'error') {
  }
};
const handlerDrawComplete = (arr) => {
  console.log('geoms',arr)
  props.showInfoData.geoms = arr
}
const handlePreview = async (file) => {
  previewImage.value = `${VITE_GLOB_INFO_IMAGE_URL}/${file}`;
  previewOpen.value = true;
  previewTitle.value =
    file.fileName;
};
const handleCancel = () => {
  previewOpen.value = false;
  previewTitle.value = '';
};
</script>

<style lang="scss" scoped>
:deep(.ant-image){
  margin-right: 10px;
  margin-bottom: 10px;
}
.content{
  width: 100%;
  height: 100%;
  display: flex;
  .form-div{
    width: 50%;
    padding: 50px;
    overflow: auto;
    scrollbar-width: none; 
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
  .map-div{
    width: 50%;
    height: 100%;
  }
}
.row{
  display: flex;
  margin-bottom: 15px;
  .item{
    display: flex;
    flex:1;
    .label{
      flex: 1;
      padding: 0px 15px;
      display: flex;
      align-items: center;
      justify-content: end;
    }
    .item-value{
      padding: 0px 15px;
      flex:1;
    }
  }
}
.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;
}
.video-player{
  width:500px;
  margin:10px;
}
</style>
