<template>
  <canvas id="captcha" ref="sliderRef"></canvas>
</template>

<script lang="ts" setup name="ExtCaptcha">
//验证码组件
import {onMounted, reactive} from 'vue';
import {$body} from "/@/utils/request";
import {Msg} from "/@/utils/message";

const sliderRef = reactive(null);

const state = reactive({
  currentCaptchaConfig: {},
  isPrintLog: true
})


onMounted(()=>{
  initConfig(590,360,590,50,null)
})

const clearPreventDefault = (event: any) => {
  if (event.preventDefault) {
    event.preventDefault();
  }
}

const clearAllPreventDefault = () => {
  if (sliderRef?.value) {
    sliderRef.value.addEventListener("touchmove", clearPreventDefault, false)
  }
}

const printLog = (...params: Array<any>) => {
  if (state.isPrintLog) {
    console.log(JSON.stringify(params));
  }
}

const initConfig = (bgImageWidth: number, bgImageHeight: number, sliderImageWidth: number, sliderImageHeight: number, end: any) => {
  state.currentCaptchaConfig = {
    startTime: new Date(),
    trackArr: [],
    movePercent: 0,
    bgImageWidth,
    bgImageHeight,
    sliderImageWidth,
    sliderImageHeight,
    end
  }
  printLog("init", state.currentCaptchaConfig);
}


const down = (event: any) => {
  let targetTouches = event.originalEvent ? event.originalEvent.targetTouches : event.targetTouches;
  let startX = event.pageX;
  let startY = event.pageY;
  if (startX === undefined) {
    startX = Math.round(targetTouches[0].pageX);
    startY = Math.round(targetTouches[0].pageY);
  }
  state.currentCaptchaConfig.startX = startX;
  state.currentCaptchaConfig.startY = startY;

  const pageX = state.currentCaptchaConfig.startX;
  const pageY = state.currentCaptchaConfig.startY;
  const startTime = state.currentCaptchaConfig.startTime;
  const trackArr = state.currentCaptchaConfig.trackArr;
  trackArr.push({
    x: pageX - startX,
    y: pageY - startY,
    type: "down",
    t: (new Date().getTime() - startTime.getTime())
  });
  printLog("start", startX, startY)
  // pc
  window.addEventListener("mousemove", move);
  window.addEventListener("mouseup", up);
  // 手机端
  window.addEventListener("touchmove", move, false);
  window.addEventListener("touchend", up, false);
  doDown(state.currentCaptchaConfig);
}


const move = (event: any) => {
  if (event instanceof TouchEvent) {
    event = event.touches[0];
  }
  let pageX = Math.round(event.pageX);
  let pageY = Math.round(event.pageY);
  const startX = state.currentCaptchaConfig.startX;
  const startY = state.currentCaptchaConfig.startY;
  const startTime = state.currentCaptchaConfig.startTime;
  const end = state.currentCaptchaConfig.end;
  const bgImageWidth = state.currentCaptchaConfig.bgImageWidth;
  const trackArr = state.currentCaptchaConfig.trackArr;
  let moveX = pageX - startX;
  const track = {
    x: pageX - startX,
    y: pageY - startY,
    type: "move",
    t: (new Date().getTime() - startTime.getTime())
  };
  trackArr.push(track);
  if (moveX < 0) {
    moveX = 0;
  } else if (moveX > end) {
    moveX = end;
  }
  state.currentCaptchaConfig.moveX = moveX;
  state.currentCaptchaConfig.movePercent = moveX / bgImageWidth;
  doMove(state.currentCaptchaConfig);
  printLog("move", track)
}


const up = (event: any) => {
  window.removeEventListener("mousemove", move);
  window.removeEventListener("mouseup", up);
  window.removeEventListener("touchmove", move);
  window.removeEventListener("touchend", up);
  if (event instanceof TouchEvent) {
    event = event.changedTouches[0];
  }
  state.currentCaptchaConfig.stopTime = new Date();
  let pageX = Math.round(event.pageX);
  let pageY = Math.round(event.pageY);
  const startX = state.currentCaptchaConfig.startX;
  const startY = state.currentCaptchaConfig.startY;
  const startTime = state.currentCaptchaConfig.startTime;
  const trackArr = state.currentCaptchaConfig.trackArr;

  const track = {
    x: pageX - startX,
    y: pageY - startY,
    type: "up",
    t: (new Date().getTime() - startTime.getTime())
  }

  trackArr.push(track);
  printLog("up", track)
  valid(state.currentCaptchaConfig);
}

const doDown = (config:any) => {
  // $("#slider-move-btn").css("background-position", "-5px 31.0092%")
}

const doMove = (currentCaptchaConfig: any) => {
  // const moveX = currentCaptchaConfig.moveX;
  // $("#rotate-move-btn").css("transform", "translate(" + moveX + "px, 0px)")
  // $(".rotate-img-div").css("transform", "rotate(" + (moveX / (currentCaptchaConfig.end / 360)) + "deg)")
}

const valid = (captchaConfig: any) => {
  let data = {
    bgImageWidth: captchaConfig.bgImageWidth,
    bgImageHeight: captchaConfig.bgImageHeight,
    sliderImageWidth: captchaConfig.sliderImageWidth,
    sliderImageHeight: captchaConfig.sliderImageHeight,
    startSlidingTime: captchaConfig.startTime,
    endSlidingTime: captchaConfig.stopTime, // 官方demo 这里有个语法错误trackList: captchaConfig.trackArr};let sendData = {'id' : currentCaptchaId,'captchaTrack': data}$.ajax({type:"POST",url:"http://localhost:8080/check",contentType: "application/json", dataType:"json",data:JSON.stringify(sendData),success:function (res) {if (res) {alert("验证成功!!!");}refreshCaptcha();}})
  }
  $body('/captcha/valid', data).then(() => {
    Msg.message('校验成功', 'success')
  })
}
</script>

<style scoped>

</style>