<template>
  <a-modal
    class="insert-shp-modal"
    width="1290px"
    :destroyOnClose="true"
    v-model:open="props.openModal"
    @cancel="closeModal"
  >
    <template #closeIcon>
      <CloseCircleOutlined />
    </template>
    <div class="title">上传shp</div>
    <div class="content">
      <a-steps
        class="steps"
        :current="current"
        label-placement="vertical"
        :items="[{ title: '选择文件' }, { title: '编辑信息' }, { title: '完成' }]"
      ></a-steps>
      <div class="select-file-div" v-show="current === 0">
        <div class="upload-div">
          <a-upload-dragger
            style="height: 174px; width: 174px"
            class="upload-dragger"
            v-model:fileList="fileList"
            name="file"
            :multiple="false"
            :maxCount="1"
            :before-upload="beforeUpload"
            accept=".zip,.xlsx"
          >
            <p class="ant-upload-drag-icon">
              <inbox-outlined></inbox-outlined>
            </p>
            <div style="opacity: 0.7">
              <a-button :icon="h(PlusOutlined)">文件上传</a-button>
            </div>
          </a-upload-dragger>
        </div>
        <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>
        <div class="upload-form">
          <a-form
            ref="formRef"
            :model="uploadFrom"
            :label-col="{ style: { 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="spaceType">
              <!-- <a-input v-model:value="uploadFrom.spaceType" /> -->
              <a-select v-model:value="uploadFrom.spaceType" 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="tableName">
              <a-input v-model:value="uploadFrom.tableName" placeholder="请输入表名" />
            </a-form-item>
          </a-form>
          <div class="upload-span-button">
            <a-button type="primary" :icon="h(PlusOutlined)" @click="submitShp">上传</a-button>
          </div>
        </div>
      </div>
      <div class="edit-info-div" v-show="current === 1">
        <a-table
          :columns="columns"
          :data-source="dataList"
          :pagination="false"
          :bordered="true"
          :scroll="{ y: 260 }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'type'">
              <a-select v-model:value="record.type" style="width: 120px">
                <a-select-option value="geometry">geometry</a-select-option>
                <a-select-option value="varchar">varchar</a-select-option>
                <a-select-option value="text">text</a-select-option>
              </a-select>
            </template>
            <template v-if="column.key === 'length'">
              <a-input v-model:value="record.length" />
            </template>
            <template v-if="column.key === 'refName'">
              <a-input v-model:value="record.refName" />
            </template>
            <template v-if="column.key === 'initName'">
              <a-input v-model:value="record.initName" />
            </template>
            <template v-if="column.key === 'operation'">
              <a-button shape="round" :icon="h(DeleteOutlined)" @click="deleteListItem(record)">
                删除
              </a-button>
            </template>
          </template>
        </a-table>
        <div class="insert-list-button" @click="insertListItem">新增一条</div>
        <div class="footer-button">
          <a-button @click="current--">取消</a-button>
          <a-button style="margin-left: 25px" type="primary" @click="submitDataList"
            >下一步</a-button
          >
        </div>
      </div>
      <div class="submit-success" v-show="current === 2">
        <div class="success-content">
          <CheckCircleOutlined style="font-size: 100px; color: #1fd286; margin-bottom: 30px" />
          <div style="margin-bottom: 19px; font-size: 26px">导入成功</div>
          <div><a-button type="primary">查看数据</a-button></div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { defineEmits, defineProps, ref, h, reactive, onUnmounted, toRaw } from 'vue';
  import {
    CloseCircleOutlined,
    PlusOutlined,
    DeleteOutlined,
    CheckCircleOutlined,
  } from '@ant-design/icons-vue';
  import './index.scss';
  import { InboxOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import type { UploadChangeParam } from 'ant-design-vue';
  import type { UploadProps } from 'ant-design-vue';
  // import { uploadShp } from '@/api/sys/analysis.ts'
  import axios from 'axios';
  import { v4 as uuidv4 } from 'uuid';
import { FILETYPE } from '../util' 

  const current = ref(0);
  const fileList = ref<UploadProps['fileList']>([]);
  const props = defineProps(['openModal']);
  const emits = defineEmits(['update:openModal']);
  const uploadFrom = reactive({
    serverName: '',
    spaceType: null,
    tableName: '',
  });
  const formRef = ref();
  const dataList = ref([]);
  const isShp = ref(false);
  // todo
  const columns = [
    { title: 'Shp原始字段', dataIndex: 'name', key: 'name' },
    { title: '数据类型', dataIndex: 'type', key: 'type' },
    { title: '数据长度', dataIndex: 'length', key: 'length' },
    { title: '英文名称', dataIndex: 'refName', key: 'refName' },
    { title: '中文名称', dataIndex: 'initName', key: 'initName' },
    { title: '操作', dataIndex: 'operation', key: 'operation' },
  ];
  const uploadFormRules = {
    serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
    spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' }],
    tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }],
  };

const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  console.log('beforeUpload',file)
  file.type === FILETYPE.ZIP? isShp.value = true: isShp.value = false
  fileList.value = [file];
  return false;
};

const submitShp = () => {
  formRef.value.validate().then(() => {
    if(fileList.value?.length < 1){
      message.warning('请选择shp文件')
      return
    }
    let formData = new FormData();
    const [proxyFile] = fileList.value
    let file = proxyFile.originFileObj
    formData.append('file', file)
    formData.append('serverName',uploadFrom.serverName)
    formData.append('spaceType',uploadFrom.spaceType)
    formData.append('tableName',uploadFrom.tableName)
    let url = ""
    isShp.value? url = 'http://221.2.83.254:9006/geoserver/uploadFile': url = 'http://221.2.83.254:9006/geoserver/uploadExcelFile'
    axios.post(url,formData,{headers: {'Content-Type': 'multipart/form-data;charset=UTF-8'}}).then(res => {

      
      let data = res.data.data.heads
      let showData = data.map(item => {
        return {...item,refName:item.name.toLowerCase(),initName:item.name,key:uuidv4()}
      })

      dataList.value = showData
      current.value++
    }).catch(err => {
      console.log(err)
    })
  }).catch(err => {
    console.log(err)
  })
}

const closeModal = () => {
  emits('update:openModal', false)
  formRef.value.resetFields()
  fileList.value = []
  current.value = 0
}
const deleteListItem = (record) => {
  dataList.value = dataList.value.filter(item => item.key !== record.key)
}
const insertListItem = () => {
  dataList.value.push({
    key:uuidv4(),
    name:'',
    type:'',
    length:'',
    refName:'',
    initName:'',
  })
}
const submitDataList = () => {


  let refRelation = {}

  dataList.value.forEach((item,index)=>{
    refRelation[item.refName] = item.initName;
  })

  console.log("refRelation",refRelation);

 
  let exportForm = {
      "newHeads": dataList.value,
      "refRelation": JSON.stringify(refRelation),
  }

  // console.log(dataList.value)
  // current.value++
}
</script>

<style lang="scss" scoped>
  .insert-shp-modal {
    .title {
      height: 77px;
      border-bottom: 1px solid #d7dbec;
      display: flex;
      align-items: center;
      padding-left: 63px;
      font-size: 28px;
    }
    .content {
      padding: 106px;
    }
    .steps {
      // margin-bottom: 80px;
    }
    .select-file-div {
      padding-left: 52px;
      padding-top: 80px;
      display: flex;
      .upload-div {
        width: 200px;
        height: 200px;
        background: #ffffff;
        box-shadow: 0px 52px 103px 0px rgba(192, 199, 218, 0.35);
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        .upload-dragger {
          height: 174px;
        }
      }
      .upload-span {
        margin-left: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .upload-span-content {
          font-size: 16px;
          margin-top: 8px;
        }
      }
      .upload-form {
        flex: 1;
        margin-left: 40px;
        .upload-span-button {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
    .edit-info-div {
      padding-top: 26px;
      .footer-button {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
      }
      .insert-list-button {
        background-color: #91b0ff;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        user-select: none;
        cursor: pointer;
        height: 30px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        font-weight: 400;
        transition: 1s;
      }
      .insert-list-button:hover {
        font-weight: 900;
        color: #000;
      }
    }
    .submit-success {
      .success-content {
        width: 200px;
        align-items: center;
        margin: auto;
        display: flex;
        flex-direction: column;
      }
    }
  }
</style>
