<template>
  <transition
    :name="'sidelip-down'"
    @after-leave="afterLeave"
    @after-enter="afterEnter"
  >
    <div
      v-if="state > -99"
      class="sidelip-warp"
      :style="style"
    >
      <div class="view-box-content">
        <div class="sidelip-bar-wrapper">
          <div class="sidelip-bar-info">
            <Button
              icon="icon iconfont icondanzuo"
              class="back"
              @click.native="close"
            ></Button>
            <span
              v-for="(item, index) in title"
              :key="index"
            >
              <Icon
                v-if="index"
                type="ios-arrow-round-forward"
              />
              <span>{{ item }}</span>
            </span>
          </div>
          <div class="sidelip-bar-buttons">
            <Button
              v-for="(item,index) in actions"
              :key="index"
              :size="item.size || 'default'"
              :loading="actionState[item.action]"
              :type="item.type || item.theme"
              :icon="item.icon"
              :ghost="item.ghost"
              :class="item.class"
              :disabled="item.disabled"
              @click.native="item.handle()"
            >
              {{ item.text }}
            </Button>
          </div>
        </div>
        <div class="sidelip-con">
          <slot></slot>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'Sidelip',
  props: {
    // 定位的元素的放置位置
    offsetEl: {
      type: String,
      default: '#mainContent'
    }
  },
  data() {
    return {
      state: -99,
      actions: [],
      actionState: {},
      title: [],
      style: '',
      width: '',
      height: ''
    };
  },
  mounted: function() {
    this.state = -1;
    this.resize();
    window.addEventListener('resize', this.resize);
    window.$app.$on('ChangeMenuSize', () => {
      setTimeout(() => {
        this.resize();
      }, 300);
    });
  },
  destroyed: function() {
    document.body.removeChild(this.$el);
    window.removeEventListener('resize', this.resize);
  },
  methods: {
    close() {
      this.$emit('Close');
      this.hide();
    },
    hide() {
      this.state = -99;
    },
    afterLeave() {
      this.$destroy();
    },
    afterEnter() {
      this.state = 0;
    },
    setPageActions(data) {
      this.actions = data;
      for (const a of this.actions) {
        if (a.action) {
          this.actionState[a.action] = false;
        }
      }
    },
    setActionsState(action, state) {
      this.actionState[action] = state;
      this.$forceUpdate();
    },
    setTitle(val) {
      let title = [];
      if (typeof val === 'string') {
        title = [val];
      } else if (Array.isArray(val)) {
        title = val;
      }
      this.title = title;
    },
    resize() {
      const $el = document.querySelector(this.offsetEl) || document.querySelector('.mian-content');
      if ($el) {
        const left = $el.offsetLeft;
        const top = $el.offsetTop;
        this.style = `top: ${top}px; left: ${left}px;`;
      }
    }
  }
};

</script>
<style lang="less">
.sidelip-warp {
  .ivu-input-number-input{
    text-align:right;
  }
  .ivu-card-extra button{
    margin-left:16px;
  }
  position: fixed;
  overflow: auto;
  background:#fff;
  transition: all .6s cubic-bezier(.36, .66, .04, 1);
  z-index: 500;
  right: 0;
  bottom: 0;
  .ivu-btn-small {
      padding: 0 18px;
  }
  .view-box-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: auto;
    min-width: 1000px;
  }
  .sidelip-bar-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    padding: 5px 0 5px 10px;
    background-color: #fff;
    .sidelip-bar-buttons {
      position: absolute;
      right: 25px;
      top: 13px;
      button {
        margin-left: 16px;
      }
    }
    .sidelip-bar-info {
      line-height: 38px;
      .back{
        width: 24px !important;
        height: 24px !important;
        overflow: hidden;
        padding: 0 !important;
        border-radius: 2px !important;
        line-height: 24px !important;
        margin-right: 8px;
        border: 1pxsolid #dddde1;
      }
      span {
        font-size: 16px;
        color: #424656;
        vertical-align: middle;
        font-weight: 500;
      }
      .ivu-icon-ios-arrow-round-forward {
        font-size: 18px;
        vertical-align: middle;
        margin-left: 6px;
        margin-right: 6px;
      }
      .ivu-icon-ios-undo:hover {
        color: #ffb403;
        font-size: 18px;
        color: #666;
        cursor: pointer
      }
    }
  }
  .sidelip-con {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
  }
}
.sidelip-down-enter-active {
  transform: translate3d(0, 0, 0);
}
.sidelip-down-enter {
  transform: translate3d(0, -120%, 0);
}
.sidelip-down-leave {
  transform: translate3d(0, 0, 0);
}

.sidelip-down-leave-active {
  transform: translate3d(0, -120%, 0);
}
</style>
