<template>
  <div class="ems-components-new" :class="className">
    <div class="core-modal-mask"></div>
    <div
      class="core-modal-wrap"
      :style="{zIndex: zIndex}"
    >
      <transition
        :name="'sidelip-down-modal'"
        @after-leave="afterLeave"
        @after-enter="afterEnter"
      >
        <div
          v-if="state > -99"
          ref="dragbox"
          :style="{'width':width+'px'}"
          class="core-modal"
          style="height: calc(100% - 110px); margin: 0 auto;"
        >
          <a
            class="ivu-modal-close"
            @click="close"
          >
            <Icon type="md-close" />
          </a>
          <div
            class="core-modal-header"
            @mousedown.stop="draging"
          >
            <div>{{ title }}</div>
          </div>
          <div
            class="core-modal-body"
            style="max-height: calc(100% - 96px);"
          >
            <slot></slot>
          </div>
          <div class="core-modal-footer" v-if="ifShowFooter">
            <Button
              v-for="(item,index) in actions"
              :key="index"
              :loading="actionState[item.action]"
              :type="item.type || item.theme"
              :icon="item.icon"
              :size="item.size"
              :ghost="item.ghost"
              :class="item.className"
              :disabled="item.disabled"
              @click.native="item.handle()"
            >
              {{ item.text }}
            </Button>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<style lang="less">
@import './index.less';
</style>
<script>
export default {
  components: {},
  directives: {},
  props: {},
  data() {
    return {
      state: -99,
      actions: [],
      title: '',
      width: 600,
      zIndex: 1011,
      className: '',
      actionState: {},
      closeCallBack() {},
      ifShowFooter: true,
    };
  },
  mounted: function() {
    this.state = -1;
  },
  beforeDestroy: function() {},
  destroyed: function() {
    document.body.removeChild(this.$el);
  },
  methods: {
    draging(ev) {
      const ele = this.$refs.dragbox;
      const disX = ev.clientX - ele.offsetLeft;
      const disY = ev.clientY - ele.offsetTop;
      window.onmousemove = e => {
        ele.style.margin = '';
        [ele.style.left, ele.style.top] = [`${e.clientX - disX}px`, `${e.clientY - disY}px`];
      };
      window.onmouseup = () => {
        window.onmouseup = null;
        window.onmousemove = null;
      };
    },
    hide() {
      this.state = -99;
    },
    close() {
      this.hide();
      this.closeCallBack();
    },
    setTitle(title) {
      this.title = title;
    },
    setCloseCallBack(cb = () => {}) {
      this.closeCallBack = cb;
    },
    setPageActions(actions) {
      this.actions = actions;
      for (const a of this.actions) {
        if (a.action) {
          this.actionState[a.action] = false;
        }
      }
    },
    setSize(width) {
      this.width = width;
    },
    setClassName(className) {
      this.className = className;
    },
    setZindex(zIndex) {
      this.zIndex = zIndex;
    },
    afterLeave() {
      this.$destroy();
    },
    afterEnter() {
      this.state = 0;
    },
    setActionsState(action, state) {
      this.actionState[action] = state;
      this.$forceUpdate();
    },
    setIfShowFooter(flag) {
      this.ifShowFooter = flag;
    },
  }
};
</script>
