<template>
    <div v-transfer-dom :data-transfer="transfer" :class="prefixCls">
        <transition name="fade">
            <div 
                :class="`${prefixCls}-mask`" 
                :style="{ 'z-index': transferIndex, backgroundColor: overlay}" 
                v-if="visible"></div>
        </transition>
        <div 
            :class="`${prefixCls}-wrapper`" 
            :style="{ 'z-index': transferIndex}" 
            v-show="wrapShow">
            <transition name="move-up">
                <div 
                    :class="`${prefixCls}-inner`"
                    :style="{'width': width + 'px'}" 
                    v-if="visible">
                    <div :class="`${prefixCls}-inner-header`">
                        <div :class="`${prefixCls}-inner-title`">
                            <slot name="header">
                                {{title}}
                            </slot>
                        </div>
                        <div v-if="closeable" 
                            :class="`${prefixCls}-inner-close`"
                            @click="handleCancel">
                            <Icon type="close"/>
                        </div>
                    </div>
                    <div :class="`${prefixCls}-inner-body`" :style="bodyStyle">
                        <template v-if="typeof content === 'function'">
                            <render-cell :render="content" />
                        </template>
                        <slot v-else>{{content}}</slot>
                    </div>
                    <div :class="`${prefixCls}-inner-footer`">
                        <slot name="footer">
                            <YYButton :type="type === 'confirm' ? 'default' : 'primary'"
                                @click="handleCancel">
                                {{type === 'confirm' ? t('cancel') : t('close')}}
                            </YYButton>
                            <YYButton v-if="type === 'confirm'" 
                                type="primary" 
                                @click="handleOk"
                                :loading="btnLoading"
                                style="margin-left: 4px">
                                {{t('ok')}}
                            </YYButton>
                        </slot>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>
<script>
    import RenderCell from '../../base/common/render'
    import YYButton from '../../base/button/'
    import Icon from '../../base/icon/'
    import TransferDom from '../../../directives/transfer-dom'
    import Locale from '../../../mixins/locale'
    import { on, off } from '../../../utils/dom'
    import { oneOf } from '../../../utils/assist'
    import { transferIndex, transferIncrease } from '../../../utils/transfer-queue'
    import ScrollbarMixins from '../../../mixins/scrollbar'
    import Keydown from '../../../mixins/keydown'

    const prefixCls = 'yy-modal'
    export default {
        name: 'YYModal',
        mixins: [Locale, ScrollbarMixins, Keydown],
        components: {
            RenderCell,
            YYButton,
            Icon
        },
        directives: {
            TransferDom
        },
        props: {
            value: {
                type: Boolean,
                default: false
            },
            loading: { // 是否异步
                type: Boolean,
                default: false
            },
            title: {
                type: [String, Number],
            },
            content: {
                type: [Function, String]
            },
            width: {
                type: [String, Number] ,
                default: '340'
            },
            type: { // 对话框类型 confirm alert
                validator: function(value) {
                    return oneOf(value, ['confirm', 'alert'])
                },
                default: 'confirm'
            },
            transfer: {
                type: Boolean,
                default: true
            },
            closeable: { // 是否显示右上角关闭按钮
                type: Boolean,
                default: true
            },
            onRemove: {
                type: Function,
                default: ()=>{}
            },
            onCancel: {
                type: Function,
                default: ()=>{}
            },
            onOk: {
                type: Function,
                default: ()=>{}
            },
            maxBodyHeight: {
                type: String,
                default: ''
            },
            overlay: {
                type: String,
                default: 'transparent'
            },
            enableScrollControl: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                prefixCls: prefixCls,
                visible: this.value,
                wrapShow: false,
                btnLoading: false,
                transferIndex: 0
            }
        },
        computed: {
            bodyStyle() {
                if (this.maxBodyHeight) {
                    return {
                        'max-height': this.maxBodyHeight,
                        'overflow': 'scroll'
                    }
                }
                return {}
            }
        },
        watch: {
            value (value) {
                this.visible = value
            },
            visible (value) {
                if(value) {
                    this.wrapShow = true
                    this.handleGetIndex()
                    if (this.enableScrollControl) this.addScrollEffect()
                    on(window, 'keydown', this.handleKeydown)
                } else {
                    off(window, 'keydown', this.handleKeydown)
                    setTimeout(() => {
                        this.wrapShow = false
                        this.removeScrollEffect()
                    }, 300)
                }
            }
        },
        methods: {
            handleCancel() {
                this.visible = false
                this.$emit('input', this.visible)
                this.onCancel()
                this.onRemove()
                this.$emit('on-cancel')
            },
            handleOk() {
                if(this.btnLoading) return
                if(this.loading) {
                    this.btnLoading = true
                } else {
                    this.visible = false
                    this.$emit('input', this.visible)
                }
                this.onOk()
                this.onRemove()
                this.$emit('on-ok')
            },
            handleGetIndex () {
                transferIncrease()
                this.transferIndex = transferIndex
            }
        }
    }
</script>


