<template>
  <div v-if="proportion" :class="inPage ? 'page active' : 'page'" id="pageBody">
    <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.scList"
        :key="index"
        class="material"
        :style="{
          transformOrigin: 'top left',
          transform: 'scale(' + item.w + ') ',
          zIndex: item.z,
          top: item.y + 'px',
          left: item.x + 'px'
        }"
      >
        <div>{{ item.text }}</div>
        <img :src="item.material" alt="" />
        <!-- 边框 -->
        <div :class="domIndex == index ? 'active' : ''"></div>
      </div>

      <!-- 数字人 -->
      <div
        id="virtual"
        @touchmove="onMouseMove1()"
        @touchstart="onMouseDown1()"
        @touchend="onMouseUp1()"
        class="material"
        :style="{
          transformOrigin: 'top left',
          transform: 'scale(' + materialList.virtual.w / proportion + ') ',
          zIndex: materialList.virtual.z,
          top: materialList.virtual.y / proportion + 'px',
          left: materialList.virtual.x / proportion + 'px'
        }"
      >
        <!-- <div>{{ item.text }}</div> -->
        <img :src="materialList.virtual.material" alt="" />
        <!-- 边框 -->
        <!-- <div :class="domIndex1 == 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
    },
    videoType: {
      default: false
    },
    proportion: {
      default: false
    }
  },
  data() {
    return {
      inPage: false,
      dragging: false,
      proportionSon: null,
      startDistance: 0, //两指起始位置
      startX: 0,
      startY: 0, // 鼠标位置x y
      windowWidth: 0,
      windowHeight: 0,
      scale: 1,
      domIndex: -1, //当前点击的图片
      domIndex1: -1 //当前点击的数字人
    }
  },

  computed: {
    ...mapState({
      characters: (state) => state.publicObj.characters,
      //动态计算样式
      bgStyle() {
        if (this.videoType == 1) {
          return {
            // width: '1080px',
            // height: '1920px',
            // transform: 'scale(0.2)',
            backgroundImage: `url(${this.materialList.BGI.material})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center'
          }
        }
        if (this.videoType == 2) {
          return {
            // width: '1920px',
            // height: '1080px',
            // transform: 'scale(0.2)',
            backgroundImage: `url(${this.materialList.BGI.material})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center'
          }
        }
      }
    })
  },

  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).toFixed(2)
        this.materialList.scList[index].w = scale
        this.materialList.scList[index].h = scale
      }
      const deltaX = event.touches[0].clientX - this.startX
      const deltaY = event.touches[0].clientY - this.startY
      // console.log(deltaX)
      this.materialList.scList[index].x += deltaX
      this.materialList.scList[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.scList[index].x < -sonRect.width) {
        this.materialList.scList[index].x = 0
        this.exceed()
      }
      if (this.materialList.scList[index].x > fatherRect.width) {
        this.materialList.scList[index].x = 0
        this.exceed()
      }
      // 限制Y轴
      if (this.materialList.scList[index].y < -sonRect.height) {
        this.materialList.scList[index].y = 0
        this.exceed()
      }
      if (this.materialList.scList[index].y > fatherRect.height) {
        this.materialList.scList[index].y = 0
        this.exceed()
      }
    },

    // 数字人的处理
    // 鼠标按下事件
    onMouseDown1() {
      this.domIndex = -2
      this.dragging = true
      //双指缩放初始化
      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
    },
    // 鼠标抬起
    onMouseUp1() {
      this.dragging = false
    },
    // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑
    onMouseMove1() {
      // 禁止默认事件--下拉
      event.preventDefault()
      if (!this.dragging) 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).toFixed(2)
        this.materialList.virtual.w = scale
        this.materialList.virtual.h = scale
      }
      // 得到父子盒子信息
      const fatherRect = this.$refs.fatherBox.getBoundingClientRect()
      // 子盒子信息
      const sonRect = document.getElementById(`virtual`).getBoundingClientRect()

      const deltaX = event.touches[0].clientX - this.startX
      const deltaY = event.touches[0].clientY - this.startY
      // console.log(deltaX)
      this.materialList.virtual.x += deltaX.toFixed(0) * this.proportion
      this.materialList.virtual.y += deltaY.toFixed(0) * this.proportion

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

      // 限制X轴
      // console.log(fatherRect)
      // console.log(sonRect)
      // if (this.materialList.virtual.x < -sonRect.width) {
      //   this.materialList.virtual.x = 0
      //   this.exceed()
      // }
      // if (this.materialList.virtual.x > fatherRect.width) {
      //   this.materialList.virtual.x = 0
      //   this.exceed()
      // }
      // // 限制Y轴
      // if (this.materialList.virtual.y < -sonRect.height) {
      //   this.materialList.virtual.y = 0
      //   this.exceed()
      // }
      // if (this.materialList.virtual.y > fatherRect.height) {
      //   this.materialList.virtual.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) {
        // 如果是点的数字人
        if (this.domIndex == -2) {
          this.materialList.virtual.z += 1
          if (this.materialList.virtual.z >= 10) {
            this.materialList.virtual.z = 10
          }
          return
        }
        // 点的素材
        this.materialList.scList[this.domIndex].z += 1
        if (this.materialList.scList[this.domIndex].z >= 10) {
          this.materialList.scList[this.domIndex].z = 10
        }
      }
      if (type == 4) {
        // 如果是点的数字人
        if (this.domIndex == -2) {
          this.materialList.virtual.z -= 1
          if (this.materialList.virtual.z <= 0) {
            this.materialList.virtual.z = 0
          }
          return
        }
        // 点的素材
        this.materialList.scList[this.domIndex].z -= 1
        if (this.materialList.scList[this.domIndex].z <= 0) {
          this.materialList.scList[this.domIndex].z = 0
        }
      }
    },
    // 素材超出显示范围
    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)
    }
  },
  watch: {
    // proportion(newValue) {
    //   this.proportionSon = newValue
    // }
  },
  created() {},
  mounted() {
    this.inPage = true
    scrollToID('top')
    // const elementWidth = document.getElementById('pageBody').clientHeight
    // this.proportionSon = elementWidth / 1080
    // console.log(elementWidth)
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: content-box !important;
}

.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%;
  // width: 1080px;
  // height: 1920px;
  // transform: scale(0.3, 0.3);
  // transform-origin: top left;
  // 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: 216px;
      // height: 150px;
      // background-color: red;
    }
  }
}
</style>
