<template>
  <div
    ref="gridWrapperElem"
    class="history"
  >
    <div
      class="grid"
      @mousemove.prevent
      @mousemove="onMouseMove"
      @mouseleave="onMouseLeave"
      @mousedown="onMouseDown"
      @mouseup="onMouseUp"
    >
      <div
        class="cover grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <img
          class="photo"
          src="@/assets/images/img4dev/1.jpg"
          alt=""
          draggable="false"
        >
        <h3>标题标题标题标题标题标题</h3>
      </div>
      <div
        class="cover grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <img
          class="photo"
          src="@/assets/images/img4dev/2.jpg"
          alt=""
          draggable="false"
        >
        <h3>标题标题标题标题标题标题</h3>
      </div>
      <div
        class="cover grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <img
          class="photo"
          src="@/assets/images/img4dev/3.jpg"
          alt=""
          draggable="false"
        >
        <h3>标题标题标题标题标题标题</h3>
      </div>
      <div
        class="cover grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <img
          class="photo"
          src="@/assets/images/img4dev/4.jpg"
          alt=""
          draggable="false"
        >
        <h3>标题标题标题标题标题标题</h3>
      </div>
      <div
        class="cover grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <img
          class="photo"
          src="@/assets/images/img4dev/5.jpg"
          alt=""
          draggable="false"
        >
        <h3>标题标题标题标题标题标题</h3>
      </div>
      <div
        class="grid-item grid-item--width2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题1</h3>
      </div>
      <div
        class="grid-item grid-item--height2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题2</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题3</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题4</h3>
      </div>
      <div
        class="grid-item grid-item--width2 grid-item--height2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题5</h3>
      </div>
      <div
        class="grid-item grid-item--width2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题6</h3>
      </div>
      <div
        class="grid-item grid-item--width2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题7</h3>
      </div>
      <div
        class="grid-item grid-item--height2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题8</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题9</h3>
      </div>
      <div
        class="grid-item grid-item--width2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题10</h3>
      </div>
      <div
        class="grid-item grid-item--height2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题11</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题12</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题13</h3>
      </div>
      <div
        class="grid-item grid-item--height2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题14</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题15</h3>
      </div>
      <div
        class="grid-item grid-item--width2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题16</h3>
      </div>
      <div
        class="grid-item grid-item--height2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题17</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题18</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题19</h3>
      </div>
      <div
        class="grid-item grid-item--height2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题20</h3>
      </div>
      <div
        class="grid-item grid-item--width2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题21</h3>
      </div>
      <div
        class="grid-item grid-item--height2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题22</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题23</h3>
      </div>
      <div
        class="grid-item grid-item--height2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题24</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题25</h3>
      </div>
      <div
        class="grid-item grid-item--width2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题26</h3>
      </div>
      <div
        class="grid-item grid-item--height2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题27</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题28</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题29</h3>
      </div>
      <div
        class="grid-item grid-item--height2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题30</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题31</h3>
      </div>
      <div
        class="grid-item grid-item--width2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题32</h3>
      </div>
      <div
        class="grid-item grid-item--height2"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题33</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题34</h3>
      </div>
      <div
        class="grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
      >
        <h3>标题标题标题35</h3>
      </div>
    </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() {
  isMouseDown = true
  isDragged = false
}
function onMouseUp() {
  isMouseDown = false
}
function onMouseMove(e) {
  if (isMouseDown) {
    console.log(e)
    gridWrapperElem.value.scrollLeft -= e.movementX
    isDragged = true
  }
}
function onMouseLeave(e) {
  isMouseDown = false
}

onMounted(() => {
  setTimeout(() => {
    $('.grid').isotope({
      layoutMode: 'packery',
      itemSelector: '.grid-item',
      packery: {
        horizontal: true,
        gutter: 18,
      }
    })
  }, 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 {
    height: 100%;
    &::after {
      content: '';
      display: block;
      clear: both;
    }

    >.grid-item {
      float: left;
      width: 200px;
      height: 200px;
      background: blue;
      position: relative;
      > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      >h3 {
        position: absolute;
        left: 0;
        bottom: 5px;
        width: 100%;
        padding: 7px 25px;
        background: linear-gradient(90deg, rgba(176,161,121,0.7) 0%, rgba(0,0,0,0) 100%);
        font-size: 20px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 23px;
      }
    }
    >.grid-item--width2 { width: 400px; }
    >.grid-item--height2 { height: 400px; }
  }
}
</style>