<template>
    <popup ref="Message" :show="show">
        <div class="ui-message ui-message-confirm">
            <div class="ui-message-header">
                <span>{{title}}</span>
            </div>
            <div class="ui-message-main">
                <div class="ui-message-icon"></div>
                <div class="ui-message-title">{{tips}}</div>
                <div class="ui-message-content" v-html="content"></div>
            </div>
            <div class="ui-message-footer" v-if="okLink">
                <a
                    :href="okLink"
                    target="_blank"
                    class="ui-button link submit"
                    @click="onOk"
                >{{okText}}</a>
                <a
                    :href="noLink"
                    target="_blank"
                    class="ui-button link cancel"
                    @click="onNo"
                >{{noText}}</a>
            </div>
            <div v-else class="ui-message-footer">
                <button class="ui-button submit" @click="onOk">{{okText}}</button>
                <button class="ui-button cancel" @click="onNo">{{noText}}</button>
            </div>
        </div>
    </popup>
</template>
<script>
import Popup from "../popup";
export default {
    name: "ui-confirm",
    components: {
        Popup
    },
    data() {
        return {
            show: false,
            showCloseIcon: true,
            duration: 0,
            title: "提示",
            tips: "",
            content: "",
            okText: "确定",
            noText: "放弃",
            okLink: null,
            noLink: null,
            ok: null,
            no: null
        };
    },
    methods: {
        onOk() {
            if (this.ok && this.ok(this) === false) {
                return;
            }
            this.onClose();
        },
        onNo() {
            this.no && this.no();
            this.onClose();
        },
        onClose() {
            setTimeout(() => {
                this.show = false;
                document.body.removeChild(this.$el);
                this.$destroy();
            }, this.duration);
        }
    }
};
</script>
<style lang="less" scoped>
.ui-message-footer {
    .ui-button {
        width: 170px;
        font-size: 12px;
    }
}

[show-mode="mobile"],
[edit-mode="mobile"] {
    .ui-message-footer {
        .ui-button {
            font-size: 0.3rem !important;
        }
    }
}
</style>