<template>
    <el-dialog v-model="dialogVisible" :title="title" width="460px" align-center destroy-on-close @close="close">
            <div class="message-box">
                <el-icon><WarningFilled /></el-icon>
                {{ boxText }}
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="close">取 消</el-button>
                    <el-button type="primary" @click="confirm" :class="{ 'no-click': mhtLoading }">
                        <el-icon v-if="mhtLoading" class="mht-loading" style="margin-right: 4px;">
                            <Loading />
                        </el-icon>
                        确 认
                    </el-button>
                </div>
            </template>
        </el-dialog>
</template>
<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
    boxText: '',
    title: '',
    mhtLoading: false,
    show: false
})
const dialogVisible = computed(() => {
    return props.show
})

const emits = defineEmits(['confirm', 'close'])
const confirm = ()=>{
    emits('confirm')
}
const close = () => {
    emits('close')
}
</script>
<style scoped>
    .message-box{
        padding: 0 20px;
    }
    .el-icon{
        color: var(--el-color-warning);
        font-size: 22px;
        transform: translateY(5px);
        margin-right: 5px;
    }
</style>