<template>
  <transition name="dialog-fade" @after-enter="afterEnter" @after-leave="afterLeave">
    <div v-show="visible" class="el-dialog__wrapper" @click.self="handleWrapperClick">
      <div role="dialog" :key="key" aria-modal="true" :aria-label="title || 'dialog'" :style="style"
        :class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]">
        <div ref="header" class="el-dialog__header">
          <slot name="title">
            <span class="el-dialog__title">{{ title }}</span>
          </slot>
          <button type="button" class="el-dialog__headerbtn" aria-label="Close"
            v-if="showClose" @click="handleClose">
            <i class="el-dialog__close el-icon el-icon-close"></i>
          </button>
        </div>
        <div ref="body" class="el-dialog__body dialog-page" v-if="rendered"><slot></slot></div>
        <div ref="footer" class="el-dialog__footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    import Popup from './popup';
    import Migrating from 'element-ui/src/mixins/migrating';
    import emitter from 'element-ui/src/mixins/emitter';
    import { hasClass } from 'element-ui/src/utils/dom';
    export default {
        name: 'Dialog',
        mixins: [Popup, emitter, Migrating],
        props: {
            title: {
                type: String,
                default: ''
            },
            modal: {
                type: Boolean,
                default: true
            },
            modalAppendToBody: {
                type: Boolean,
                default: true
            },
            appendToBody: {
                type: Boolean,
                default: false
            },
            lockScroll: {
                type: Boolean,
                default: true
            },
            closeOnClickModal: {
                type: Boolean,
                default: true
            },
            showClose: {
                type: Boolean,
                default: true
            },
            fullscreen: Boolean,
            width: String,
            height: String,
            parentClass: {
                type: String,
                default: ''
            },
            customClass: {
                type: String,
                default: ''
            },
            top: {
                type: String,
                default: '15vh'
            },
            beforeClose: Function,
            center: {
                type: Boolean,
                default: false
            },
            destroyOnClose: Boolean
        },
        data() {
            return {
                closed: false,
                key: 0,
                marginTop:this.top,
                parentSize:{
                    width:0,
                    height:0
                },
                style:{
                    width:null,
                    height:null,
                    marginTop:null
                },
                returnData:null
            };
        },
        created() {
            if (!this.fullscreen) {
                if (this.width) {
                    this.style.width = this.width;
                }
                if (this.height) {
                    this.style.height = this.height;
                }
                this.style.marginTop = this.marginTop;
                return this.style;
            }
        },
        watch: {
            visible(val) {
                if (val) {
                    this.closed = false;
                    this.$emit('open');
                    this.$el.addEventListener('scroll', this.updatePopper);
                    this.$d.debug().log("===>打开弹窗");
                    this.$nextTick(() => {
                        //去掉内部滚动条支持，需要由内容也自行支持，解决pdf阅读时出现滚动条问题
                        // this.$refs.body.style.overflow="auto";
                        let height=Number.parseInt(this.height);
                        if(height>this.parentSize.height-10){
                            height=this.parentSize.height-10;
                        }
                        this.style.height=height+"px";
                        let width=Number.parseInt(this.width);
                        if(width>this.parentSize.width-10){
                            width=this.parentSize.width-10;
                        }
                        this.style.width=width+"px";
                        this.style.marginTop=(this.parentSize.height-height)/2+"px";
                        this.$refs.body.style.height=height-this.$refs.header.offsetHeight-(this.$refs.footer?this.$refs.footer.offsetHeight:0)+"px";
                    });
                    if(this.parentClass){
                        let parent=null;
                        do {
                            parent=parent?parent.parentElement:this.$el.parentElement;
                            if(hasClass(parent,this.parentClass)||parent.tagName.toLowerCase()=="body"){
                                this.parentSize.width= Number.parseInt(parent.offsetWidth);
                                this.parentSize.height= Number.parseInt( parent.offsetHeight);
                                parent.appendChild(this.$el);
                                return;
                            }
                        }while (true)
                    }
                    if (this.appendToBody) {
                        this.parentSize.width= Number.parseInt(document.body.offsetWidth);
                        this.parentSize.height= Number.parseInt( document.body.offsetHeight);
                        document.body.appendChild(this.$el);
                    }else{
                       this.parentSize.width= Number.parseInt( this.$el.parentElement.offsetWidth);
                       this.parentSize.height=  Number.parseInt(this.$el.parentElement.offsetHeight);
                    }
                } else {
                    this.$el.removeEventListener('scroll', this.updatePopper);
                    if (!this.closed) this.$emit('close');
                    if (this.destroyOnClose) {
                        this.$nextTick(() => {
                            this.key++;
                        });
                    }
                }
            }
        },
        computed: {
            // style(e) {
            //     let style = {};
            //     if (!this.fullscreen) {
            //         if (this.width) {
            //             style.width = this.width;
            //         }
            //         if (this.height) {
            //             style.height = this.height;
            //         }
            //         style.marginTop = this.marginTop;
            //     }
            //     return style;
            // }
        },
        methods: {
            getMigratingConfig() {
                return {
                    props: {
                        'size': 'size is removed.'
                    }
                };
            },handleWrapperClick() {
                if (!this.closeOnClickModal) return;
                this.handleClose();
            },handleClose() {
                if (typeof this.beforeClose === 'function') {
                    this.beforeClose(this.hide);
                } else {
                    let result={};
                    if(this.returnData) {
                      result = this.returnData;
                      this.returnData=null;
                    }
                    this.hide(result);
                }
            },hide(options={}) {//增加关闭时传递参数的支持
                if (options.cancel !== false) {
                    this.$emit('update:visible', false);
                    this.$emit('close',options);
                    this.closed = true;
                }
            },updatePopper() {
                this.broadcast('ElSelectDropdown', 'updatePopper');
                this.broadcast('ElDropdownMenu', 'updatePopper');
            },afterEnter() {
                this.$emit('opened');
            },afterLeave() {
                this.$emit('closed');
            }
        },
        mounted() {
            if (this.visible) {
                this.rendered = true;
                this.open();
                if (this.appendToBody) {
                    document.body.appendChild(this.$el);
                }
            }
        },
        destroyed() {
            if ((this.appendToBody||this.parentClass) && this.$el && this.$el.parentNode) {
                this.$el.parentNode.removeChild(this.$el);
            }
        }
    };
</script>
