<template>
    <div>
        <el-dialog
            title="上传文件"
            :visible.sync="fileVisible"
            width="540px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="cancel"
        >
            <div>
                <upload
                    ref="upload"
                    :limit="limit"
                    :type="type"
                    :needInstance="true"
                    :objectPath="objectPath"
                    @attachmentChange="attachmentChange"
                ></upload>
            </div>
            <span slot="footer">
                <el-button type="primary" @click="upConfirm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import upload from "@/components/upload/upload";

export default {
    name: "fileDialog", // 文件上传弹窗
    components: { upload },
    data() {
        return {
            fileVisible: false,
            attachmentList: [], // 上传文件信息
        };
    },

    props: {
        // 限制上传的个数
        limit: {
            type: Number,
            default: 5,
        },
        type: {
            type: String,
            default: "1",
        },
        api: {
            type: String,
            default: "",
        },
        // 控制上传文件时，一组数据传的值相同
        objectPath: {
            type: String,
            default: "6",
        },
    },

    computed: {},

    methods: {
        attachmentChange(obj) {
            this.attachmentList = obj;
        },
        dataHandel(data, type) {
            if (type === "video") {
                // 通过文件类型判断是否有video文件
                let video = this.attachmentList.find((i) =>
                    i.fileType.includes("video")
                );
                if (!video) {
                    video = {};
                }
                data.videoPreview = video.videoPreview || "";
                data.videoAddress = video.fileName || "";
            } else {
                let item = this.attachmentList.find(
                    (i) =>
                        i.fileName.slice(i.fileName.lastIndexOf(".") + 1) ===
                        type
                );
                if (!item) {
                    item = {};
                }
                data[type + "Address"] = item.fileName || "";
            }
        },
        upConfirm() {
            if (this.attachmentList && this.attachmentList.length != 5) {
                this.$message.warning("请上传5个对应的文件");
                return;
            }

            let data = {};

            this.dataHandel(data, "video");
            this.dataHandel(data, "json");
            this.dataHandel(data, "osgb");
            this.dataHandel(data, "xodr");

            if (this.type === "1") {
                this.dataHandel(data, "xosc");
            } else if (this.type === "2" || this.type === "3") {
                this.dataHandel(data, "xml");
            }

            this.$axios({
                method: "post",
                url: this.api,
                data,
            }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("保存成功");
                    this.cancel();
                } else {
                    this.$message.error(res.message || "保存失败");
                }
            });
        },
        cancel() {
            // 手动清除上传列表及相关存储数据
            this.$refs.upload.$refs.upload.clearFiles();

            let len = this.attachmentList.length;
            this.$refs.upload.attachmentList.splice(0, len);

            this.attachmentList = [];

            this.fileVisible = false;
            this.$emit("fileClose");
        },
    },

    // mounted() {},
};
</script>

<style lang='less' scoped>
</style>