<template>
    <el-button @click="show = true"
        >上传
        <template #icon>
            <icon name="el-icon-upload-filled" />
        </template>
    </el-button>

    <el-dialog
        title="上传佐证材料"
        v-model="show"
        width="60vw"
        :close-on-click-modal="false"
        top="2vh"
    >
        <el-upload
            drag
            multiple
            :action="`${BASE_PATH}/file/upload`"
            :headers="{ Authorization: getToken() }"
            :before-upload="beforeUpload"
            @progress="uploadProgress"
            @success="handleSuccess"
            @error="handleError"
            :show-file-list="false"
        >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                <div>将文件拖拽到此处或<em>点击上传</em></div>
                <div class="text-small">文件类型支持图片/录音/MP4/PDF/WORD/EXCEL/压缩文件，文件大小限制为 100MB</div>
                <div class="text-small">如遇到无法正常上传的情况，请将文件压缩之后再上传</div>
            </div>
        </el-upload>
        <h4>未分类文件</h4>
        <div style="min-height: 60px">
            <div
                class="flex between mb-10"
                v-for="(item, index) in fileList.filter(
                    (item) => !item.fileClassId
                )"
                :key="index"
            >
                <div class="flex gap v-center">
                    <div v-if="!item.loading">
                        <template
                            v-if="getFileType(item.fileName) === FileType.IMG"
                        >
                            <div
                                class="img-box"
                                :style="{
                                    backgroundImage: `url(${BASE_PATH}/file/stream/${item.filePath})`,
                                }"
                                @click="filePreview(item)"
                            ></div>
                        </template>
                        <template v-else>
                            <icon
                                :name="getIconName(item.fileName)"
                                :size="40"
                            />
                        </template>
                    </div>
                    <el-progress
                        type="circle"
                        :percentage="item.percent"
                        :width="40"
                        color="var(--primary-color)"
                        v-else
                    ></el-progress>
                    <span>{{ item.fileName }}</span>
                </div>
                <div class="flex gap v-center">
                    <el-select
                        style="width: 200px"
                        v-model="item.classId"
                        clearable
                        v-if="fileClasss.length"
                    >
                        <el-option
                            v-for="item in fileClasss"
                            :value="item.id"
                            :label="item.classTitle"
                            :key="item"
                        />
                    </el-select>
                    <el-button
                        type="primary"
                        plain
                        @click="handleUpdateFileClass(item)"
                        :disabled="!item.classId"
                        v-if="fileClasss.length"
                        
                        >修改文件分类</el-button
                    >
                    <el-button type="danger" @click="remove(item)"
                        >删除文件</el-button
                    >
                </div>
            </div>
        </div>
        <div v-if="fileClasss.length">
            <h4>已分类文件</h4>
            <el-scrollbar max-height="400px">
                <el-row :gutter="20">
                    <el-col
                        :span="12"
                        v-for="item in fileClasss"
                        :key="item"
                        class="file-class-item"
                    >
                        <header class="text-primary">
                            {{ item.classTitle }}
                        </header>
                        <div style="min-height: 60px">
                            <div
                                class="flex between mb-8 file-list-item file-list-item_active"
                                v-for="(item, index) in fileList.filter(
                                    (file) => file.fileClassId === item.id
                                )"
                                :key="index"
                            >
                                <div class="flex gap v-center">
                                    <div v-if="!item.loading">
                                        <template
                                            v-if="
                                                getFileType(item.fileName) ===
                                                FileType.IMG
                                            "
                                        >
                                            <div
                                                class="img-box"
                                                :style="{
                                                    backgroundImage: `url(${BASE_PATH}/file/stream/${item.filePath})`,
                                                }"
                                                @click="filePreview(item)"
                                            ></div>
                                        </template>
                                        <template v-else>
                                            <icon
                                                :name="
                                                    getIconName(item.fileName)
                                                "
                                                :size="40"
                                            />
                                        </template>
                                    </div>
                                    <el-progress
                                        type="circle"
                                        :percentage="item.percent"
                                        :width="40"
                                        color="var(--primary-color)"
                                        v-else
                                    ></el-progress>
                                    <span>{{ item.fileName }}</span>
                                </div>
                                <div class="flex gap v-center">
                                    <el-button
                                        type="info"
                                        plain
                                        @click="cancelFileClass(item)"
                                        size="small"
                                        >取消分类</el-button
                                    >
                                    <el-button
                                        type="danger"
                                        @click="remove(item)"
                                        size="small"
                                        >删除文件</el-button
                                    >
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-scrollbar>
        </div>
        <footer class="flex end mt-20">
            <el-button type="primary" size="large" @click="handleSubmit"
                >确认佐证材料</el-button
            >
        </footer>
    </el-dialog>
</template>
<script setup>
import { getToken } from "@/utils/token";
import { BASE_PATH } from "@/api/request";
import feedback from "@/utils/feedback";
import { getIconName, getFileType } from "@/utils/util";
import { ProblemSources } from "@/enums/dictEnums";
import { FileType } from "@/enums/fileEnums";

const props = defineProps({
    files: {
        type: Array,
        default: () => [],
    },
    problemSourcesCode: {
        type: String,
        default: "",
    },
});

const emit = defineEmits(["update:files"]);

const show = ref(false);
const fileList = ref(props.files);
watch(() => props.files, (val => {
    fileList.value = val
}))

const fileClasss = ref([]);
if (props.problemSourcesCode === ProblemSources.JWDC) {
    fileClasss.value = [
        {
            id: 6,
            classTitle: "处理反馈表",
            classRemarks: "",
        },
        {
            id: 1,
            classTitle: "容错免责样本申请表",
            classRemarks: "",
        },
        {
            id: 2,
            classTitle:
                "针对群众不满意原因，提供无过错的音视频、微信或短信截图等证明资料",
            classRemarks: "",
        },
        {
            id: 3,
            classTitle: "110、122接处警开始、结束及处置过程中的视频截图",
            classRemarks: "",
        },
        {
            id: 4,
            classTitle: "自动回访不满意后所对的回访录音",
            classRemarks: "",
        },
        {
            id: 5,
            classTitle: "单位/个人所做其他工作",
            classRemarks: "",
        },
    ];
}

function beforeUpload(file) {
    fileList.value.push({
        uid: file.uid,
        percent: 0,
        loading: true,
        fileName: file.name,
    });
}

function uploadProgress(progressEvent, file) {
    const filterFiles = fileList.value.filter((item) => file.uid === item.uid);
    if (filterFiles.length) {
        filterFiles[0].percent = parseInt(progressEvent.percent);
    }
}

function handleSuccess(data, file) {
    if (data.code !== 200) {
        feedback.msgError("上传失败！若重复上传失败请联系系统管理员");
        fileList.value.splice(fileList.value.findIndex((item) => file.uid === item.uid), 1)
        return;
    }
    const filterFiles = fileList.value.filter((item) => file.uid === item.uid);
    if (filterFiles.length) {
        filterFiles[0].fileName = data.data.fileName;
        filterFiles[0].filePath = data.data.filePath;
        filterFiles[0].loading = false;
    }
}

function handleError(e) {
    console.log(e);
    feedback.msgError("上传失败！若重复上传失败请联系系统管理员");
}

function handleUpdateFileClass(item) {
    item.fileClassId = item.classId;
}

function cancelFileClass(item) {
    item.fileClassId = null;
}

function handleSubmit() {
    emit(
        "update:files",
        fileList.value.filter((item) => item.filePath)
    );
    show.value = false;
}

function remove(item) {
    fileList.value.splice(fileList.value.indexOf(item), 1);
}
</script>
<style lang="scss" scoped>
h4 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.file-class-item {
    margin-bottom: 20px;
    header {
        padding: 4px 0;
    }
}
.file-list-item {
    padding: 10px;
}
.file-list-item_active {
    background: #f1f3ff;
}
.img-box {
    width: 40px;
    height: 40px;
    background-position: center;
    background-size: cover;
}
</style>