<template>
    <transition name="hanzo-dialog-bounce" v-if="shouldRender">
        <div v-show="value" :class="[classes(), className]">
            <div v-if="title" :class="classes('header', { isolated: !message && !children })">{{ title }}</div>
            <slot>
                <div v-if="message" :class="classes('content')">
                    <div
                        v-html="message"
                        :class="classes('message', { 'has-title': title, [messageAlign]: messageAlign })"
                    />
                </div>
            </slot>
            <div :class="['hanzo-hairline--top', classes('footer', { buttons: hasButtons })]">
                <h-button
                    v-if="showCancelButton"
                    size="large"
                    :class="classes('cancel')"
                    :loading="loading.cancel"
                    :text="cancelButtonText || '取消'"
                    :style="{ color: cancelButtonColor }"
                    @click="handleAction('cancel')"
                />
                <h-button
                    v-if="showConfirmButton"
                    size="large"
                    :class="[classes('confirm'), { 'hanzo-hairline--left': hasButtons }]"
                    :loading="loading.confirm"
                    :text="confirmButtonText || '确认'"
                    :style="{ color: confirmButtonColor }"
                    @click="handleAction('confirm')"
                />
            </div>
        </div>
      </transition>
</template>
<script>
import { classesMixin } from '../../common/mixins/classname';
import { PopupMixin } from '../../common/mixins/popup';
import hButton from '../button/index';
let classMixin = classesMixin('dialog');
export default {
    name: "h-dialog",
    mixins: [ classMixin, PopupMixin ],
    components: {
        hButton
    },
    props: {
        title: String,
        message: String,
        className: null,
        callback: Function,
        beforeClose: Function,
        messageAlign: String,
        cancelButtonText: String,
        cancelButtonColor: String,
        confirmButtonText: String,
        confirmButtonColor: String,
        showCancelButton: Boolean,
        showConfirmButton: {
            type: Boolean,
            default: true
        },
        overlay: {
            type: Boolean,
            default: true
        },
        closeOnClickOverlay: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        hasButtons() {
            return this.showCancelButton && this.showConfirmButton;
        }
    },
    data() {
        return {
            loading: {
                confirm: false,
                cancel: false
            }
        };
    },
    methods: {
        onClickOverlay() {
            this.handleAction('overlay');
        },

        handleAction(action) {
            this.$emit(action);

            if (this.beforeClose) {
                this.loading[action] = true;
                this.beforeClose(action, state => {
                if (state !== false) {
                    this.onClose(action);
                }
                this.loading[action] = false;
                });
            } else {
                this.onClose(action);
            }
        },

        onClose(action) {
            this.close();

            if (this.callback) {
                this.callback(action);
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
