<template>
    <el-upload ref="uploadRef" :accept="accept" :action="action" :auto-upload="false"
               :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" class="hc-division-upload">
        <template #trigger>
            <el-button :disabled="uploadDisabled" :loading="uploadDisabled" hc-btn type="primary">
                <HcIcon name="file-add"/>
                <span>选择文件</span>
            </el-button>
        </template>
    </el-upload>
</template>

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

const props = defineProps({
    contractId: {
        type: [String, Number],
        default: ''
    },
    type: {
        type: [Number, String],
        default: 0
    },
    isSplicingNumber: {
        type: [Number, String],
        default: 0
    },
    primaryKeyId: {
        type: [Number, String],
        default: 0
    },
})

//变量
const uploadRef = ref(null)
const uploadData = ref({})
const uploadDisabled = ref(false)

const action = '/api/blade-manager/wbsTreeContract/import-wbs-contract';
const accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel';

//监听
watch(() => [
    props.contractId,
    props.type,
    props.isSplicingNumber,
    props.primaryKeyId
], ([contractId, type, isSplicingNumber, pid]) => {
    setUploadData(contractId, type, isSplicingNumber, pid)
})

//渲染完成
onMounted(() => {
    setUploadData(props.contractId, props.type, props.isSplicingNumber, props.primaryKeyId)
})

//设置附加参数
const setUploadData = (contractId, type, isSplicingNumber, primaryKeyId) => {
    uploadData.value = {contractId, type, isSplicingNumber, primaryKeyId}
}


//事件
const emit = defineEmits(['progress', 'finished', 'change'])

//上传前
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
    if (res.code === 200) {
        emit('progress', false)
        emit('finished', {
            type: 'success',
            data: getObjValue(res?.data)
        })
    } else {
        emit('progress', false)
        window?.$message?.error(res.msg);
    }
}

//上传失败
const uploadError = (res) => {
    uploadDisabled.value = false
    emit('progress', false)
    emit('finished', {
        type: 'error',
        data: getObjValue(res?.data)
    })
    window?.$message?.error(res.msg);
}

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

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

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

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

<style lang="scss">
.hc-division-upload {
    position: relative;
    display: flex;
    align-items: center;
    .el-upload-list {
        margin: 0;
        .el-upload-list__item {
            margin: 0;
            font-size: 16px;
            color: var(--el-color-primary);
            .el-upload-list__item-info {
                width: 100%;
                margin-left: 20px;
                .el-upload-list__item-name {
                    padding: 0;
                    color: inherit;
                    font-size: inherit;
                    .el-icon {
                        display: none !important;
                    }
                }
            }
            .el-upload-list__item-status-label, .el-icon--close, .el-icon--close-tip {
                display: none !important;
            }
        }
    }
}
</style>
