<template>
    <div v-transfer-dom :data-transfer="transfer" class="rum-ui-modal-root">
        <transition name="fades">
            <div :class="['rum-ui-modal-mask',{cover}]" v-if="isShow"></div>
        </transition>
        <transition name="slows">
            <div class="rum-ui-modal-wrap" v-if="isShow" @click.self="close">
                <div :class="['rum-ui-modal',{confirm:type!='normal',cover}]">
                    <div class="title" v-if="title.length>0 && type=='normal'">
                        <rum-icon type="close-round" size="14" class="icon" @click.native="isShow=false"></rum-icon>
                        <span>{{title}}</span>
                    </div>
                    <div v-if="type!='normal'" class="conf-title">
                        <rum-icon type="information-circled" size="25" class="icon" color="#2d8cf0"></rum-icon>
                        <span>{{title}}</span>
                    </div>
                    <!-- 内容区 -->
                    <div class="content"><slot></slot></div>
                    <!-- 底部按钮区 -->
                    <div class="buttom" v-if="!footerHide && type=='normal'">
                        <rum-button type="primary" @on-click="ok">ᠲᠡᠭᠡᠶ᠎ᠡ</rum-button>
                        &nbsp;
                        <rum-button @on-click="isShow=false">ᠦᠭᠡᠢ</rum-button>
                    </div>
                    <div class="cofbutton" v-if="type!='normal'">
                        <rum-button type="primary" @on-click="took">ᠲᠡᠭᠡᠶ᠎ᠡ</rum-button>&nbsp;
                        <rum-button @on-click="isShow=false" v-if="type=='confirm'">ᠦᠭᠡᠢ</rum-button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import TransferDom from '../../directives/transfer-dom';
export default {
    data() {
        return {

        }
    },
    directives: { TransferDom },
    props: {
        value: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        transfer: {
            type: Boolean,
            default: false
        },
        footerHide: {
            type: Boolean,
            default: false
        },
        type: {
            type: String,
            default: 'normal'
        },
        cover: {
            type: Boolean,
            default: false
        },
        maskClosable: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        ok() {
            this.$emit('ok')
        },
        took() {
            if(this.type=='confirm') {
                this.$emit('ok')
            } else {
                this.isShow = false
            }
        },
        close() {
            if(this.maskClosable) {
                this.isShow = false
            }
        }
    },
    computed: {
        isShow: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input',val)
            }
        }
    }
}
</script>

<style lang="less">
.rum-ui-modal-root {
    font-family: 'OrhonChaganTig';
    writing-mode: vertical-lr;
}
.rum-ui-modal-mask {
    position: fixed;
    left: 0; top: 0;
    right: 0; bottom: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    &.cover {
        background: transparent;
    }
}
.rum-ui-modal-wrap {
    position: fixed;
    left: 0; top: 0;
    right: 0; bottom: 0;
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: center;
    .rum-ui-modal {
        background: #fff;
        border-radius: 4px;
        position: relative;
        top: -1%;
        min-height: 400px;
        display: flex;
        flex-direction: column;
        & > .title {
            border-right: 1px solid #e9eaec;
            padding: 13px 10px;
            font-weight: 400;
            font-size: 18px;
            background: #e9eaec;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            .icon {
                margin-bottom: 6px;
                position: relative;
                left: 1px;
                cursor: pointer;
                color: #777;
                &:hover {
                    color: #222;
                }
            }
        }
        & > .conf-title {
            padding: 13px 0 13px 20px;
            font-size: 20px;
        }
        & > .cofbutton {
            text-align: end;
            padding: 0 16px 15px 0;
        }
        & > .content {
            padding: 13px 12px;
        }
        & >.buttom {
            padding: 13px 10px;
            border-left: 1px solid #e9eaec;
            text-align: end;
        }
        &.confirm {
            & > .content {
                padding: 30px 12px 15px 12px;
            }
        }
        &.cover {
            width: 100%;
            height: 100%;
            top: 0;
            border-radius: 0;
            & > .content {
                flex: 1;
            }
        }
    }
}

.fades-enter-active, .fades-leave-active {
    transition: opacity .3s;
}
.fades-enter, .fades-leave-to {
    opacity: 0;
}

.slows-enter-active, .slows-leave-active {
    transition: opacity .2s, transform .2s;
}
.slows-enter, .slows-leave-to {
    opacity: 0;
    transform: scale(0.9);
}
</style>
