
<template>
    <transition name="ani-bounce"
                @after-leave="destory">
        <div v-show="visible"
             :class="dialogClass"
             @click.stop>
            <div v-if="showClose"
                 :class="`${prefix}-dialog-close`"
                 @click="close" />
            <div v-if="!!title && !type"
                 :class="`${prefix}-dialog-header`">
                {{ title }}
            </div>
            <div :class="`${prefix}-dialog-main`">
                <div :class="`${prefix}-dialog-body`"
                     :style="bodyStyle">
                    <slot>
                        <div :class="messageClass">
                            <i v-if="type"
                               :class="iconClass" />
                            <p class="major">
                                {{ title }}
                            </p>
                            <div class="minor">
                                <slot name="message">
                                    <p v-html="message"></p>
                                </slot>
                            </div>
                        </div>
                    </slot>
                </div>
                <div v-if="!!cancelButtonText || !!okButtonText"
                     :class="`${prefix}-dialog-footer`">
                    <slot name="footer">
                        <jdd-button v-if="cancelButtonText"
                                    :class="cancelButtonClass"
                                    type="minor"
                                    @click="btnClickHandle('cancel')">
                            {{ cancelButtonText }}
                        </jdd-button>
                        <jdd-button v-if="okButtonText"
                                    :class="okButtonClass"
                                    @click="btnClickHandle('ok')">
                            {{ okButtonText }}
                        </jdd-button>
                    </slot>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
import Button from 'jdd-design/components/button';
import { prefix, prefixMixins, isType } from 'jdd-design/utils';
export default {
    name: `${prefix}-base-dialog`,
    components: {
        jddButton: Button
    },
    mixins: [prefixMixins],
    props: {
        type: String,
        textAlign: String,
        customClass: String,
        cancelBtnClass: String,
        cancelButtonText: String,
        okButtonText: {
            type: String,
            default: '确定'
        },
        okBtnClass: String,
        title: String,
        message: String,
        callback: Function,
        closeFunc: Function,
        closeOnModalClick: Boolean,
        value: Boolean,
        width: {
            type: Number | String,
            default: 400
        },
        maxWidth: {
            type: Number,
            default: 800
        },
        maxHeight: {
            type: Number,
            default: 550
        },
        version: String,
        showClose: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            visible: false
        };
    },
    computed: {
        dialogClass() {
            let clsNames = [`${prefix}-dialog`];
            this.version && clsNames.push(`${prefix}-dialog--v2`);
            return clsNames;
        },
        cancelButtonClass() {
            let clsNames = [`${prefix}-dialog__btn`];
            this.cancelBtnClass && clsNames.push(this.cancelBtnClass);
            return clsNames;
        },
        okButtonClass() {
            let clsNames = [`${prefix}-dialog__btn`];
            this.okBtnClass && clsNames.push(this.okBtnClass);
            return clsNames;
        },
        iconClass() {
            let clsNames = [`${prefix}-dialog-body__icon`];
            this.type && clsNames.push(`${prefix}-icon-${this.type}`);
            return clsNames;
        },
        messageClass() {
            let clsNames = [`${prefix}-dialog-body__message`];
            return clsNames;
        },
        bodyStyle() {
            let style = {
                'text-align': this.textAlign,
                'max-width': `${this.maxWidth - 64}px`,
                'max-height': `${this.maxHeight - 168}px`
            };
            return style;
        }
    },
    watch: {
        value: function(val) {
            this.visible = val;
        },
        visible: function(val) {
            this.$emit('input', val);
        }
    },
    mounted() {
        this.visible = this.value;
    },
    methods: {
        isType,
        btnClickHandle(action) {
            this.callback && this.callback.apply(this, [action]);
        },
        close() {
            this.visible = false;
        },
        destory() {
            if (!this.$parent) {
                this.$el.parentNode.removeChild(this.$el);
            }
            this.closeFunc && this.closeFunc(this);
        }
    }
};
</script>