<template>
    <div class="upload-container">
        {{ fileName }}
        <div class="mask" @dragover.prevent @drop="handleDrop">
            <el-upload class="upload" drag :before-upload="BeforeUpload">
                <el-button type="primary">点击或拖拽上传文件</el-button>
            </el-upload>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useCanvasImgStore } from '../store/CanvasImg';
import { usePdfProperty } from '../store/PdfProperty';
import { storeToRefs } from 'pinia'
import { fabric } from 'fabric';
import { ref, onMounted } from 'vue'

const fileName = ref("")

const props = defineProps({
    fileFormats: String, // 定义名字属性
    isConvert: Boolean
});

const image_format = ['.jpg', '.jpeg', '.png', '.bmp']
const pdf_format = ['.pdf']

let support_format: any = []

onMounted(async () => {
    if (props.fileFormats == 'all') {
        support_format = image_format.concat(pdf_format)
    } else if (props.fileFormats == 'pdf') {
        support_format = pdf_format
    } else {
        support_format = image_format.concat(pdf_format)
    }
});

const c_img = useCanvasImgStore();
const { show_image, show_canvas, fabric_canvas, input_file } = storeToRefs(c_img);
const pdf_property = usePdfProperty();
const { is_pdf, pdf_source } = storeToRefs(pdf_property);

function handleDrop(e: any) {
    e.preventDefault()
    // console.log(support_format)
    const files = e.dataTransfer.files
    if (files.length > 0) {
        const file = files[0]
        const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
        if (support_format.includes(post_)) {
            UpdateFile(file)
        } else {
            alert('不支持的文件格式！')
        }
    }
}

const BeforeUpload = (file: File): boolean | Promise<boolean> => {
    const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
    if (support_format.includes(post_)) {
        UpdateFile(file)
    } else {
        alert('不支持的文件格式！')
    }
    return true;
}

function UpdateFile(file: File) {
    if (fabric_canvas.value != null) {
        fabric_canvas.value.dispose();
        fabric_canvas.value = null;
    }
    fileName.value = file.name;
    const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
    if (post_ == ".pdf") {
        if (props.isConvert == true) {
            input_file.value = file;
        } else {
            is_pdf.value = true;
            pdf_source.value = URL.createObjectURL(file);
        }
    } else if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
        is_pdf.value = false
        if (show_image.value != null && show_canvas.value != null) {
            show_image.value.src = URL.createObjectURL(file);
            show_image.value.onload = () => {
                show_canvas.value.width = show_image.value.width;
                show_canvas.value.height = show_image.value.height;
                fabric_canvas.value = new fabric.Canvas(show_canvas.value);
                fabric_canvas.value.clear()
            }
        }
        input_file.value = file;
    }
}
</script>

<style scoped lang="less">
.upload-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: gray;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.upload {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>