// 为canvas绘制的图形设置点击事件
// 效果：
// 原理：
// 给canvas设置点击事件，点击时获取点击位置的信息，通过判断点击位置是否包含在图形中来执⾏对应的效果。
// 详解：
// 1.通过 getBoundingClientRect ⽅法获取canvas相对于可视区域的偏移量
// 2.canvas点击事件触发时使⽤clientX、clientY⽅法获取点击位置，计算可得到点击位置在canvas中的坐标
// 3.清空画布
// 4.重绘画布，在绘制完每个图形的时候都执⾏⼀次isPointInPath⽅法判断点击位置是否在该图形中，决定是否要执⾏onClick事件代码：（react hook语法）
// index.js
import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';
import envir_co2 from '@/assets/images/page-enviroment/co2.svg';
import bg_disable from '@/assets/images/page-equipment/bg_disable.png';

const NoAuth: React.FC = () => {
  /* 菜单信息 */
  const MenuInfo = [{ x: 100, y: 100, msg: 1 }];
  const DrawImg = (ctxMsg, position) => {
    const { ctx, x = 50, y = 50, length = 50, onClick = () => {} } = ctxMsg;
    // ctx.scale(2, 2);

    ctx.rotate((10 * Math.PI) / 180);

    ctx.beginPath();
    ctx.moveTo(50, 160);
    ctx.lineTo(200, 160);
    ctx.lineTo(320, 340);
    ctx.bezierCurveTo(320, 460, 120, 460, 150, 340);
    // ctx.lineTo(120, 340);
    ctx.lineTo(50, 160);
    ctx.stroke();

    // ctx.beginPath();
    // ctx.arc(100, 75, 50, 0, 1 * Math.PI);
    // ctx.fill();
    // ctx.stroke();

    // ctx.strokeStyle = 'green';
    // ctx.beginPath();
    // ctx.moveTo(100, 100);
    // ctx.lineTo(200, 100);
    // ctx.stroke();

    ctx.fillStyle = 'green';
    ctx.font = '30px Arial';
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';
    ctx.fillText('hello world', 120, 200);

    //创建image对象
    var imgObj = new Image();
    imgObj.src = envir_co2;
    //待图片加载完后，将其显示在canvas上
    imgObj.onload = function () {
      ctx.drawImage(this, 120, 200, 40, 40); //this即是imgObj,保持图片的原始大小：470*480
      //ctx.drawImage(this, 0, 0,1024,768);//改变图片的大小到1024*768
    };

    // ctx.beginPath();
    // ctx.arc(20,20, 100, 0, Math.PI * 2);
    // ctx.clip();

    // ctx.fillStyle = "pink";
    // ctx.fillRect(20, 20, 100,100);
  };

  const DrawImg2 = (ctxMsg, position) => {
    const { ctx, x = 50, y = 50, length = 50, onClick = () => {} } = ctxMsg;

    // ctx.scale(2, 2);
    ctx.save();
    ctx.translate(50, 50); //平移 改变0点位置
    ctx.rotate((0 * Math.PI) / 180); //旋转 旋转坐标轴

    var imgObj2 = document.getElementById('bg_disable');
    var pat = ctx.createPattern(imgObj2, 'repeat');
    ctx.fillStyle = pat; //重复的背景图片 条纹
    //ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(150, 0);
    ctx.lineTo(270, 180);
    ctx.bezierCurveTo(270, 300, 80, 300, 80, 180); //画弧线
    ctx.lineTo(0, 0);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();

    //ctx.fillStyle = 'rgba(19,74,249,0.2)';
    ctx.fillStyle = 'rgba(19,74,249,1)';
    ctx.font = '30px Arial';
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';
    var txt = 'hello world';
    ctx.fillText(txt, 70, 40, 80); //80是最大宽
    ctx.fillText('width:' + ctx.measureText(txt).width, 70, 70);
    //创建image对象
    var imgObj = new Image();
    imgObj.src = envir_co2;
    //待图片加载完后，将其显示在canvas上
    imgObj.onload = function () {
      ctx.translate(50, 50); //平移 改变0点位置
      ctx.drawImage(this, 0, 0, 40, 40); //this即是imgObj,保持图片的原始大小：470*480
      //ctx.drawImage(this, 0, 0,1024,768);//改变图片的大小到1024*768
    };

    ctx.restore();
    ctx.beginPath();
    ctx.arc(600, 200, 150, 0, 2 * Math.PI);
    ctx.stroke();

    //画时针
    ctx.translate(600, 200); //平移 改变0点位置
    for (var i = 1; i < 4; i++) {
      ctx.save();
      ctx.rotate((20 * i * Math.PI) / 180); //旋转 旋转坐标轴
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(50, 0);
      ctx.stroke();
      ctx.restore();
    }
  };

  // canvas
  const meCanvas = useRef();
  // 画布
  const ctx = useRef();
  // canvas位置
  const [cInfo, setCInfo] = useState({ top: 0, left: 0 });

  /* 获取canvas位置 */
  useEffect(() => {
    //使canvas铺满可视区域
    meCanvas.current.width = document.documentElement.clientWidth;
    meCanvas.current.height = document.documentElement.clientHeight;
    //更新canvas位置
    setCInfo(meCanvas.current.getBoundingClientRect());
  }, []);

  /* 绘制图形 */
  useEffect(() => {
    ctx.current = meCanvas.current.getContext('2d');
    const qbb = ctx.current;
    qbb.lineWidth = 1.5;
    qbb.lineJoin = 'round';
    //qbb.miterLimit = 5;
    qbb.strokeStyle = 'blue';
    MenuInfo.forEach((i) => {
      DrawImg2(
        {
          ctx: qbb,
          ...i,
          onClick: () => {
            console.log(i.msg);
          },
        },
        null,
      );
    });
  }, []);

  /* 画布点击事件 */
  const CanvasOnClick = (e) => {
    //ctx.current.clearRect(0, 0, meCanvas.current.width, meCanvas.current.height);
    // MenuInfo.forEach((i) => {
    //   DrawImg2(
    //     {
    //       ctx: ctx.current,
    //       ...i,
    //       onClick: () => {
    //         console.log(i.msg);
    //       },
    //     },
    //     { x: e.clientX - cInfo.left, y: e.clientY - cInfo.top },
    //   );
    // });
  };

  return (
    <div>
      <img src={bg_disable} id="bg_disable" className="bg_disable"></img>
      <canvas
        onClick={CanvasOnClick}
        ref={meCanvas}
        className={styles.meCanvas}
        width={800}
        height={800}
      ></canvas>
    </div>
  );
};

export default NoAuth;
