<template>
  <div :class="inPage ? 'page active' : 'page'">
    <div class="content" :style="bgStyle" ref="fatherBox">
      <!-- 控制框 -->
      <!-- <div class="control">
        <div @click="controlImg(1)">放大</div>
        <div @click="controlImg(2)">缩小</div>
        <div @click="controlImg(3)">上移一层</div>
        <div @click="controlImg(4)">下移一层</div>
      </div> -->

      <div
        :id="'item' + index"
        @touchmove="onMouseMove(index)"
        @touchstart="onMouseDown(index)"
        @touchend="onMouseUp(index)"
        v-for="(item, index) in materialList"
        :key="index"
        class="material"
        :style="{
          transform: 'scale(' + item.scale + ') ',
          zIndex: item.zIndex,
          top: item.y + 'px',
          left: item.x + 'px'
        }"
      >
        <div>{{ item.text }}</div>
        <img :src="item.url" alt="" />
        <!-- 边框 -->
        <div :class="domIndex == index ? 'active' : ''"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 组件
import Vue from 'vue'
import { Toast } from 'vant'
import { mapState, mapActions } from 'vuex'
// 工具
import { scrollToID } from '../utils'

Vue.use(Toast)
export default {
  props: {
    imgUrl: {
      default: false
      // type: String
    },
    materialList: {
      default: false,
      type: Object
    }
  },
  data() {
    return {
      inPage: false,
      dragging: false,
      startDistance: 0, //两指起始位置
      startX: 0,
      startY: 0, // 鼠标位置x y
      windowWidth: 0,
      windowHeight: 0,
      scale: 1,
      domIndex: -1 //当前点击的图片
      // materialList: [
      //   {
      //     text: '小div1',
      //     url: 'img/BG@2x.b0cf224b.png',
      //     x: 10, // 相对左上角XY坐标
      //     y: 190,
      //     scale: 1, //缩放
      //     zIndex: 1 //层级
      //   },
      //   {
      //     text: '小div2',
      //     url: 'img/BG@2x.b0cf224b.png',
      //     x: 100,
      //     y: 0,
      //     scale: 1,
      //     zIndex: 2
      //   },
      //   {
      //     text: '小div3',
      //     url: require('../assets/img/bg.png'),
      //     x: 0,
      //     y: 100,
      //     scale: 1,
      //     zIndex: 3
      //   },
      //   {
      //     text: '小div4',
      //     url: require('../assets/img/cn.jpeg'),
      //     x: 100,
      //     y: 100,
      //     scale: 1,
      //     zIndex: 4
      //   },
      //   {
      //     text: '小div5',
      //     url: require('../assets/img/ft.png'),
      //     x: 100,
      //     y: 280,
      //     scale: 1,
      //     zIndex: 5
      //   }
      // ]
    }
  },

  computed: {
    ...mapState({
      characters: (state) => state.publicObj.characters,
      //动态计算样式
      bgStyle() {
        return {
          backgroundImage: `url(${this.imgUrl})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }
      }
    })
    // imageStyles() {
    //   return this.images.map((image, index) => {
    //     return {
    //       zIndex: index,
    //       width: `${image.width}px`,
    //       height: `${image.height}px`,
    //       position: 'absolute',
    //       top: `${image.y}px`,
    //       left: `${image.x}px`,
    //     };
    //   });
    // },
  },

  methods: {
    ...mapActions(['setCharacters']),
    // 鼠标按下事件
    onMouseDown(index) {
      this.dragging = true
      this.domIndex = index
      //双指缩放初始化
      if (event.touches[1]) {
        this.startDistance = this.getDistance(
          event.touches[0],
          event.touches[1]
        )
      }
      // 记录点击瞬间的鼠标坐标
      this.startX = event.touches[0].clientX
      this.startY = event.touches[0].clientY
    },
    // 鼠标抬起
    onMouseUp(index) {
      this.dragging = false
      // this.domIndex = -1
    },
    // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑
    onMouseMove(index) {
      // 禁止默认事件--下拉
      event.preventDefault()
      if (!this.dragging) return
      if (this.domIndex != index) return
      // console.log(event.touches[0])

      // 双指缩放
      if (event.touches[1]) {
        const distance = this.getDistance(event.touches[0], event.touches[1])
        const scale = distance / this.startDistance
        this.materialList[index].scale = scale
      }
      const deltaX = event.touches[0].clientX - this.startX
      const deltaY = event.touches[0].clientY - this.startY
      // console.log(deltaX)
      this.materialList[index].x += deltaX
      this.materialList[index].y += deltaY

      this.startX = event.touches[0].clientX
      this.startY = event.touches[0].clientY

      // 得到父子盒子信息
      const fatherRect = this.$refs.fatherBox.getBoundingClientRect()
      // 子盒子信息
      const sonRect = document
        .getElementById(`item${index}`)
        .getBoundingClientRect()
      // 限制X轴
      // console.log(fatherRect)
      // console.log(sonRect)
      if (this.materialList[index].x < -sonRect.width) {
        this.materialList[index].x = 0
        this.exceed()
      }
      if (this.materialList[index].x > fatherRect.width) {
        this.materialList[index].x = 0
        this.exceed()
      }
      // 限制Y轴
      if (this.materialList[index].y < -sonRect.height) {
        this.materialList[index].y = 0
        this.exceed()
      }
      if (this.materialList[index].y > fatherRect.height) {
        this.materialList[index].y = 0
        this.exceed()
      }
    },
    // 控制台
    controlImg(type) {
      if (this.domIndex == -1) {
        Toast('请选择素材')
        return
      }
      if (type == 1) {
        this.materialList[this.domIndex].scale += 0.1
      }
      if (type == 2) {
        this.materialList[this.domIndex].scale -= 0.1
      }
      if (type == 3) {
        this.materialList[this.domIndex].zIndex += 1
      }
      if (type == 4) {
        this.materialList[this.domIndex].zIndex -= 1
      }
    },
    // 素材超出显示范围
    exceed() {
      Toast('素材超出显示范围')
    },
    // 计算双指距离
    getDistance(touch1, touch2) {
      const dx = touch1.pageX - touch2.pageX
      const dy = touch1.pageY - touch2.pageY
      return Math.sqrt(dx * dx + dy * dy)
    },
    go(url) {
      this.$router.push(url)
    }
  },
  created() {},
  mounted() {
    this.inPage = true
    scrollToID('top')
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: content-box !important;
}
.control {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-around;
  width: 200px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #fff;
  z-index: 999999;
}
.page {
  transform: translateX(30%);
  opacity: 0;
  transition: all 0.5s; // global-transition
  &.active {
    opacity: 1;
    transform: translateX(0);
  }
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: green;

  overflow: hidden;
  .active {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    border: 10px solid rgba(0, 0, 0, 0.5);
  }
  .material {
    position: absolute;
    top: 0;
    left: 0;
    // width: 150px;
    // height: 140px;
    // background-color: red;
    img {
      width: 150px;
      height: 150px;
      // background-color: red;
    }
  }
}
</style>
