<template>
    <el-dialog v-model="visible" :title="titleMap[mode]" @closed="$emit('closed', fileIsDel)">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="模版名称" prop="templateName">
                        <el-input v-model="form.templateName" placeholder="请输入模版名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="模版类型" prop="refType">
                        <el-select v-model="form.refType" placeholder="请选择模版类型">
                            <el-option v-for="(label, key) in typeDic" :key="key" :label="label" :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="模版文件" prop="fileList">
                        <yhUpload v-model="form.fileList" v-model:isUpload="isUpload" accept=".xlsx, .xls" :limit="1" @updateTable="fileIsDel = true">
                            <el-button type="primary" icon="upload" size="small"></el-button>
                        </yhUpload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <el-button :loading="isSaving" type="primary" :disabled="isUpload" @click="submit">保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
import API from "@/api/system/template";
import { typeDic } from "./main";
import yhUpload from "@/components/Upload/index.vue";

export default {
    emits: ["success", "closed"],
    
    components: {
        yhUpload
    },

    data() {
        return {
            typeDic,
            visible: false,
            isSaving: false,
            isUpload: false,
            fileIsDel: false,

            mode: "add",
            titleMap: {
                add: "新增",
                edit: "修改"
            },
            form: {
                id: null,
                templateName: null,
                refType: null,
                templateUrl: null,
                fileList: []
            },

            rules: {
                templateName: [{ required: true, message: "请输入模版名称" }],
                refType: [{ required: true, message: "请选择模版类型" }],
                fileList: [{ required: true, message: "请上传模版文件" }]
            }
        }
    },

    methods: {
        open(mode = "add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },

        setData(data) {
            for (const key in this.form) {
                if (key == "fileList") this.form[key] = data[key].map(file => ({ ...file, name: file.originalName, path: file.fileDomain + "/" + file.fileName }));
                else this.form[key] = data[key] || null;
            }
        },

        // 表单提交方法
        submit() {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                    this.isSaving = true;
                    this.form.templateUrl = this.form.fileList[0].path;

                    API[this.mode](this.form).then(res => {
                        this.isSaving = false;
                        if (res.code === 200) {
                            ElMessage.success("操作成功");
                            this.visible = false;
                            this.fileIsDel = false;
                            this.$emit("success");
                        } else ElMessage.error(res.msg);
                    }).catch(() => this.isSaving = false);
                } else {
                    return false;
                }
            });
        }
    }
}
</script>