<template>
  <div :style="{ overflow: 'auto', width: slideWidth + 'px' }" class="slide-form-panel">
    <div @mousedown.stop.prevent="handleDown" style="width: 10px;height: 100%;position: absolute;z-index: 1000;float: left;cursor: w-resize;"></div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      required: false
    }
  },
  data () {
    return {
      maxWidth: 1100,
      initWidth: this.width || 900,
      slideWidth: this.width || 900,
      fireResize: this.$util.debounce(() => {
        this.$emit('resize', this.slideWidth)
      }, 300)
    }
  },
  created () {
    if (this.$parent.$el) {
      this.maxWidth = Math.max(this.maxWidth, this.$parent.$el.clientWidth)
      this.initWidth = Math.min(this.maxWidth, this.initWidth)
      this.slideWidth = Math.min(this.maxWidth, this.slideWidth)
    }
  },
  mounted () {
  },
  methods: {
    handleMove  (e) {
      if (e.preventDefault) {
        e.preventDefault()
      }
      console.warn('鼠标移动', e, this)
      this.slideWidth = this.$root.$el.clientWidth - e.x

      // 宽度不小于初始值
      if (this.slideWidth < this.initWidth) {
        this.slideWidth = this.initWidth
      }
      this.fireResize()
    },
    handleDown (e) {
      console.warn('鼠标按下', e, this, 'parent.$el', this.$parent.$el)
      this.$parent.$el.addEventListener('mouseup', this.handleUp, true)
      this.$parent.$el.addEventListener('mousemove', this.handleMove, true)
    },
    handleUp (e) {
      console.warn('鼠标抬起', e, this, 'parent.$el', this.$parent.$el)
      this.$parent.$el.removeEventListener('mouseup', this.handleUp, true)
      this.$parent.$el.removeEventListener('mousemove', this.handleMove, true)
    }
  }
}
</script>
<style scoped lang="scss">

</style>
