<template>
  <div
    class="lr-bg" style="height: 80vh;padding-top: 10px;"
  >
    <el-row justify="center">
      <el-col :span="12" style="min-width: 680px;">
        <el-card style="height: 70vh;min-width: 500px;min-height: 400px">
          <h1 style="text-align: center;">校 验 会 员</h1>
          <el-upload
            ref="uploadRef"
            :limit="1"
            accept=".xlsx"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            :http-request="customHttpRequest"
            class="upload"
            drag
            name="file"
            :on-remove="handleRemove"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
              <div class="el-upload__tip text-center">
                <br>
                <span>仅允许导入xls、xlsx格式文件。</span>
                <!-- 会员 -->
                <el-link href="/file/verifyMember.xlsx" type="primary" target="_blank" download="会员校验模板.xlsx">下载模板</el-link>
              </div>
            </template>
          </el-upload>
          <br>
          <div style="text-align: center;">
            <el-button size="large" type="primary" :loading="loading" style="width: 200px" @click="submitFileForm">确 定</el-button>
          </div>
          
        </el-card>
      </el-col>
    </el-row>
    
  </div>
  
</template>

<script setup>
import { getToken } from '@/utils/auth'
import { getCurrentInstance, ref, onMounted, reactive } from 'vue'
import { saveAs } from 'file-saver'
import { ElLoading } from 'element-plus'
import axios from 'axios/dist/axios'


const { proxy } = getCurrentInstance()
const loading = ref(false)
const upload = reactive({
  // 是否禁用上传
  isUploading: false,
  // 设置上传的请求头部
  headers: { Authorization: 'Bearer ' + getToken(), 'responseType': 'blob' },
  // 上传的地址
  url: ''
})

let downloadLoadingInstance

onMounted(() => {
  upload.url = `${import.meta.env.VITE_APP_BASE_API}/person/info/checkValidByImport`
})

const customHttpRequest = (item) => {
  const formData = new FormData()
  formData.append('file', item.file)
  axios({
    url: `${import.meta.env.VITE_APP_BASE_API}/person/info/checkValidByImport`,
    method: 'POST',
    responseType: 'blob',
    data: formData,
    headers: { 'Authorization': 'Bearer ' + getToken() }
  }).then((res) => {
    if (res.data.code == 500) {
      return proxy.$modal.msgError(res.data.msg)
    } else {
      const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
      saveAs(blob, '校验结果.xlsx')
    }
  }).finally(() => {
    downloadLoadingInstance.close()
    proxy.$refs['uploadRef'].handleRemove(item)
    
    console.log(proxy.$refs['uploadRef'])
  })
}


function submitFileForm() {
  downloadLoadingInstance = ElLoading.service({
    text: '正在下载数据，请稍候',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  proxy.$refs['uploadRef'].submit()
}

const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true
}

const handleFileSuccess = (response, file, fileList) => {
  console.log(11111)
  proxy.$refs['uploadRef'].handleRemove(file)
  downloadLoadingInstance.close()
}

const handleRemove = (file) => {
  console.log(file)
}
</script>

<style lang="scss" scoped>
:deep(.upload){
  .el-upload-list__item {
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
}

.row{
  text-align: center;
  font-size: 18px;
  
}
.error{
  color: red;
}
.success{
  color: #e6a23c;
}
</style>