<template>
    <Modal
        v-model="_showModal"
        :closable="closable"
        :mask-closable="maskClosable"
        :ok-text="okText"
        :cancel-text="cancelText"
        :styles="styles"
        :class-name="className"
        :footer-hide="footerHide"
        :scrollable="scrollable"
        :transition-names="transitionNames"
        :transfer="transfer"
        :fullscreen="fullscreen"
        :mask="mask"
        :draggable="draggable"
        :z-index="zIndex"
        @on-ok="clickOk"
        @on-cancel="clickCancel"
        @on-visible-change="visibleChange"
        class="es-modal"
        ref="esModal"
    >
        <template v-if="!headerHide">
            <es-header slot="header" :title="title">
                <span slot="tailContent">
                    <slot name="tailContent"></slot>
                </span>
            </es-header>
        </template>

        <template v-if="!footerHide">
            <div slot="footer">
                <slot name="footer">
                    <div>
                        <Button size="large" @click="clickCancel(true)">{{
                            cancelText
                        }}</Button>
                        <Button
                            type="primary"
                            size="large"
                            :loading="loading"
                            @click="clickOk"
                            >{{ okText }}</Button
                        >
                    </div>
                </slot>
            </div>
        </template>

        <slot name="body"></slot>
    </Modal>
</template>
<script>
export default {
    // 弹窗宽高不会超过窗口大小
    name: 'es-modal',
    props: {
        // 支持头部隐藏
        headerHide: {
            type: Boolean,
            require: false,
            default: false
        },
        // 高度设置
        height: {
            type: [Number, String],
            default: 600
        },
        showModal: {
            type: Boolean,
            default: false
        },
        closable: {
            type: Boolean,
            default: true
        },
        maskClosable: {
            type: Boolean,
            default: true
        },
        title: {
            type: String
        },
        width: {
            type: [Number, String],
            default: 700
        },
        okText: {
            type: String,
            default: '确定'
        },
        cancelText: {
            type: String,
            default: '取消'
        },
        // 重写footer会导致loading失效
        loading: {
            type: Boolean,
            default: false
        },
        styles: {
            type: Object
        },
        className: {
            type: String
        },
        scrollable: {
            type: Boolean,
            default: false
        },
        transitionNames: {
            type: Array,
            default() {
                return ['ease', 'fade'];
            }
        },
        transfer: {
            type: Boolean,
            default() {
                return !this.$IVIEW || this.$IVIEW.transfer === ''
                    ? true
                    : this.$IVIEW.transfer;
            }
        },
        fullscreen: {
            type: Boolean,
            default: false
        },
        mask: {
            type: Boolean,
            default: true
        },
        draggable: {
            type: Boolean,
            default: false
        },
        zIndex: {
            type: Number,
            default: 1000
        },
        footerHide: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {};
    },
    mounted() {
        let self = this;
        self.$nextTick(() => {
            // 设置modal整体高度
            let space = 40;
            let maxHeight = document.body.clientHeight - space;
            let maxWidth = document.body.clientWidth - space;
            let height = parseInt(self.height);
            let width = parseInt(self.width);
            height = Math.min(height, maxHeight);
            width = Math.min(width, maxWidth);

            height = height <= 100 ? `${height}%` : `${height}px`;
            width = width <= 100 ? `${width}%` : `${width}px`;
            let wrapper = self.$refs.esModal.$refs.content.parentNode;
            wrapper.style.height = height;
            wrapper.style.width = width;
        });
    },
    computed: {
        _showModal: {
            get() {
                return this.showModal;
            },
            set(value) {}
        }
    },
    watch: {
        showModal: {
            handler(value) {
                let self = this;
                if (value) {
                    self.$nextTick(() => {
                        // 设置body高度
                        let children =
                            self.$refs.esModal.$refs.content.children;
                        let modalBody;
                        [...children].some(child => {
                            if (
                                [...child.classList].includes('ivu-modal-body')
                            ) {
                                modalBody = child;
                            }
                            return modalBody;
                        });
                        let height = self.$common.getSiblingsTotalHeight(
                            modalBody
                        );
                        modalBody.style.height =
                            'calc(100% - ' + height + 'px)';
                    });
                }
            }
        }
    },
    methods: {
        clickOk(value) {
            this.$emit('on-ok', value);
        },
        // value为true时，表明点击事件由按钮栏产生
        clickCancel(value) {
            this.$emit('on-cancel', value);
        },
        visibleChange(value) {
            this.$emit('on-visible-change', value);
        }
    }
};
</script>
<style lang="scss" scoped>
.es-modal /deep/ .ivu-modal-close {
    top: 6px;
}
.es-modal /deep/ .ivu-modal-close .ivu-icon-ios-close {
    font-size: 28px;
}
.es-modal /deep/ .ivu-modal-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.es-modal /deep/ .ivu-modal {
    margin: auto;
    top: auto;
}
.es-modal.fixed-height /deep/ .ivu-modal-content {
    height: 100%;
}
.es-modal.fixed-height /deep/ .ivu-modal-content .ivu-modal-body {
    padding: 14px;
    overflow: auto;
}
</style>
