<template>
  <div class="current1">
    <div class="upload-div w-1/2 xl:w-1/2 m-4 mr-0">
      <a-upload-dragger
        v-model:fileList="shpFileList"
        name="shpFileName"
        style="height: 274px; width: 300px"
        class="upload-dragger"
        :multiple="false"
        :maxCount="1"
        :before-upload="shpBeforeUpload"
        :customRequest="shpCustomRequest"
        accept=".zip,.xlsx"
      >
        <p class="ant-upload-drag-icon">
          <PlusOutlined />
        </p>
        <div style="opacity: 0.7"> 文件上传 </div>
        <div class="upload-span">
          <div class="upload-span-content">
            <div style="opacity: 0.7">将文件拖拽到这里或点击上传按钮</div>
            <div style="color: #1e5eff">支持扩展名：zip、xls、xlsx</div>
            <div style="opacity: 0.7"> zip中需要包含 .shp .shx .dbf 文件 </div>
            <div style="opacity: 0.7"> 且.shp文件大小小于10MB </div>
          </div>
        </div>
      </a-upload-dragger>
    </div>
    <div class="upload-form w-1/2 xl:w-1/2 m-4 mr-0">
      <a-form
        ref="formRef"
        :model="uploadFrom"
        :labelCol="{ width: '75px' }"
        labelAlign="right"
        :rules="uploadFormRules"
      >
        <a-form-item label="服务名称" name="serverName">
          <a-input v-model:value="uploadFrom.serverName" placeholder="请输入服务名称" />
        </a-form-item>
        <a-form-item label="空间参考" name="spatialRef">
          <a-select v-model:value="uploadFrom.spatialRef" placeholder="请选择空间参考">
            <a-select-option value="EPSG:4326">EPSG:4326</a-select-option>
            <a-select-option value="EPSG:3857">EPSG:3857</a-select-option>
            <a-select-option value="EPSG:900913">EPSG:900913</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="数据表名" name="dataTable">
          <a-input v-model:value="uploadFrom.dataTable" placeholder="请输入表名" />
        </a-form-item>
        <a-form-item label="图层样式" name="appendPath">
          <a-upload
            v-model:fileList="tucengFileList"
            name="tucengFileName"
            list-type="picture-card"
            class="upload-dragger"
            :multiple="false"
            :maxCount="1"
            :show-upload-list="false"
            :before-upload="tucengBeforeUpload"
            :custom-request="tucengCustomRequest"
            accept=".sld"
          >
            <div>
              <PlusOutlined />
              <div class="ant-upload-text">上传图层样式</div>
            </div>
          </a-upload>
          <div style="position: relative; top: -50px" v-if="tucengFileName">
            {{ tucengFileName }}
            <DeleteOutlined @click="deleteTuceng" />
          </div>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, h } from 'vue';
  // vben
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { useMessage } from '@/hooks/web/useMessage';
  import type { UploadProps } from 'ant-design-vue';
  import { message, Upload } from 'ant-design-vue';
  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import {
    getStatisticalList,
    ShpGeoLayerAdd,
    ShpGeoLayerLoadPage,
    ShpGeoLayerGet,
    ShpGeoLayerUpdateLayer,
    ShpGeoLayerDelete,
    ShpGeoLayerParseShpInfo,
  } from '@/api/demo/system';
  import { CheckTableExist } from '@/api/database/index';

  import axios from 'axios';
  import { cloneDeep } from 'lodash-es';
  import { getAppEnvConfig } from '@/utils/env';
  const { VITE_GLOB_API_URL } = getAppEnvConfig();

  const { createMessage } = useMessage();

  const formRef = ref();

  const props = defineProps(['uploadForm']);
  const uploadFrom = ref(props.uploadForm);
  const emit = defineEmits(['uploadFormSubmit', 'isZipOrXls']);

  const uploadFormRules = reactive({
    serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
    spatialRef: [{ required: true, message: '请选择空间参考', trigger: 'blur' }],
    // dataType: [{ required: true, message: '请选择数据类型', trigger: 'blur' }],
    appendPath: [{ required: true, message: '请上传图层样式', trigger: 'blur' }],
    dataTable: [
      { required: true, message: '请输入数据表名', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          let reg = /^[a-z]\w{0,28}$/;
          if (value !== '' && !reg.test(value)) {
            callback(
              new Error('小写字母开头，可包含下划线，但不能有汉字和大写字母，不能超过30字符'),
            );
          }
          callback();
        },
        trigger: 'blur',
      },
      {
        validator: async (rule, value, callback) => {
          try {
            let query: any = { tableName: value };
            const response = await CheckTableExist(query);
            if (!response) {
              callback(new Error('数据库已有此数据表名，请更换表名'));
            }
          } catch (error) {
            callback(new Error('检查数据表名时发生错误'));
          }
        },
        trigger: 'blur',
      },
    ],
  });

  // 步骤1-提交
  const submit1 = () => {
    formRef.value
      .validate()
      .then(() => {
        let params = {
          zipFilePath: uploadFrom.value.shpPath,
          tableName: uploadFrom.value.dataTable,
          srid: uploadFrom.value.spatialRef,
        };
        ShpGeoLayerParseShpInfo(params).then((res) => {
          uploadFrom.value.dataType = res.dataType;
          uploadFrom.value.headers = res.headers;
          emit('uploadFormSubmit', uploadFrom.value);
        });
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // 步骤1-shp上传
  const shpFileList = ref<UploadProps['fileList']>([]);
  const shpFileName = ref<string>('');
  let isUpload = false;
  // 步骤1-shp上传之前
  const shpBeforeUpload: UploadProps['beforeUpload'] = (file) => {
    let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
    let size = file.size / 1024 / 1024;
    const isZipOrXls = extension === 'zip' || extension === 'xls' || extension === 'xlsx';
    const suitableSize = size < 30;
    if (!isZipOrXls) {
      createMessage.error('只能上传后缀是.zip .xls或者.xlsx的文件');
    }
    if (extension == 'zip') {
      emit('isZipOrXls', 'shp');
    } else if (['xls', 'xlsx'].includes(extension)) {
      emit('isZipOrXls', 'excel');
    }
    if (!suitableSize) {
      createMessage.error('文件大小不得超过30M');
    }
    isUpload = isZipOrXls && suitableSize;
    return isUpload;
  };
  // 步骤1-shp上传文件接口
  const shpCustomRequest = (options) => {
    if (isUpload) {
      const formData = new FormData();
      formData.append('files', options.file);
      // 假设 Token 存储在 localStorage 中
      const token = localStorage.getItem('X-Token');
      // 设置请求头部，带上 Token
      const headers = {
        'X-Token': token,
      };
      axios
        .post(VITE_GLOB_API_URL + '/api/Files/Upload', formData, { headers })
        .then((response) => {
          options.onSuccess(response.data, options.file);
          shpFileName.value = response.data.result[0].fileName;
          uploadFrom.value.shpPath = response.data.result[0].filePath;
        })
        .catch((error) => {
          options.onError(error);
        });
    }
  };

  // 步骤1-图层样式上传
  const tucengFileList = ref<UploadProps['fileList']>([]);
  const tucengFileName = ref<string>('');
  // 步骤1-图层上传之前
  const tucengBeforeUpload: UploadProps['beforeUpload'] = (file) => {
    let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
    let size = file.size / 1024 / 1024;
    const isSld = extension === 'sld';
    const suitableSize = size < 1;

    if (!isSld) {
      createMessage.error('只能上传后缀是.sld的文件');
    }
    if (!suitableSize) {
      createMessage.error('文件大小不得超过1M');
    }
    return (isSld && suitableSize) || Upload.LIST_IGNORE;
  };
  // 步骤1-图层上传文件接口
  const tucengCustomRequest = (options) => {
    const formData = new FormData();
    formData.append('files', options.file);
    // 假设 Token 存储在 localStorage 中
    const token = localStorage.getItem('X-Token');
    // 设置请求头部，带上 Token
    const headers = {
      'X-Token': token,
    };
    axios
      .post(VITE_GLOB_API_URL + '/api/Files/Upload', formData, { headers })
      .then((response) => {
        options.onSuccess(response.data, options.file);
        tucengFileName.value = response.data.result[0].fileName;
        uploadFrom.value.appendPath = response.data.result[0].filePath;
      })
      .catch((error) => {
        options.onError(error);
      });
  };
  // 步骤1-删除图层样式
  const deleteTuceng = () => {
    tucengFileName.value = '';
    uploadFrom.value.appendPath = '';
  };
  // 清除验证
  const clearValidation = () => {
    formRef.value.clearValidate();
    shpFileName.value = '';
    tucengFileName.value = '';
  };

  defineExpose({
    submit1,
    clearValidation,
  });
</script>
<style lang="less" scoped>
  .current1 {
    display: flex;
  }
  .upload-div {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -30px;
  }
  .upload-span {
    margin: 30px;
  }
  .upload-form {
    margin-left: 100px;
  }
</style>
