<template>
  <div class="item-content">
    <div class="procedure-div">
      <div class="procedure-0" v-if="procedure == 0">
        <div>
          <div class="upload-image"></div>
          <div class="upload-span">上传shp/Excel文件</div>
          <div class="upload-button-div">
            <a-upload
              :accept="'.xlsx,.csv,.xls,.zip'"
              :showUploadList="false"
              :custom-request="customRequest"
            >
              <a-button type="primary" class="upload-button" :icon="h(PlusOutlined)">上传</a-button>
            </a-upload>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <a-upload
        :accept="'.xlsx,.csv,.xls,.zip'"
        :showUploadList="false"
        :custom-request="customRequest"
      >
        <a-button v-if="procedure == 1" type="primary" class="operation-button">重新上传</a-button>
      </a-upload>
      <a-button class="operation-button" @click="emits('changeBatchProcessingModal',false)">关闭</a-button>
      <a-button v-if="procedure == 0" class="operation-button" @click="emits('changeBatchProcessingModal',false)">取消</a-button>
      <a-button v-if="procedure == 1" type="primary" class="operation-button" @click="submit">导入</a-button>
    </div>
  </div>
  <a-modal
      wrapClassName="batch-modal-wrap"
      class="BatchProcessingModal"
      width="1660px"
      v-model:open="mergeSourceModal"
      :footer="null"
      :closable="false"
      :destroyOnClose="true"
      style="top: 50px"
    >
    <MergeSourceModal
      :tableName="props.tableName"
      :nowData="nowData"
      :originData="originData"
      :tableColumn="props.tableColumn"
      @closemergeSourceModal="closemergeSourceModal"/>
    </a-modal>
</template>

<script setup lang="ts">
import { ref, h, defineProps, defineEmits } from "vue"
import { PlusOutlined } from '@ant-design/icons-vue';
import MergeSourceModal from './MergeSourceModal/index.vue'
import { UploadShape1, Upload, UploadExcelInsert } from '@/api/demo/BatchProcessingModal'
import { message } from "ant-design-vue";

const props = defineProps(['tableName','tableColumn'])
const emits = defineEmits(['changeBatchProcessingModal'])
const procedure = ref(0)
const mergeSourceModal = ref(false)
const nowData = ref([])
const originData = ref([])
const submit = () => {
  mergeSourceModal.value = true
}
const closemergeSourceModal = () => {
  mergeSourceModal.value = false
}
const customRequest = (file) => {
  console.log('handleCustomRequest',file)
  
  const name = file.file.name.toLowerCase();
  if (name.endsWith('.zip')){
    const formData = new FormData()
    formData.append('files', file.file)
    Upload(formData).then(res => {
      console.log(res)
      const filePath = res[0].filePath
      let params = {
        tableName: props.tableName,
        zipFilePath: filePath
      }
      UploadShape1(params).then(result => {
        if(result.nowData.length > 0){
          nowData.value = result.nowData
          originData.value = result.originData
          mergeSourceModal.value = true
        }else{
          message.success('导入成功')
        }
      })
    })
  }else{
    const formData = new FormData()
    formData.append('file', file.file)
    UploadExcelInsert({File: formData, tableName: props.tableName}).then(res => {
      console.log('res',res)
      if(res.nowData.length > 0){
        nowData.value = res.nowData
        originData.value = res.originData
        mergeSourceModal.value = true
      }else{
        message.success('导入成功')
      }
    })
  }
  // procedure.value ++
  return false
}
</script>

<style lang="scss" scoped>
.item-content{
  width: 100%;
  height: 100%;
  .procedure-div{
    height: 590px;
    .procedure-0{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .upload-image{
        width: 200px;
        height: 200px;
        background-image: url('/public/components/BatchProcessingModal/upload_icon.png');
        background-size: 100% 100%;
        margin: auto;
        margin-bottom: 10px;
      }
      .upload-span{
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 24px;
      }
      .upload-button-div{
        display: flex;
        justify-content: center;
        .upload-button{
          width: 200px;
          margin-right: 10px;
          background: linear-gradient( 270deg, #3338D2 0%, #0563D2 100%);
          border-radius: 10px;
          height: 64px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 24px;
          color: #FFFFFF;
          line-height: 33px;
        }
      }
    }
    .procedure-1{
      padding-top: 10px;
    }
  }
  .footer{
    width: 100%;
    height: 91px;
    padding-top: 31px;
    display: flex;
    align-items: center;
    justify-content: end;
    .operation-button{
      width: 169px;
      height: 60px;
      margin-right: 10px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 24px;
      line-height: 33px;
    }
  }
}
</style>