<template>
  <div class="flex-column">
    <a-row style="overflow-y: hidden">
      <a-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
        <div class="upload-div">
          <a-upload-dragger
            style="height: 174px; width: 100%"
            class="upload-dragger"
            v-model:fileList="fileList"
            name="imageBoundary_name"
            :multiple="false"
            :maxCount="1"
            :before-upload="beforeUpload"
            accept=".zip,.xlsx"
          >
            <p class="ant-upload-drag-icon">
              <PlusOutlined />
            </p>
            <div style="opacity: 0.7"> 文件上传 </div>
          </a-upload-dragger>
        </div>
        <p />
        <p />
        <p />
        <div class="upload-span">
          <div class="upload-span-content">
            <div style="opacity: 0.7">将文件拖拽到这里或点击上传按钮</div>
            <div style="color: #1e5eff">支持扩展名：zip,xlsx</div>
            <div style="opacity: 0.7">zip中需要包含 .shp .shx .dbf 文件 且.shp文件大小小于10MB</div>
          </div>
        </div>
        <p />
        <a-form
          ref="form"
          v-modal:model="currentAppForm"
          labelAlign="right"
          label-width="80px"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          size="mini"
        >
          <a-form-item label="服务名称" name="serverName">
            <a-input v-model:value="currentAppForm.serverName" placeholder="请输入服务名称" />
          </a-form-item>
          <a-form-item label="图斑数据" name="hasFeature">
            <a-select
              v-model:value="currentAppForm.hasFeature"
              placeholder="请选择是否具有图斑数据"
            >
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="0">否</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="空间参考" name="spaceType">
            <a-select v-model:value="currentAppForm.spaceType" placeholder="请选择空间参考">
              <a-select-option value="EPSG:4326">EPSG:4326</a-select-option>
              <a-select-option value="3857">EPSG:3857</a-select-option>
              <a-select-option value="900913">EPSG:900913</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="数据类型" name="spaceType">
            <a-select v-model:value="currentAppForm.layerType" placeholder="请选择数据类型">
              <a-select-option value="point">点</a-select-option>
              <a-select-option value="linestring">线</a-select-option>
              <a-select-option value="polygon">面</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="数据表名" name="tableName">
            <a-input v-model:value="currentAppForm.tableName" placeholder="请输入表名" />
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 10, span: 14 }">
            <a-button type="primary" @click="onSubmit">立即创建</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  // vue
  import { ref, onMounted } from 'vue';
  // vben
  import { useMessage } from '@/hooks/web/useMessage';
  import {
    DeleteOutlined,
    UploadOutlined,
    MinusOutlined,
    CloseOutlined,
    CloudDownloadOutlined,
    PlusOutlined,
  } from '@ant-design/icons-vue';
  import { message, Upload } from 'ant-design-vue';
  import type { UploadProps } from 'ant-design-vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { useGlobSetting } from '@/hooks/setting';
  // api
  import { fun_GetUpdateFiles, fun_AddAppFiles } from '@/api/demo/version';
  import { fun_Load, fun_Upload } from '@/api/demo/files';

  const { createMessage } = useMessage();

  // 表单栅格
  const labelCol = { span: 4 };
  const wrapperCol = { span: 20 };

  // 影像边界shp
  const currentAppForm = ref({
    edition: '',
    description: '',
    filepath: '',
    must_update: '',
    project_name: '',
    createuser: '',
    createtime: '',
  });

  // 上传文件列表
  let fileList: any = ref([]);
  const imageBoundary_loading = ref<boolean>(false);
  const imageBoundary_name = ref<string>('');
  // 上传的文件
  const fileName = ref('');
  let filePath = '';

  // 上传之前
  const beforeUpload: UploadProps['beforeUpload'] = (file) => {
    let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
    let size = file.size / 1024 / 1024;
    const isZip = extension === 'zip' || extension === 'xlsx';
    const suitableSize = size < 10;

    imageBoundary_name.value = file.name;
    if (!isZip) {
      createMessage.error('只能上传后缀是.zip或者.xlsx的文件');
    }
    if (!suitableSize) {
      createMessage.error('文件大小不得超过10M');
    }
    if (isZip && suitableSize) {
      imageBoundary_loading.value = true;
    }
    return (isZip && suitableSize) || Upload.LIST_IGNORE;
  };

  // 上传文件接口
  const handleCustomRequest = (file, progress) => {
    fileList.value = [];
    fun_Upload(file, progress)
      .then((res: any) => {
        if (res.data.result.length > 0) {
          fileName.value = res.data.result[0].fileName;
          filePath = res.data.result[0].filePath;
          imageBoundary_loading.value = false;
        }
      })
      .catch((err) => {
        imageBoundary_loading.value = false;
        file.onError(err);
        createMessage.error(err.message);
      });
  };

  // 删除文件
  function deleteFileName() {
    // 影像边界shp-删除文件
    fileName.value = '';
    filePath = '';
    fileList.value = [];
  }

  // 影像边界shp-立即创建
  function onSubmit() {
    if (fileName.value == '' || filePath == '') {
      createMessage.warn(`请选择上传文件!`);
      return;
    }
    if (currentAppForm.value.edition == '') {
      createMessage.warn(`请先填写版本号!`);
      return;
    }
    fun_Load({ key: fileName.value }).then((res) => {
      if (res.items.length > 0) {
        currentAppForm.value.filepath = res.items[0].filePath;
        fun_AddAppFiles(currentAppForm.value).then((res2) => {
          if (res2) {
            createMessage.success(`上传成功!`);
            currentAppForm.value = {
              createtime: '',
              createuser: '',
              edition: '',
              description: '',
              filepath: '',
              must_update: '',
              project_name: '',
            };
            fileList.value = [];
          } else {
            createMessage.warn(`接口错误!`);
          }
        });
      } else {
        createMessage.warn(`上传文件出现错误!`);
      }
    });
  }

  // 影像边界shp-当前版本信息
  let currentAppInfo = ref({});

  onMounted(() => {});
</script>
<style lang="less" scoped>
  .upload-div {
    display: flex; /* 启用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */

    width: 100%; /* 使容器占据父元素的全部宽度 */
  }

  .upload-span-content {
    position: relative;
    left: calc(16.5%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .upload_span {
    align-items: center;
    text-align: center;
    justify-content: center;
  }
</style>
