<template>
    <popup :show="true" :can-close="canClose" @close="$emit('close')">
        <div class="ui-message ui-message-confirm" :style="setStyle" @click.stop>
            <div class="ui-message-header">
                <span>{{title}}</span>
                <span @click="onNo" v-if="showCloseIcon">
                    <i class="iconfont icon-close"></i>
                </span>
            </div>
            <div class="ui-message-main">
                <slot></slot>
            </div>
            <div class="ui-message-footer">
                <button v-if="ok" class="ui-button submit" @click="onOk">{{okText}}</button>
                <button v-if="no" class="ui-button cancel" @click="onNo">{{noText}}</button>
            </div>
        </div>
    </popup>
</template>
<script>
import {i18n} from "@/lang"
import Popup from "../popup";
export default {
    name: "ui-confirm",
    props:{
        canClose:Boolean,
        setStyle:{
            type:Object,
            default:function(){
                return {}
            }
        },
    },
    components: {
        Popup
    },
    data() {
        return {
            showCloseIcon: false,
            duration: 0,
            title: i18n.t("tips.title"),
            tips: "",
            content: "",
            okText: i18n.t("common.set"),
            noText: i18n.t("common.giveup"),
            ok: null,
            no: null
        };
    },
    methods: {
        onOk() {
            if (this.ok && this.ok(this) === false) {
                return;
            }
            this.onClose();
        },
        onNo() {
            this.no && this.no();
            this.onClose();
        },
        onClose() {
            this.$emit("close");
        }
    }
};
</script>