<template>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
               :width="dialogWidth" :show="show" :top="top||'15vh'" @close="closeDialog" v-bind="$attrs">
        <slot></slot>
        <div class="dialog-footer" :class="{'flexLayout':isShowBtn}" v-if="ifFooter" slot="footer">
            <div class="btn-group" v-if="isShowBtn">
                <el-button size="small" :type="cloaseBtn.btnType" @click="cancalHandle">{{cloaseBtn.name}}</el-button>
                <el-button size="small" :type="confirmBtn.btnType" @click="confirmHandle">{{confirmBtn.name}}</el-button>
            </div>
            <slot name="append"></slot>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "enoDialog",
        data() {
            return {
                dialogFormVisible: this.show,
                dialogWidth: this.width || "640px"
            };
        },
        watch: {
            show() {
                this.dialogFormVisible = this.show;
            }
        },
        props: {
            title: String,
            width: String,
            refForm: String,
            ifFooter: {
                type: Boolean,
                default: true
            },
            show: {
                type: Boolean,
                default: false
            },
            flag: {
                type: Boolean,
                default: false
            },
            confirmBtn: {
                type: Object,
                default () {
                    return {
                        name: "保存",
                        btnType: "primary"
                    };
                }
            },
            cloaseBtn: {
                type: Object,
                default () {
                    return {
                        name: "放弃",
                        btnType: ""
                    };
                }
            },
            isShowBtn: {
                type: Boolean,
                default: true
            },
            top: String
        },
        methods: {
            closeDialog(evt) {
                if (this.refForm) {
                    this.$parent.$refs[this.refForm].$refs.filterForm.resetFields()
                } else {
                    if (this.$slots.default) {
                        for (let i = 0; i < this.$slots.default.length; i++) {
                            if (
                                this.$slots.default[i].componentInstance &&
                                this.$slots.default[i].componentInstance.$refs.filterForm) {
                                this.$slots.default[i].componentInstance.$refs.filterForm.clearValidate()

                            }
                        }
                    }

                }

                this.$emit("update:show", false);
                this.$emit("close-click", evt);
            },
            cancalHandle() {
                if (this.flag) {
                    this._MessageBox(
                            "确定放弃吗？",
                            "放弃后，编辑的数据将不会保存",
                            ""
                        )
                        .then(() => {
                            this.dialogFormVisible = false;
                        })
                        .catch(() => {});
                } else {
                    this.dialogFormVisible = false;
                }
            },
            confirmHandle: function(evt) {
                for (let i = 0; i < this.$slots.default.length; i++) {
                    if (
                        this.$slots.default[i].componentInstance &&
                        this.$slots.default[i].componentInstance.$refs.filterForm) {
                        this.$slots.default[i].componentInstance.$refs.filterForm.validate(valid => {
                            if (valid) {
                                this.$emit("confirm-click", evt);
                            }
                        });
                        return;
                    }
                }
                this.$emit("confirm-click", evt);
            }
        }
    };
</script>

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