<template>
  <div class="content">
    <a-upload
      v-model:file-list="fileList"
      :customRequest="handleCustomRequest"
      @change="handleChange"
    >
      <a-button type="primary">点击上传</a-button>
      <template #itemRender="{ file }">
        <div class="upload-file-item">
          <div style="display: flex; justify-content: space-between;">
            <div>
              <FileTextOutlined  style="margin-right: 5px"/>
              {{  file.name }}
            </div>
            <div>
              <span style="color: #52c41a;">{{ file.success? file.success: 0 }}</span>
              / 
              <span style="color: #f52222;">{{ file.fail? file.fail: 0}}</span>
              <span style="color: #f52222;margin: 0 5px" v-if="file.fail" @click="showErrorFunction(file.failData)">查看错误</span>
            </div>
          </div>
          <a-progress :percent="file.percent" />
        </div>
      </template>
    </a-upload>
    <a-button class="downloadTemplateButton" @click="downloadTemplate">下载模板</a-button>
  </div>
  <ShowErrorList v-model:open="showError" :data="showErrorList"/>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from "vue"
import { DownloadTemplate, uploadFile, uploadData } from '@/api/formrender/index';
import { FileTextOutlined } from '@ant-design/icons-vue';
import ShowErrorList from './ShowErrorList/index.vue'

const props = defineProps(["open", "paramsId", "pkey"])
const emits = defineEmits(["update:open"])
const fileList = ref([])
const showError = ref(false)
const showErrorList = ref([])
const handleChange = ({ file, fileList }) => {
  if (file.status !== 'uploading') {
    console.log(file, fileList);
  }
};

const downloadTemplate = () => {
  DownloadTemplate(props.paramsId).then(res => {
    console.log(res)
    const content = res;
    const blob = new Blob([content]);
    const fileName = '数据模板导出.xls';
    if ('download' in document.createElement('a')) {
      // 非IE下载
      const elink = document.createElement('a');
      elink.download = fileName;
      elink.style.display = 'none';
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName);
    }
  })
}
const handleCustomRequest = (file) => {
  const formData = new FormData();
  formData.append('files', file.file);
  uploadFile(formData).then(res => {
    console.log(res)
    let params = {
      id: props.paramsId,
      pkey: props.pkey,
      path: res[0].filePath
    }
    file.onSuccess(res, file); 
    uploadData(params).then(response => {
      console.log('response',response)
      fileList.value.forEach(item => {
        if(item.uid === file.file.uid){
          item.success = response.success,
          item.fail = response.fail,
          item.failData = response.data
        }
      })
    })
  }).catch(err => {
    file.onError(err); 
  })
}
const showErrorFunction = (list) => {
  showError.value = true
  showErrorList.value = list
}
</script>

<style lang="scss" scoped>
.content{
  padding: 10px;
  height: 261px;
  position: relative;
  .button-box{
    display: flex;
    justify-content: space-between;
  }
  .downloadTemplateButton{
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .upload-file-item{
    cursor: pointer;
  }
  .upload-file-item:hover{
    background-color: #f5f5f5;
    color: #1890ff;
  }
}
</style>
