<template>
  <div @click.stop="clickEvt" :style="customStyle">
    <canvas
        canvas-id="myCanvas"
        id="myCanvas"
        :style="{ width: contentWidth +'px', height: contentHeight+'px'}"
    ></canvas>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, watch, watchEffect,onMounted, getCurrentInstance  } from "vue";
interface Props {
  identifyCode?: string;
  fontSizeMin?: number;
  fontSizeMax?: number;
  backgroundColorMin?: number;
  backgroundColorMax?: number;
  colorMin?: number;
  colorMax?: number;
  lineColorMin?: number;
  lineColorMax?: number;
  dotColorMin?: number;
  dotColorMax?: number;
  contentWidth?: number;
  contentHeight?: number;
  customStyle?: any;
  ctx?: any;
}

const props = withDefaults(defineProps<Props>(), {
  identifyCode: "jykj",
  fontSizeMin: 18,
  fontSizeMax: 30,
  backgroundColorMin: 180,
  backgroundColorMax: 240,
  colorMin: 50,
  colorMax: 160,
  lineColorMin: 40,
  lineColorMax: 180,
  dotColorMin: 0,
  dotColorMax: 255,
  contentWidth: 100,
  contentHeight: 30,
});

const emit = defineEmits(['click'])
// canvas 绘图上下文
const ctx2 = ref();

// 生成一个随机数
function randomNum(min:number, max:number) {
  return Math.floor(Math.random() * (max - min) + min);
}
// 生成一个随机的颜色
function randomColor(min:number, max:number) {
  var r = randomNum(min, max);
  var g = randomNum(min, max);
  var b = randomNum(min, max);
  
  return "rgb(" + r + "," + g + "," + b + ")";
}

function drawText(ctx:any, txt:any, i:number) {
  ctx.setFillStyle(randomColor(props.colorMin, props.colorMax));
  ctx.font = randomNum(props.fontSizeMin, props.fontSizeMax) + "px SimHei";
  var x = (i + 1) * (props.contentWidth / (props.identifyCode.length + 1));
  var y = randomNum(props.fontSizeMax, props.contentHeight - 5);
  var deg = randomNum(-30, 30);
  // 修改坐标原点和旋转角度
  ctx.translate(x, y);
  ctx.rotate((deg * Math.PI) / 270);
  ctx.fillText(txt, 0, 0);
  // 恢复坐标原点和旋转角度
  ctx.rotate((-deg * Math.PI) / 270);
  ctx.translate(-x, -y);
}
function drawLine(ctx:any) {
  // 绘制干扰线
  for (let i = 0; i < 2; i++) {
    ctx.strokeStyle = randomColor(props.lineColorMin, props.lineColorMax);
    ctx.beginPath();
    ctx.moveTo(
      randomNum(0, props.contentWidth),
      randomNum(0, props.contentHeight)
    );
    ctx.lineTo(
      randomNum(0, props.contentWidth),
      randomNum(0, props.contentHeight)
    );
    ctx.stroke();
  }
}
function drawDot(ctx:any) {
  // 绘制干扰点
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = randomColor(0, 255);
    ctx.beginPath();
    ctx.arc(
      randomNum(0, props.contentWidth),
      randomNum(0, props.contentHeight),
      1,
      0,
      2 * Math.PI
    );
    ctx.fill();
  }
}
function drawPic(ctx:any) {
  ctx.setTextBaseline("bottom");
  let color = randomColor(
    props.backgroundColorMin,
    props.backgroundColorMax
  );
  ctx.setFillStyle(color);
  ctx.fillRect(0, 0, props.contentWidth, props.contentHeight);
  // 绘制文字
  for (let i = 0; i < props.identifyCode.length; i++) {
    drawText(ctx, props.identifyCode[i], i);
  }
  drawLine(ctx);
  drawDot(ctx);
  ctx.draw();
}
function clickEvt() {
    emit('click')
}

onMounted(async()=>{
  let instance = getCurrentInstance() as any;
  ctx2.value = await uni.createCanvasContext("myCanvas", instance);
});
watchEffect(()=>{
    if(props.identifyCode){
      if(ctx2.value){
        drawPic(ctx2.value);
      }
    }
});

</script>
<style lang="scss" scoped>
</style>


