<template>
  <div v-if="props.modelValue" class="pop__wrapper_box">
    <div class="content">
      <div class="dialog_box">
        <div class="header">
          <div class="left">
            <div class="t-icon t-icon-fangda handle_icon" @click="tapEnlarge"></div>
            <div class="t-icon t-icon-suoxiao handle_icon" @click="tapLessen"></div>
          </div>
          <div class="right">
            <div class="t-icon t-icon-guanbi handle_icon" @click="tapClose"></div>
          </div>
        </div>
        <div class="area">
          <div
            ref="imgArea"
            :style="{
              transform: `translate(${movableData.x}px, ${movableData.y}px) scale(${movableData.scale})`,
            }"
            class="area-content"
            @mousedown.prevent="startDrag"
            @touchstart.prevent="startDrag"
          >
            <img ref="img" :src="picture" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    modelValue: boolean
    picture: string
  }>(),
  {},
)

const emits = defineEmits(['update:modelValue'])

const dragging = ref(false) // 是否处于拖拽状态
const imgArea = ref()
const img = ref()
const movableData = ref({
  x: 0,
  y: 0,
  scale: 1,
})
const scaleData = ref(1) // 另外存一份放大倍率
const distance = ref({
  startDistance: 0,
  endDistance: 0,
})
// 放大
function tapEnlarge() {
  if (movableData.value.scale < 2) {
    movableData.value.scale += 0.1
  }
}
// 缩小
function tapLessen() {
  if (movableData.value.scale > 0.6) {
    movableData.value.scale -= 0.1
  }
}

function tapClose() {
  emits('update:modelValue', false)
}

function touchTwo(e: anyObj[], mode: 'startDistance' | 'endDistance') {
  // 双指缩放
  const one = {
    x: e[0].pageX, // 第一根手指的横坐标
    y: e[0].pageY, // 第一根手指的纵坐标
  } // 第一根手指的横坐标
  const two = {
    x: e[1].pageX, // 第二根手指的横坐标
    y: e[1].pageY, // 第二根手指的纵坐标
  }

  distance.value[mode] = getDistance(one, two)
}

function getDistance(start: anyObj, stop: anyObj) {
  return Math.sqrt(
    Math.pow(Math.abs(start.x - stop.x), 2) + Math.pow(Math.abs(start.y - stop.y), 2),
  )
}

const startDrag = (event: anyObj) => {
  if (event.touches?.length === 2) {
    // 两个触点
    touchTwo(event.touches, 'startDistance')

    return
  }
  dragging.value = true
  const x = (event.touches ? event.touches[0].pageX : event.pageX) - movableData.value.x
  const y = (event.touches ? event.touches[0].pageY : event.pageY) - movableData.value.y

  const move = (event: anyObj) => {
    // console.log('event.touches[0].pageX', event.touches[0])

    if (event.touches?.length === 2) {
      // 两个触点
      touchTwo(event.touches, 'endDistance')
      const scale2 =
        scaleData.value + distance.value.endDistance / distance.value.startDistance - 1.01 // 减去原本的1倍   0.01是防止小数计算误差
      movableData.value.scale = scale2 > 2 ? 2 : scale2 < 0.5 ? 0.5 : scale2 // 最大2倍  最小0.5倍
      return
    }
    if (dragging.value) {
      movableData.value.x = (event.touches ? event.touches[0].pageX : event.pageX) - x
      movableData.value.y = (event.touches ? event.touches[0].pageY : event.pageY) - y
    }
  }
  const stopDrag = () => {
    distance.value.startDistance = distance.value.endDistance = 0
    scaleData.value = movableData.value.scale
    dragging.value = false
    document.removeEventListener('mousemove', move)
    document.removeEventListener('touchmove', move)
    document.removeEventListener('mouseup', stopDrag)
    document.removeEventListener('touchend', stopDrag)
  }

  document.addEventListener('mousemove', move)
  document.addEventListener('touchmove', move)
  document.addEventListener('mouseup', stopDrag)
  document.addEventListener('touchend', stopDrag)
}
onUnmounted(() => {
  document.removeEventListener('mousemove', () => {})
  document.removeEventListener('mouseup', () => {})
  document.removeEventListener('touchmove', () => {})
  document.removeEventListener('touchend', () => {})
})
</script>

<style lang="scss" scoped>
.dialog_box {
  position: relative;
  width: 1120px;
  height: 58.5vh;
  background-color: #fffef5;
  border-radius: 2.5vh;
  color: #383835;
  font-size: 2.67vh;

  .area {
    width: 1120px;
    height: 52.5vh;
    border-radius: 0 0 2.5vh 2.5vh;
    overflow: hidden;
  }

  .area-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: grab;
  }

  .header {
    display: flex;
    justify-content: space-between;
    padding: 1vh 32px;
    height: 6vh;
    border-radius: 2.5vh 2.5vh 0 0;
    background-color: #f2f1e6;
    box-sizing: border-box;

    .handle_icon {
      width: 48px;
      height: 4vh;
      cursor: pointer;
    }

    .left {
      display: flex;
      .handle_icon {
        &:first-child {
          margin-right: 24.013px;
        }
      }
    }
  }
}

.pop__wrapper_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 999;
  background-color: rgba($color: #000000, $alpha: 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
