<template>
    <div class="physical">
        <el-upload
            class="pdf"
            ref="uploadPdf"
            action=""
            :limit="1"
            :auto-upload="false"
            @change="(file: UploadFile, fileList: UploadFiles) => startUpload(file, fileList, 'pdf', fileMaxSize)"
            :before-remove="(file: UploadFile, fileList: UploadFiles) => beforeRemove(file, fileList, 'pdf')"
            @exceed="(files: File[], uploadFiles: UploadUserFile[]) => handleExceed(files, uploadFiles, 'pdf')"
            @preview="(file: UploadFile) => previewPdf(file)"
        >
            <template #trigger>
                <el-button type="primary">上传pdf</el-button>
            </template>
        </el-upload>

        <el-upload
            class="avatar-uploader"
            :class="{ hide: isHideReportUploadBtn }"
            v-model:file-list="fileUploadList['report']"
            action=""
            multiple
            list-type="picture-card"
            :auto-upload="false"
            :limit="9"
            @change="(file: UploadFile, fileList: UploadFiles) => startUpload(file, fileList, 'report', imageMaxSize)"
            :before-remove="(file: UploadFile, fileList: UploadFiles) => beforeRemove(file, fileList, 'report')"
            @preview="(file: UploadFile) => handlePreview(file, 'report')"
            @exceed="(files: File[], uploadFiles: UploadUserFile[]) => handleExceed(files, uploadFiles, 'report')"
        >
            <el-icon class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload>
    </div>
    <el-image-viewer
        v-if="imgViewerVisible"
        :urlList="previewSrcList"
        :initial-index="viewerIndex"
        @close="closeImageViewer"
        :hide-on-click-modal="true"
    />
    <PreviewPdfDialog ref="pdfDialog" />
</template>

<script setup lang="ts">
import type { UploadFile, UploadFiles, UploadUserFile } from 'element-plus'
import { ElImageViewer } from 'element-plus'
import PreviewPdfDialog from './previewPdfDialog.vue'
import { useUploadMoreAction } from '@/hooks/useCommon'
import type { PropType } from 'vue'

interface FileProps {
    pdf: UploadFile[]
    report: UploadFile[]
}
const imageMaxSize = 1024 * 1024 * 2 //图片限制大小
const fileMaxSize = 1024 * 1024 * 5 //文件限制大小

const props = defineProps({
    files: Object as PropType<FileProps>
})
const emit = defineEmits(['update:files'])

const isHideReportUploadBtn = computed(() => fileUploadList.value['report'].length >= 9)

const {
    fileUploadList,
    imgViewerVisible,
    viewerIndex,
    previewSrcList,
    startUpload,
    beforeRemove,
    handlePreview,
    closeImageViewer,
    handleExceed,
    previewPdf,
    pdfDialog,
    uploadPdf
} = useUploadMoreAction()

watch(
    () => unref(fileUploadList),
    () => {
        emit('update:files', unref(fileUploadList))
    },
    { deep: true }
)
</script>

<style lang="scss" scoped>
.physical {
    display: flex;
    flex-direction: column;

    .avatar-uploader {
        :deep(.el-upload) {
            border: 1px dashed #dcdfe6;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: 0.2s;

            &:hover {
                border-color: #409eff;
            }

            .el-icon {
                &.avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 178px;
                    height: 178px;
                    text-align: center;
                }
            }
        }

        &.hide {
            :deep(.el-upload) {
                display: none;
            }
        }
    }
}
</style>
