<template>
    <el-dialog :modal='modal' :visible.sync="localVisible" :close-on-click-modal="false" :modal-append-to-body="false" :show-close="showClose" @close="handleClose"
        :width="width">
        <div slot="title" class="dialog-header">
            <div v-if="dialogType == 1">
                <img src="../../../../../../assets/images/mount_head.png" />
                <span class="title vas">{{ title }}</span>
            </div>
            <span v-else class="dialog-header">
                <div class="cf tc vas">{{ title }}</div>
            </span>
        </div>

        <div>
            <slot></slot>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button class="btn" @click="handleClose">取消</el-button>
            <el-button type="primary" @click="confirm">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'LeapFrogFlighDialog',
    props: {
        
        modal: {
            type: Boolean,
            default: true
        },
        title: {
            type: String,
            default: ''
        },
        dialogType: {
            type: Number,
            default: 1
        },
        showClose: {
            type: Boolean,
            default: true
        },
        visible: {
            type: Boolean,
            default: false
        },
        width: {
            type: String,
            default: '30%'
        }
    },
    data() {
        return {
            localVisible: this.visible // 根据 prop 初始化本地状态
        };
    },
    watch: {
        visible(newVal) {
            this.localVisible = newVal; // 监听 prop 的变化
        }
    },
    methods: {
        handleClose() {
            this.localVisible = false;
            this.$emit('update:visible', false); // 通知父组件
        },
        confirm() {
            this.$emit('confirm');
            this.handleClose();
        }
    }
}
</script>

<style scoped lang="scss">
::v-deep {
    .el-dialog__header {
        padding: 5px;
    }

    .el-dialog__headerbtn {
        top: 12px;
    }
    .el-dialog__footer{
        text-align: center;
    }
}

.dialog-header {
    .title {
        font-size: 20px;
        font-family: YouSheBiaoTiHei;
        color: #14faff;
        line-height: 26px;
        text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
        background: linear-gradient(135deg, #e3aa77 0%, #f5cda9 38%, #f9ecd3 58%, #fcdbb1 79%, #edb07a 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.dialog-footer {
    .btn {
        color: #fff;
        background-color: #222222;
    }
}
</style>