<template>
    <div v-transfer-dom :data-transfer="transfer">
        <transition :name="transitionNames[1]">
            <div :class="maskClasses" v-show="visible" @click="mask"></div>
        </transition>
        <div :class="wrapClasses" @click="handleWrapClick" :style="wrapStyles">
            <transition :name="transitionNames[1]" @after-leave="animationFinish">
                <div :class="classes" :style="mainStyles" v-show="visible">
                    <div class="modal-box">
                        <slot name="box">
                            <div class="modal-header" v-if="showHead">
                                <div class="modal-header-wrap">
                                    <Button class="button-prev" type="icon" @click="close" v-if="page"><Icon type="prev"></Icon></Button>
                                    <slot name="header">
                                        <div class="modal-title">{{ title }}</div>
                                    </slot>
                                    <Button class="button-close" size="small" type="icon" v-if="closable && !page" @click="close"><Icon type="error"></Icon></Button>
                                </div>
                            </div>
                            <div class="modal-body"><slot></slot></div>
                            <div class="modal-footer" v-if="!hideFooter">
                                <slot name="footer">
                                    <Button type="text" @click.native="cancel">{{ localeCancelText }}</Button>
                                    <Button type="text" scene="primary" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</Button>
                                </slot>
                            </div>
                        </slot>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>
<script>
    import Icon from '../Icon';
    import Button from '../button/Button.vue';
    import TransferDom from '../../directives/transfer-dom';
    import Locale from '../../mixins/locale';
    import Emitter from '../../mixins/emitter';
    import ScrollbarMixins from './mixins-scrollbar';
    import util from './util';

    export default {
        name: 'Modal',
        mixins: [ Locale, Emitter, ScrollbarMixins ],
        components: { Icon, Button },
        directives: { TransferDom },
        props: {
            id: {
              type: [String, Number]
            },
            value: {
                type: Boolean,
                default: false
            },
            closable: {
                type: Boolean,
                default: true
            },
            page: {
                type: Boolean,
                default: false
            },
            maskClosable: {
                type: Boolean,
                default: true
            },
            title: {
                type: String
            },
            width: {
                type: [Number, String],
                default: 520
            },
            okText: {
                type: String
            },
            cancelText: {
                type: String
            },
            loading: {
                type: Boolean,
                default: false
            },
            styles: {
                type: Object
            },
            className: {
                type: String
            },
            // for instance
            footerHide: {
                type: Boolean,
                default: false
            },
            scrollable: {
                type: Boolean,
                default: false
            },
            transitionNames: {
                type: Array,
                default () {
                    return ['ease', 'fade'];
                }
            },
            transfer: {
                type: Boolean,
                default: true
            }
        },
        data () {
            return {
                wrapShow: false,
                showHead: true,
                buttonLoading: false,
                visible: this.value,
                zIndex: 0
            };
        },
        computed: {
            hideFooter () {
                return this.footerHide || this.page;
            },
            wrapStyles () {
                return {
                    'z-index': this.zIndex
                }
            },
            wrapClasses () {
                return [
                    `modal-wrap`,
                    {
                        [`modal-hidden`]: !this.wrapShow,
                        [`${this.className}`]: !!this.className
                    }
                ];
            },
            maskClasses () {
                return `common-masker`;
            },
            classes () {
                return [
                    `modal`,
                    {
                        'modal-page': this.page !== null && this.page
                    }
                ];
            },
            mainStyles () {
                let style = {};
                const width = parseInt(this.width);
                const styleWidth = {
                    width: width <= 100 ? `${width}%` : `${width}px`
                };
                const customStyle = this.styles ? this.styles : {};
                Object.assign(style, styleWidth, customStyle);
                return style;
            },
            localeOkText () {
                if (this.okText === undefined) {
                    return this.t('core.modal.okText');
                }
                else {
                    return this.okText;
                }
            },
            localeCancelText () {
                if (this.cancelText === undefined) {
                    return this.t('core.modal.cancelText');
                }
                else {
                    return this.cancelText;
                }
            }
        },
        methods: {
            close () {
                this.visible = false;
                this.$emit('input', false);
                this.$emit('on-cancel');
            },
            mask () {
                if (this.maskClosable) {
                    this.close();
                }
            },
            handleWrapClick(event) {
                // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
                const className = event.target.getAttribute('class');
                if (className && className.indexOf(`modal-wrap`) > -1)
                    this.mask();
            },
            cancel() {
                this.close();
            },
            ok() {
                if (this.loading) {
                    this.buttonLoading = true;
                }
                else {
                    this.visible = false;
                    this.$emit('input', false);
                }
                this.$emit('on-ok');
            },
            EscClose (e) {
                if (this.visible && this.closable) {
                    if (e.keyCode === 27) {
                        this.close();
                    }
                }
            },
            handleEnter () {

            },
            animationFinish() {
                this.$emit('on-hidden');
            }
        },
        created () {
            util.increase();
            this.zIndex = util.getZindex();
        },
        mounted () {
            if (this.visible) {
                this.wrapShow = true;
            }
            let showHead = true;
            if (this.$slots.header === undefined && !this.title) {
                showHead = false;
            }
            this.showHead = showHead;
            // ESC close
            document.addEventListener('keydown', this.EscClose);
        },
        beforeDestroy () {
            document.removeEventListener('keydown', this.EscClose);
            this.removeScrollEffect();
        },
        watch: {
            value (val) {
                this.visible = val;
            },
            visible (val) {
                if (val === false) {
                    this.buttonLoading = false;
                    this.timer = setTimeout(() => {
                        this.wrapShow = false;
                        this.removeScrollEffect();
                    }, 300);
                }
                else {
                    if (this.timer)
                        clearTimeout(this.timer);
                    this.wrapShow = true;
                    if (!this.scrollable) {
                        this.addScrollEffect();
                    }
                }
                this.broadcast('Table', 'on-visible-change', val);
                this.$emit('on-visible-change', val);
            },
            loading (val) {
                if (!val) {
                    this.buttonLoading = false;
                }
            },
            scrollable (val) {
                if (!val) {
                    this.addScrollEffect();
                }
                else {
                    this.removeScrollEffect();
                }
            },
            title (val) {
                if (this.$slots.header === undefined) {
                    this.showHead = !!val;
                }
            }
        }
    };
</script>
