<template>
  <div class="table">
    <div class="table-wrapper">
      <div class="table_top">
        <span id="drag-control_span">标题1</span>
        ......
      </div>
      <div class="table_content">
        <ul>
          <li
            v-for="(item, index) in list"
            :key="index"
          >
            <span class="drag-accused_span">
              <div class="span_c">标题xxxx</div>
            </span>
            ......
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      dragging: false,
      draggState: {},
      disabled: [],
    }
  },
  mounted() {
    document.documentElement.style.setProperty(
      '--myColWidth',
      this.isMore ? '100px' : '700px'
    )
    this.addDragEvent()
  },
  methods: {
    // 添加流程标题拖拽事件
    addDragEvent() {
      const _me = this
      const el = this.$el
      const dragDom = el.querySelector('span#drag-control_span')
      dragDom.style.cursor = 'col-resize'
      dragDom.onmousedown = e => {
        // 鼠标按下，计算当前元素距离可视区的距离
        _me.dragging = true
        _me.draggState = {
          disX: e.clientX,
          w: dragDom.clientWidth,
        }
        const handleMouseMove = e => {
          if (_me.dragging) {
            var windowWidth =
              document.documentElement.clientWidth || document.body.clientWidth
            const minW = 200
            const maxW = windowWidth - dragDom.offsetWidth
            // 通过事件委托，计算移动的距离
            const l = e.clientX - _me.draggState.disX
            // 改变当前元素宽度，不可超过最小最大值
            var nw = _me.draggState.w + l
            nw = nw < minW ? minW : nw
            nw = nw > maxW ? maxW : nw
            document.documentElement.style.setProperty(
              '--myColWidth',
              `${nw}px`
            )
          }
        }
        const clear = () => {
          if (_me.dragging) {
            _me.dragging = false
            _me.draggState = {}
          }
          dragDom.removeEventListener('mousemove', handleMouseMove)
          dragDom.removeEventListener('mouseup', clear)
          dragDom.removeEventListener('mouseleave', clear)
        }
        dragDom.addEventListener('mousemove', handleMouseMove)
        dragDom.addEventListener('mouseup', clear)
        dragDom.addEventListener('mouseleave', clear)
      }
    },
  },
}
</script>

<style scoped lang="scss">
.table {
  .table_top {
    span:first-child {
      width: var(--myColWidth);
    }
  }
}
</style>