<template>
    <ui-dialog>
        <template v-slot:header>
            <span style="font-size: 16px">{{ title }}</span>
            <i class="iconfont icon-close" @click="onNo" v-if="showCloseIcon"></i>
        </template>
        <template v-if="$slots.content">
            <slot name="content" />
        </template>
        <template v-else>
            {{ content }}
        </template>
        <template v-slot:footer>
            <ui-button type="cancel" @click="onNo" v-if="showCancelButton">{{ noText }}</ui-button>
            <ui-button :class="{ disabled: !canSubmit }" type="submit primary" @click="onOk">{{ okText }}</ui-button>
        </template>
    </ui-dialog>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'ui-window',
    props: {
        title: {
            type: String,
            default: '提示'
        },
        okText: {
            type: String,
            default: '确定'
        },
        noText: {
            type: String,
            default: '取消'
        },
        showCloseIcon: {
            type: Boolean,
            default: true
        },
        showCancelButton: {
            type: Boolean,
            default: true
        },
        canSubmit: {
            type: Boolean,
            default: true
        }
    },
    emits: ['ok', 'no'],
    setup: function(props, ctx) {
        const onNo = () => {
            ctx.emit('no')
        }
        const onOk = () => {
            ctx.emit('ok')
        }
        return {
            onNo,
            onOk
        }
    }
})
</script>
