<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { UploadFilled, Loading } from '@element-plus/icons-vue'
import { splitStrLast } from '@/utils/util'
import { importStudent, getStudentProgress } from '../api'
import { upload } from '@/utils/upload'

const emit = defineEmits<Emits>()
const uploadRef = ref()
const fileList = ref([]) // 文件列表

defineProps({
  isShowImportDialog: {
    type: Boolean,
  },
})
interface Emits {
  (e: 'update:isShowImportDialog', isShowImportDialog: boolean): void
  (e: 'create'): void
}

// 取消
const handleCancel = () => {
  emit('update:isShowImportDialog', false)
}

const beforeUpload = (file: any) => {
  const suffix = splitStrLast(file.name, '.')
  if (!['xlsx', 'xls'].includes(suffix)) {
    ElMessage.warning('只能上传excel文件')
    return false
  } else {
    return true
  }
}
const loading = ref(false)

const progress = reactive({
  progress: '-',
  total: '-',
  message: '导入中',
  status: 2,
})
let timer: any = null
const fetchFileUpload = async (option: any) => {
  const file = option.file
  const url = await upload(file)
  const res = await importStudent({ url, name: file.name, size: file.size })
  const id = res.data.id
  loading.value = true
  timer && clearInterval(timer)
  timer = setInterval(() => {
    getStudentProgress({ id })
      .then((res) => {
        const data = res.data
        Object.assign(progress, data)
        if (data.status === 3 || data.status === 4) {
          clearInterval(timer)
          loading.value = false
          ElMessage({
            type: data.status === 3 ? 'success' : 'error',
            message: data.message,
          })
          emit('create')
        }
      })
      .catch(() => {
        clearInterval(timer)
        loading.value = false
      })
  }, 1000)
}
onUnmounted(() => {
  timer && clearInterval(timer)
})

const handleSubmitUpload = () => {
  uploadRef.value.submit()
}
</script>
<template>
  <el-dialog
    draggable
    :model-value="isShowImportDialog"
    :close-on-click-modal="false"
    :before-close="handleCancel"
    title="批量导入学生"
    width="500px"
    custom-class="my-dialog">
    <el-upload
      style="text-align: center"
      class="file-import"
      ref="uploadRef"
      action="#"
      accept=".xls,.xlsx"
      drag
      :auto-upload="false"
      :file-list="fileList"
      :limit="1"
      :before-upload="beforeUpload"
      :http-request="fetchFileUpload">
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">将文件拖至此处，点击上传</div>
    </el-upload>
    <div style="margin-bottom: 10px; text-align: right">
      <a
        href="/center_resource/%E5%AD%A6%E7%94%9F%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
        download="批量导入学生模板">
        <el-link type="primary">下载模板</el-link>
      </a>
    </div>
    <div class="dialog-loading" v-if="loading">
      <el-icon class="is-loading"><Loading /></el-icon>
      <p>批量导入中</p>
      <p>{{ progress.progress }}/{{ progress.total }}</p>
    </div>
    <template #footer>
      <span>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmitUpload">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.my-dialog {
  position: relative;
}
.dialog-loading {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  line-height: 30px;
  color: #fff;
}
</style>
