<template>
    <el-upload
        ref="uploadRef" :accept="acceptData" :action="api + actionData" :auto-upload="autoUpload"
        :before-upload="beforeUpload" :data="uploadData" :disabled="uploadDisabled" :headers="getTokenHeader()" :limit="1"
        :on-change="uploadChange"
        :on-error="uploadError" :on-exceed="uploadExceed" :on-progress="uploadprogress"
        :on-success="uploadSuccess" :show-file-list="false" class="hc-upload-border approach" drag
    >
        <div v-loading="uploadDisabled" class="hc-upload-loading upload-file-info" element-loading-text="上传中...">
            <template v-if="uploadFileInfo?.name">
                <HcIcon class="upload-file-icon" name="file-text" />
                <div class="upload-file-name">{{ uploadFileInfo?.name }}</div>
            </template>
            <template v-else>
                <HcIcon class="upload-icon" name="upload-cloud" />
                <div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em> 并上传</div>
            </template>
        </div>

        <template #tip>
            <div class="el-upload__tip">允许格式：{{ formatTip }}， 文件大小 小于 {{ size }}MB</div>
        </template>
    </el-upload>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getTokenHeader } from '~src/api/request/header'
import { isFileSize } from 'js-fast-way'
import { genFileId } from 'element-plus'

const props = defineProps({
    datas: {
        type: Object,
        default: () => ({}),
    },
    action: {
        type: String,
        default: 'mobilization/import',
    },
    accept: {
        type: String,
        default: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    },
    size: {
        type: Number,
        default: 20,
    },
    formatTip: {
        type: String,
        default: 'excel',
    },
    autoUpload: {
        type: Boolean,
        default: false,
    },
    api: {
        type: String,
        default: '/api/blade-resource/oss/',
    },
    
})

//事件
const emit = defineEmits(['progress', 'finished', 'change'])
//变量
const uploadRef = ref(null)
const uploadData = ref(props.datas)
const actionData = ref(props.action)
const acceptData = ref(props.accept)
const uploadFileInfo = ref({})
const uploadDisabled = ref(false)

// const api = '/api/blade-business/material/';


//监听
watch(() => [
    props.datas,
    props.action,
    props.accept,
], ([datas, action, accept]) => {
    uploadData.value = datas
    actionData.value = action
    acceptData.value = accept
})

//上传前
const beforeUpload = async (file) => {
    if (isFileSize(file?.size, props.size)) {
        return true
    } else {
        window?.$message?.warning('文件大小, 不能过' + props.size + 'M!')
        return false
    }
}

//超出限制时
const uploadExceed = (files) => {
    uploadRef.value?.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    uploadRef.value?.handleStart(file)
}

//上传中
const uploadprogress = () => {
    uploadDisabled.value = true
    emit('progress', true)
}

//上传完成
const uploadSuccess = ({ code, data }) => {
    uploadDisabled.value = false
    emit('progress', false)
    if (code === 200) {
        window?.$message?.success('上传成功')
        emit('finished', data)
        uploadFileInfo.value.name = ''
        clearFiles()
    } else {
        window?.$message?.error('上传失败')
    }
}

//上传失败
const uploadError = (err) => {
    let errmsg = JSON.parse(err.message).msg
    uploadDisabled.value = false
    emit('progress', false)
    window?.$message?.error(errmsg)
}

//文件改变时
const uploadChange = (file) => {
    uploadFileInfo.value = file
    emit('change', file)
}

const submit = () => {
    uploadRef.value?.submit()
}

const clearFiles = () => {
    uploadRef.value?.clearFiles()
}


// 暴露出去
defineExpose({
    submit,
    clearFiles,
  
})
</script>

<style lang="scss">
.hc-upload-border.approach {
    .el-upload-dragger {
        padding: 24px;
    }
    .hc-upload-loading.upload-file-info {
        .hc-icon-i {
            font-size: 40px;
        }
        .upload-icon {
            color: var(--el-text-color-placeholder);
        }
        .upload-file-icon {
            color: var(--el-color-primary-light-5);
        }
        .el-upload__text {
            margin-top: 10px;
        }
        .upload-file-name {
            margin-top: 10px;
            font-size: 14px;
            text-align: center;
            color: var(--el-color-primary);
        }
    }
    .el-upload__tip {
        font-size: 14px;
        margin-top: 16px;
        color: var(--el-text-color-placeholder);
    }
}
</style>
