<template>
  <div
    ref="gridWrapperElem"
    class="history"
    @mousemove.prevent
    @mousemove="onMouseMove"
  >
    <div
      class="grid"
      @mousemove.prevent
      @mousedown="onMouseDown"
      @mouseup="onMouseUp"
    >
      <div
        class="grid-item"
        @mousemove.prevent
      >
        aaaa
      </div>
      <div
        class="grid-item"
        @mousemove.prevent
      >
        bbbb
      </div>
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item grid-item--width2"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item grid-item--width2"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item grid-item--width2"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item grid-item--width2"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item grid-item--width2"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item grid-item--width2"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item grid-item--width2"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
      <div
        class="grid-item"
        @mousemove.prevent
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreasureView',
}
</script>

<script setup>
import {
  onMounted,
  reactive,
  ref,
  toRefs,
} from 'vue'

let isMouseDown = false
let isDragged = false
const gridWrapperElem = ref('null')
function onMouseDown() {
  console.log('mouse down')
  isMouseDown = true
  isDragged = false
}
function onMouseUp() {
  console.log('mouse up')
  isMouseDown = false
}
function onMouseMove(e) {
  if (isMouseDown) {
    console.log(e)
    gridWrapperElem.value.scrollTop -= e.movementX
    isDragged = true
  }
}

onMounted(() => {
  setTimeout(() => {
    var elem = document.querySelector('.grid')
  }, 300)
})
</script>

<style lang="less" scoped>
.history {
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar { background: transparent; width: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
  &::-webkit-scrollbar-thumb {
    // background: rgba(220, 231, 240, 0.2);
    // border-radius: 2px;
  }
  >.grid {
    >.grid-item {
      width: 200px;
      height: 200px;
      background: red;
    }
    >.grid-item--width2 {
      width: 400px;
      height: 200px;
      background: blue;
    }
  }
}
</style>