<template>
    <el-upload ref="uploadRef" :accept="accept" :action="action"
               :before-remove="uploadBeforeRemove" :before-upload="beforeUpload" :data="uploadData" :disabled="uploadDisabled" :file-list="fileListData"
               :headers="getTokenHeader()" :limit="1" :on-error="uploadError"
               :on-exceed="uploadExceed" :on-preview="uploadPreview" :on-progress="uploadprogress" :on-success="uploadSuccess"
               class="first-item-upload" drag>
        <div v-loading="uploadDisabled" class="hc-upload-loading" element-loading-text="上传中...">
            <HcIcon name="backup" ui="text-5xl mt-4"/>
            <div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em> 并上传</div>
        </div>
        <template #tip>
            <div class="el-upload__tip" style="font-size: 14px;">允许格式：jpg/png/pdf/excel/word， 文件大小 小于 60MB
            </div>
        </template>
    </el-upload>
</template>

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

const props = defineProps({
    fileList: {
        type: Array,
        default: () => ([])
    },
    pkeyId: {
        type: [String, Number],
        default: ''
    },
})

//变量
const uploadRef = ref(null)
const fileListData = ref(props.fileList)
const uploadDisabled = ref(false)

const uploadData = ref({})
const action = '/api/blade-manager/first/add-first-buss-file'
const accept = 'image/png,image/jpg,image/jpeg,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/pdf,.doc,.docx,application/msword'

//监听
watch(() => [
    props.fileList,
    props.pkeyId,
], ([fileList, pkeyId]) => {
    fileListData.value = fileList
    uploadData.value = {
        pkeyId: pkeyId + ''
    }
})

//渲染完成
nextTick(() => {
    uploadData.value = {
        pkeyId: props.pkeyId + ''
    }
})

//事件
const emit = defineEmits(['finish', 'progress', 'preview'])

//上传前
const beforeUpload = async (file) => {
    if (isFileSize(file?.size, 60)) {
        return true;
    } else {
        window?.$message?.warning('文件大小, 不能过60M!');
        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 = (res) => {
    uploadDisabled.value = false
    emit('finish', {type: 'success', res})
    emit('progress', false)
}

//上传失败
const uploadError = () => {
    uploadDisabled.value = false
    emit('finish', {type: 'error'})
    emit('progress', false)
}

//移除文件
const uploadBeforeRemove = () => {
    return false
}

//预览
const uploadPreview = (files) => {
    emit('preview', files)
}
</script>

<style lang="scss">
.first-item-upload {
    position: relative;
    .el-upload-list {
        position: absolute;
        margin: 0;
        width: 100%;
        bottom: 28px;
        padding: 0 1px;
        .el-upload-list__item {
            background: var(--el-color-primary-light-9);
            color: var(--el-color-primary);
            border-radius: 0 0 4px 4px;
            font-size: 14px;
            margin-bottom: 0;
            width: 100%;
            .el-upload-list__item-info {
                margin-left: 10px;
                height: 30px;
                .el-upload-list__item-name {
                    color: inherit;
                    font-size: inherit;
                    .el-icon {
                        color: inherit;
                    }
                }
            }
            .el-icon--close, .el-icon--close-tip {
                display: none !important;
            }
        }
    }
    .el-upload__tip {
        margin-left: 5px;
    }
}
</style>

