<template>
  <div v-if="show">
    <el-dialog v-model="show" width="600" title="批量调动">
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        class="upload"
        drag
        name="excel"
      >
        <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/memberTransfer.xls" type="primary" target="_blank">下载模板</el-link>
          </div>
        </template>
      </el-upload>
      <br>
      <div style="text-align: center;">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
      </div>
      <ErrorVue ref="ErrorVueRef" />
    </el-dialog>

  </div>

</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { getToken } from '@/utils/auth'
import { getCurrentInstance, ref } from 'vue'
import ErrorVue from '@/views/member/Error.vue'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['backFN'])
const show = ref(false)
const rangeId = ref()
const upload = reactive({
  // 是否禁用上传
  isUploading: false,
  // 设置上传的请求头部
  headers: { Authorization: 'Bearer ' + getToken() },
  // 上传的地址
  url: ''
})

function open(row) {
  show.value = true
  rangeId.value = row
  upload.url = `${import.meta.env.VITE_APP_BASE_API}/person/transfer/importTransferToRange?rangeId=${rangeId.value}`
}

function submitFileForm() {
  proxy.$refs['uploadRef'].submit()
}

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

const handleFileSuccess = (response, file, fileList) => {
  // show.value = false
  upload.isUploading = false
  proxy.$refs['uploadRef'].handleRemove(file)
  if (response.code == 200) {
    if (response.data.result == 0) {
      // 导入失败
      emit('backFN', response.data.rangeId || '-1')
      rangeId.value = response.data.rangeId || '-1'
      upload.url = `${import.meta.env.VITE_APP_BASE_API}/person/transfer/importTransferToRange?rangeId=${response.data.rangeId || '-1'}`
      proxy.$refs['ErrorVueRef'].open(response.data.list)
    } else {
      emit('backFN', response.data.rangeId || '-1')
      upload.url = `${import.meta.env.VITE_APP_BASE_API}/person/transfer/importTransferToRange?rangeId=${response.data.rangeId || '-1'}`
      rangeId.value = response.data.rangeId || '-1'
      proxy.$alert(
        // 导入成功
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          '</div>',
        '导入结果',
        { dangerouslyUseHTMLString: true }
      )
    }
  } else {
    proxy.$alert(
      // 导入成功
      "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
        response.msg +
        '</div>',
      '导入结果',
      { dangerouslyUseHTMLString: true }
    )
  }
}

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

</style>