<template>
  <transition>
    <div class="aos-drag-box"
      v-show="visible"
      :style="{
        'width':realWidth,
        'height':realHeight, 
        'min-width:': realMinWidth, 
        'min-height': realMinHeight, 
        padding: padding,
        top: top,
        bottom: bottom,
        left: left,
        right: right
      }">
      <div class="aos-drag-container">
        <div class="drag-header" v-if="!onlyBody">
          <div class="header">
            <span v-if="title" class="title">{{title}}</span>
            <slot name="header-left"></slot>
          </div>
          <div class="drag-close" v-if="showClose">
            <slot name="header-right"></slot>
            <i class="el-icon-close close" title="点击关闭" @click="handleClose"></i>
          </div>
        </div>
          <el-collapse-transition>
            <div class="drag-body" :style="{height: onlyBody ? '100%' : 'calc(100% - 90px)', 'margin-top': onlyBody ? '0px' : '8px', 'overflow': bodyOverflow ? '' : 'hidden'}">
              <slot></slot>
              <div class="drag-collapse" v-if="showCollapse" @click="handleCollapse">
                <i class="el-icon-arrow-down aos-drag-down-arrow" :class="{'active': isActive}"></i>
              </div>
            </div>
          </el-collapse-transition>
        <div class="drag-footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import Popup from 'aos-element/src/utils/popup';
import Migrating from 'aos-element/src/mixins/migrating';
import emitter from 'aos-element/src/mixins/emitter';
import ElCollapseTransition from 'aos-element/src/transitions/collapse-transition';
export default {
  name: 'AosDragBox',
  components: {ElCollapseTransition},
  mixins: [Popup, emitter, Migrating],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: 800
    },
    minWidth: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 600
    },
    minHeight: {
      type: Number,
      default: 400
    },
    title: {
      type: String,
      default: ''
    },
    showClose: {
      type: Boolean,
      default: true
    },
    onlyBody: {
      type: Boolean,
      default: false
    },
    collapsedHeight: {
      type: Number,
      default: 50
    },
    showCollapse: {
      type: Boolean,
      default: false
    },
    padding: {
      type: String,
      default: '16px'
    },
    top: {
      type: String
    },
    bottom: {
      type: String,
      default: '0px'
    },
    left: {
      type: String
    },
    right: {
      type: String,
      default: '0px'
    },
    dragable: {
      type: Boolean,
      default: true
    },
    collapse: {
      type: Boolean,
      default: false
    },
    bodyOverflow: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      isActive: false,
      realHeight: ''
    }
  },
  mounted(){
    const that = this;
    this.open();
    document.body.appendChild(this.$el);
    if (this.dragable) {
      this.$el.onmousedown = function mouseDownFunction(ev) {
        const oevent = ev || window.event;
        const distanceX = oevent.clientX - that.$el.offsetLeft;
        const distanceY = oevent.clientY - that.$el.offsetTop;
  
        document.onmousemove = function mouseMoveFunction(evs) {
          const oevents = evs || window.event;
          that.$el.style.left = `${oevents.clientX - distanceX}px`;
          that.$el.style.top = `${oevents.clientY - distanceY}px`;
        };
        document.onmouseup = function mouseUpFunction() {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    }
  },
  destroyed() {
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el);
    }
  },
  methods: {
    handleCollapse () {
      if (this.isActive) {
        this.realHeight = this.height + 'px'
        this.isActive = false
      } else {
        this.realHeight = this.collapsedHeight + 'px'
        this.isActive = true
      }
      this.$emit('collapse', this.isActive, this.realHeight)
    },
    handleClose() {
      this.$emit('close');
      this.$emit('update:visible', false);
    }
  },
  watch: {
    visible(val){
      if(val){
        this.open();
        document.body.appendChild(this.$el);
      } else {
        this.$emit('close');
      }
    },
    height: {
      handler: function (val, oldVal) {
        if (val !== oldVal) {
          this.realHeight = val + 'px'
        }
      },
      immediate: true
    },
    collapse: {
      handler: function (val, oldVal) {
        if (val !== oldVal) {
          this.isActive = val
          if (!this.isActive) {
            this.realHeight = this.height + 'px'
          } else {
            this.realHeight = this.collapsedHeight + 'px'
          }
          this.$emit('collapse', this.isActive, this.realHeight)
        }
      },
      immediate: true
    }
  },
  computed: {
    realWidth(){
      return this.width + 'px';
    },
    realMinWidth(){
      return this.minWidth + 'px';
    },
    realMinHeight () {
      return this.minHeight + 'px';
    }
  }
}
</script>
