<template>
    <ui-dialog>
        <template v-slot:header>
            <span>{{ title }}</span>
            <i v-if="showCloseIcon" class="iconfont icon-close" @click="close"></i>
        </template>
        <span v-html="content"></span>
        <template v-slot:footer v-if="showFooter">
            <ui-button type="submit" @click="close">{{ okText }}</ui-button>
        </template>
    </ui-dialog>
</template>
<script>
import { defineComponent } from 'vue'
import { isFunction, omit } from '../../utils'
export default defineComponent({
    name: 'ui-alert',
    props: {
        showCloseIcon: {
            type: Boolean,
            default: true,
        },
        showFooter: {
            type: Boolean,
            default: true,
        },
        title: {
            type: String,
            default: '提示',
        },
        okText: {
            type: String,
            default: '确定',
        },
        func: Function,
        content: String,
        destroy: Function,
    },
    setup: function (props, ctx) {
        const close = () => {
            if (isFunction(props.func) && props.func() === false) {
                return
            }
            isFunction(props.destroy) && props.destroy()
        }
        return {
            ...omit(props, 'destroy', 'func'),
            close,
        }
    },
})
</script>
