import React, { Component } from 'react';
import { message } from 'antd';
import styles from './PDFCut.less';
import PDF from 'pdfjs-dist';
import { getLocale } from 'umi-plugin-react/locale';
import tagPrintLogo from '../../assets/tagPrintLogo.png';
import enTagPrintLogo from '../../assets/logo-en.png';
import router from 'umi/router';
import jsPDF from 'jspdf';

class PDFCut extends Component {
  state = {
    pdfName: '',
    pdfDoc: null,
    pages: null,
    rect: {
      x: 0,
      y: 0,
      x1: 0,
      y1: 0,
    }, // 裁剪框的位置信息
    mousedown: false, // 鼠标状态是否为按下移动
    offset: 0, // 裁剪框虚线的偏移量（做动画）
    rafId: null,
    realRate: 8, // 真实展示的pdf倍率（px与mm单位转化关系为8倍）
    showRate: 2, // 页面上展示的画布需要缩放的倍率
    moveCutRect: false, // 当前鼠标事件是否为移动裁剪框
    moveCutRectXY: { x: 0, y: 0 }, // 移动裁剪框初始位置
    scaleCutRect: false, // 当前鼠标事件是否为缩放裁剪框
    scaleCutRectXY: { x: 0, y: 0 }, // 缩放裁剪框初始位置
  };

  componentDidMount() {
    let canvas = document.getElementById('draw-canvas');
    canvas.addEventListener('mousemove', e => {
      let canvas_rect = canvas.getBoundingClientRect();
      let x = e.clientX - canvas_rect.left;
      let y = e.clientY - canvas_rect.top;
      if (this.hasRect()) {
        if (
          x > this.state.rect.x - 4 &&
          x < this.state.rect.x + 4 &&
          y > this.state.rect.y - 4 &&
          y < this.state.rect.y + 4
        ) {
          // 左上顶点
          canvas.style.cursor = 'se-resize';
        } else if (
          x > this.state.rect.x1 - 4 &&
          x < this.state.rect.x1 + 4 &&
          y > this.state.rect.y - 4 &&
          y < this.state.rect.y + 4
        ) {
          // 右上顶点
          canvas.style.cursor = 'ne-resize';
        } else if (
          x > this.state.rect.x - 4 &&
          x < this.state.rect.x + 4 &&
          y > this.state.rect.y1 - 4 &&
          y < this.state.rect.y1 + 4
        ) {
          // 坐下顶点
          canvas.style.cursor = 'ne-resize';
        } else if (
          x > this.state.rect.x1 - 4 &&
          x < this.state.rect.x1 + 4 &&
          y > this.state.rect.y1 - 4 &&
          y < this.state.rect.y1 + 4
        ) {
          // 右下顶点
          canvas.style.cursor = 'se-resize';
        } else {
          if (
            x > this.state.rect.x &&
            x < this.state.rect.x1 &&
            y > this.state.rect.y &&
            y < this.state.rect.y1
          ) {
            canvas.style.cursor = 'move';
          } else {
            canvas.style.cursor = 'default';
          }
        }
      } else {
        canvas.style.cursor = 'default';
      }
    });
  }

  goHome = () => {
    router.push('/template');
  };

  // 根据文件流获取url地址（使用blob)
  getObjectURL = data => {
    let blob = new Blob([data], { type: 'application/vnd.ms-excel;charset=utf-8' }); //文件流转为blob
    let url = window.URL.createObjectURL(blob); //创建下载的链接
    return url;
  };
  //加载PDF
  _loadFile = url => {
    PDF.getDocument(url).then(pdf => {
      this.setState(
        {
          pdfDoc: pdf,
          pages: pdf.numPages,
        },
        () => {
          this._renderPage(); //渲染PDF
        },
      );
    });
  };
  //渲染PDF
  _renderPage = () => {
    this.state.pdfDoc.getPage(1).then(page => {
      let canvas = document.getElementById('the-canvas1'); //canvas画布作为PDF展示容器~~
      let ctx = canvas.getContext('2d');
      let dpr = window.devicePixelRatio || 1;
      let bsr =
        ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio ||
        1;
      let ratio = dpr / bsr;
      // 获取真实pdf（mm单位画布）的画布大小
      let viewport = page.getViewport(this.state.realRate);
      canvas.width = viewport.width * ratio;
      canvas.height = viewport.height * ratio;
      canvas.style.width = viewport.width + 'px';
      canvas.style.height = viewport.height + 'px';
      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
      let renderContext = {
        canvasContext: ctx,
        viewport: viewport,
      };
      page.render(renderContext);

      // 获取上传的pdf默认大小
      let viewport_org = page.getViewport(1);
      let width_org = viewport_org.width * ratio;
      let height_org = viewport_org.height * ratio;
      let width_view = window.innerWidth - 64;
      let height_view = window.innerHeight - 140;
      // 展示的canvas应该显示的缩放倍率
      let showRate = Math.floor(height_view / height_org);
      // 展示在页面上的canvas画布，缩放后的大小
      let canvas2 = document.getElementById('the-canvas2'); //canvas画布作为PDF展示容器~~
      let ctx2 = canvas2.getContext('2d');
      let viewport2 = page.getViewport(showRate);

      // 如果宽度超过屏幕宽度，则按照宽度比例从新计算
      if (viewport2.width * ratio > width_view) {
        showRate = Math.floor(width_view / width_org);
        viewport2 = page.getViewport(showRate);
      }
      this.setState({
        showRate: showRate,
      });

      canvas2.width = viewport2.width * ratio;
      canvas2.height = viewport2.height * ratio;
      canvas2.style.width = viewport2.width + 'px';
      canvas2.style.height = viewport2.height + 'px';
      ctx2.setTransform(ratio, 0, 0, ratio, 0, 0);
      let renderContext2 = {
        canvasContext: ctx2,
        viewport: viewport2,
      };
      page.render(renderContext2);

      this.setDrawCanvas(
        viewport2.width * ratio,
        viewport2.height * ratio,
        viewport2.width,
        viewport2.height,
      );
    });
  };
  handleFileChange = e => {
    let files = e.target.files;
    this.setState({
      pdfName: files[0].name.split('.pdf')[0],
    });
    let url = this.getObjectURL(files[0]);
    this._loadFile(url);
  };
  // 剪切展示画布清空
  setDrawCanvas = (vw, vh, w, h) => {
    let c = document.getElementById('draw-canvas');
    c.width = vw;
    c.height = vh;
    c.style.width = w + 'px';
    c.style.height = h + 'px';

    let context = c.getContext('2d');
    context.clearRect(0, 0, c.width, c.height);
  };
  // 是否已经绘制了裁剪框
  hasRect = () => {
    let width = this.state.rect.x1 - this.state.rect.x;
    let height = this.state.rect.y1 - this.state.rect.y;
    return !(width === 0 || height === 0);
  };
  // 获取当前鼠标的位置信息
  getMousePoint = e => {
    let canvas = document.getElementById('draw-canvas');
    let canvas_rect = canvas.getBoundingClientRect();
    let x = e.nativeEvent.clientX - canvas_rect.left;
    let y = e.nativeEvent.clientY - canvas_rect.top;
    return { x, y };
  };
  // 当前点击的范围是在裁剪框矩形内
  mouseInRect = e => {
    let { x, y } = this.getMousePoint(e);
    return (
      this.hasRect() &&
      x > this.state.rect.x &&
      x < this.state.rect.x1 &&
      y > this.state.rect.y &&
      y < this.state.rect.y1
    );
  };
  // 当前点击的范围是在裁剪框矩形顶角，如在顶角进行缩放裁剪框
  mouseOnRect = e => {
    if (this.hasRect()) {
      let { x, y } = this.getMousePoint(e);
      if (
        x > this.state.rect.x - 4 &&
        x < this.state.rect.x + 4 &&
        y > this.state.rect.y - 4 &&
        y < this.state.rect.y + 4
      ) {
        // 点击位置在左上角
        return 'left_top';
      } else if (
        x > this.state.rect.x1 - 4 &&
        x < this.state.rect.x1 + 4 &&
        y > this.state.rect.y - 4 &&
        y < this.state.rect.y + 4
      ) {
        // 点击位置在右上角
        return 'right_top';
      } else if (
        x > this.state.rect.x - 4 &&
        x < this.state.rect.x + 4 &&
        y > this.state.rect.y1 - 4 &&
        y < this.state.rect.y1 + 4
      ) {
        // 点击位置在左下角
        return 'left_bottom';
      } else if (
        x > this.state.rect.x1 - 4 &&
        x < this.state.rect.x1 + 4 &&
        y > this.state.rect.y1 - 4 &&
        y < this.state.rect.y1 + 4
      ) {
        // 点击位置在右下角
        return 'right_bottom';
      } else {
        // 点击位置不在顶点处
        return false;
      }
    } else {
      return false;
    }
  };
  // 计算移动后的裁剪框坐标信息
  calcNewRect = (x, y) => {
    let canvas = document.getElementById('draw-canvas');
    let canvas_width = canvas.width;
    let canvas_height = canvas.height;

    let x_old = this.state.moveCutRectXY.x;
    let y_old = this.state.moveCutRectXY.y;
    let x_new = 0;
    let y_new = 0;
    let width = this.state.rect.x1 - this.state.rect.x;
    let height = this.state.rect.y1 - this.state.rect.y;
    // 向左移动
    if (x_old > x) {
      x_new = this.state.rect.x - (x_old - x) < 0 ? 0 : this.state.rect.x - (x_old - x);
    } else {
      x_new = this.state.rect.x + (x - x_old);
      if (x_new + width > canvas_width) {
        x_new = canvas_width - width;
      }
    }
    // 向上移动
    if (y_old > y) {
      y_new = this.state.rect.y - (y_old - y) < 0 ? 0 : this.state.rect.y - (y_old - y);
    } else {
      y_new = this.state.rect.y + (y - y_old);
      if (y_new + height > canvas_height) {
        y_new = canvas_height - height;
      }
    }

    return { x_new, y_new, width, height };
  };
  // 计算缩放后的裁剪框坐标信息
  calcScaleRect = (x, y) => {
    let canvas = document.getElementById('draw-canvas');
    let canvas_width = canvas.width;
    let canvas_height = canvas.height;

    let x_new = 0;
    let y_new = 0;
    let width = 0;
    let height = 0;
    let x_mouse_old = this.state.scaleCutRectXY.x;
    let y_mouse_old = this.state.scaleCutRectXY.y;
    let x_old = this.state.rect.x;
    let y_old = this.state.rect.y;
    let x1_old = this.state.rect.x1;
    let y1_old = this.state.rect.y1;
    let width_old = this.state.rect.x1 - this.state.rect.x;
    let height_old = this.state.rect.y1 - this.state.rect.y;

    if (this.state.scaleCutRect === 'left_top') {
      x_new = x < 0 ? 0 : x;
      y_new = y < 0 ? 0 : y;

      if (x_mouse_old > x) {
        width = width_old + (x_mouse_old - x);
      } else {
        width = width_old - (x - x_mouse_old);
      }
      if (y_mouse_old > y) {
        height = height_old + (y_mouse_old - y);
      } else {
        height = height_old - (y - y_mouse_old);
      }

      if (x_new > x1_old - 8) {
        x_new = x1_old - 8;
        width = 8;
      }
      if (y_new > y1_old - 8) {
        y_new = y1_old - 8;
        height = 8;
      }
    } else if (this.state.scaleCutRect === 'right_top') {
      x_new = this.state.rect.x;
      y_new = y < 0 ? 0 : y;

      if (x_mouse_old > x) {
        width = width_old - (x_mouse_old - x);
      } else {
        width = width_old + (x - x_mouse_old);
      }
      if (y_mouse_old > y) {
        height = height_old + (y_mouse_old - y);
      } else {
        height = height_old - (y - y_mouse_old);
      }

      if (x < x_old + 8) {
        width = 8;
      }
      if (y_new > y1_old - 8) {
        y_new = y1_old - 8;
        height = 8;
      }
    } else if (this.state.scaleCutRect === 'left_bottom') {
      x_new = x < 0 ? 0 : x;
      y_new = this.state.rect.y;

      if (x_mouse_old > x) {
        width = width_old + (x_mouse_old - x);
      } else {
        width = width_old - (x - x_mouse_old);
      }
      if (y_mouse_old > y) {
        height = height_old - (y_mouse_old - y);
      } else {
        height = height_old + (y - y_mouse_old);
      }

      if (x_new > x1_old - 8) {
        x_new = x1_old - 8;
        width = 8;
      }
      if (y < y_old + 8) {
        height = 8;
      }
    } else if (this.state.scaleCutRect === 'right_bottom') {
      x_new = this.state.rect.x;
      y_new = this.state.rect.y;

      if (x_mouse_old > x) {
        width = width_old - (x_mouse_old - x);
      } else {
        width = width_old + (x - x_mouse_old);
      }
      if (y_mouse_old > y) {
        height = height_old - (y_mouse_old - y);
      } else {
        height = height_old + (y - y_mouse_old);
      }

      if (x < x_old + 8) {
        width = 8;
      }
      if (y < y_old + 8) {
        height = 8;
      }
    }

    return { x_new, y_new, width, height };
  };
  // 鼠标按下
  mousedownFun = e => {
    this.setState({ mousedown: true });
    let { x, y } = this.getMousePoint(e);
    if (this.mouseOnRect(e) || this.mouseInRect(e)) {
      if (this.mouseOnRect(e)) {
        let scaleCutRect = this.mouseOnRect(e);
        this.setState({ scaleCutRect, scaleCutRectXY: { x, y } });
      } else {
        this.setState({ moveCutRect: true, moveCutRectXY: { x, y } });
      }
    } else {
      this.setState(
        {
          rect: {
            x: 0,
            y: 0,
            x1: 0,
            y1: 0,
          },
        },
        () => {
          let c = document.getElementById('draw-canvas');
          let height = c.height;
          c.height = height;
          let rect = this.state.rect;
          rect.x = x;
          rect.y = y;
          this.setState({
            rect,
          });
        },
      );
    }
  };
  // 鼠标释放
  mouseupFun = e => {
    this.setState({ mousedown: false });
    let { x, y } = this.getMousePoint(e);
    if (this.state.scaleCutRect || this.state.moveCutRect) {
      if (this.state.scaleCutRect) {
        this.setState({ scaleCutRect: false });
        let { x_new, y_new, width, height } = this.calcScaleRect(x, y);
        this.setState(
          {
            rect: { x: x_new, y: y_new, x1: x_new + width, y1: y_new + height },
          },
          () => {
            cancelAnimationFrame(this.state.rafId);
            this.run(x_new, y_new, width, height);
          },
        );
      } else {
        this.setState({ moveCutRect: false });
        let { x_new, y_new, width, height } = this.calcNewRect(x, y);
        this.setState(
          {
            rect: { x: x_new, y: y_new, x1: x_new + width, y1: y_new + height },
          },
          () => {
            cancelAnimationFrame(this.state.rafId);
            this.run(x_new, y_new, width, height);
          },
        );
      }
    } else {
      let rect = this.state.rect;
      rect.x1 = x;
      rect.y1 = y;
      this.setState(
        {
          rect,
        },
        () => {
          let x = 0;
          let y = 0;
          let width = 0;
          let height = 0;
          if (this.state.rect.x > this.state.rect.x1) {
            x = this.state.rect.x1;
            width = this.state.rect.x - this.state.rect.x1;
          } else {
            x = this.state.rect.x;
            width = this.state.rect.x1 - this.state.rect.x;
          }
          if (this.state.rect.y > this.state.rect.y1) {
            y = this.state.rect.y1;
            height = this.state.rect.y - this.state.rect.y1;
          } else {
            y = this.state.rect.y;
            height = this.state.rect.y1 - this.state.rect.y;
          }
          let rect = {
            x,
            y,
            x1: x + width,
            y1: y + height,
          };
          this.setState(
            {
              rect,
            },
            () => {
              cancelAnimationFrame(this.state.rafId);
              this.run(x, y, width, height);
            },
          );
        },
      );
    }
  };
  // 鼠标移动
  mousemoveFun = e => {
    if (this.state.mousedown) {
      let { x, y } = this.getMousePoint(e);
      if (this.state.scaleCutRect || this.state.moveCutRect) {
        if (this.state.scaleCutRect) {
          let { x_new, y_new, width, height } = this.calcScaleRect(x, y);
          cancelAnimationFrame(this.state.rafId);
          this.draw(x_new, y_new, width, height);
        } else {
          let { x_new, y_new, width, height } = this.calcNewRect(x, y);
          cancelAnimationFrame(this.state.rafId);
          this.draw(x_new, y_new, width, height);
        }
      } else {
        let x_new = 0;
        let y_new = 0;
        let width = 0;
        let height = 0;

        if (this.state.rect.x > x) {
          x_new = x;
          width = this.state.rect.x - x;
        } else {
          x_new = this.state.rect.x;
          width = x - this.state.rect.x;
        }
        if (this.state.rect.y > y) {
          y_new = y;
          height = this.state.rect.y - y;
        } else {
          y_new = this.state.rect.y;
          height = y - this.state.rect.y;
        }

        cancelAnimationFrame(this.state.rafId);
        this.draw(x_new, y_new, width, height);
      }
    }
  };
  // 绘制矩形裁剪框
  draw = (x, y, width, height) => {
    let c = document.getElementById('draw-canvas');
    let context = c.getContext('2d');
    context.clearRect(0, 0, c.width, c.height);
    context.strokeStyle = '#ff8602';
    context.setLineDash([8, 4]);
    context.lineDashOffset = this.state.offset;
    context.strokeRect(x, y, width, height);
  };
  // 裁剪框虚线滚动动画
  run = (x, y, width, height) => {
    let offset = this.state.offset;
    offset += 0.5;
    if (offset > 24) {
      offset = 0;
    }
    this.setState(
      {
        offset,
      },
      () => {
        this.draw(x, y, width, height);
        // 继续绘制
        let rafId = requestAnimationFrame(() => {
          this.run(x, y, width, height);
        });
        this.setState({
          rafId,
        });
      },
    );
  };
  // 裁剪
  cutFun = () => {
    let width = this.state.rect.x1 - this.state.rect.x;
    let height = this.state.rect.y1 - this.state.rect.y;
    let canvas1 = document.getElementById('the-canvas1');
    if (!canvas1) {
      getLocale() === 'en-US'
        ? message.warning('Please upload the PDF that needs to be cropped first!')
        : message.warning('请先上传需要裁剪的PDF！');
      return;
    }
    if (width === 0 || height === 0) {
      getLocale() === 'en-US'
        ? message.warning('Please use the mouse to select the area to be cropped!')
        : message.warning('请用鼠标选定需要裁剪的区域！');
      return;
    }
    let canvas = document.createElement('canvas');
    let rate = this.state.realRate / this.state.showRate;
    canvas.width = width * rate;
    canvas.height = height * rate;
    canvas.style.width = width * rate + 'px';
    canvas.style.height = height * rate + 'px';

    let ctx = canvas1.getContext('2d');
    let imgData = ctx.getImageData(
      this.state.rect.x * rate,
      this.state.rect.y * rate,
      width * rate,
      height * rate,
    );

    let context = canvas.getContext('2d');
    context.putImageData(imgData, 0, 0);
    let dataURL = canvas.toDataURL();

    /* let a = document.createElement('a');
    a.setAttribute('href', dataURL);
    a.setAttribute('download', this.state.pdfName + '.png');
    a.setAttribute('target', '_blank');
    let clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent('click', true, true);
    a.dispatchEvent(clickEvent); */

    let pdf = new jsPDF({
      orientation: width * rate > height * rate ? 'l' : 'p',
      unit: 'px',
      format: [width * rate, height * rate],
    });
    pdf.addImage(dataURL, 'PNG', 0, 0, width * rate, height * rate);
    pdf.save(this.state.pdfName + '.pdf');
  };

  render() {
    return (
      <div className={styles.pdfCut}>
        <div className={styles.header}>
          <div className={styles.headerLogo} id="logo" onClick={this.goHome}>
            <a>
              <img
                style={{ verticalAlign: 'middle' }}
                src={getLocale() === 'en-US' ? enTagPrintLogo : tagPrintLogo}
                alt="logo"
              />
            </a>
          </div>
        </div>
        <div className={styles.topBox}>
          <a className={styles.pdfUpload}>
            <input onChange={this.handleFileChange} type="file" accept="application/pdf" />
            {getLocale() === 'en-US' ? 'Select PDF File' : '选择PDF文件'}
          </a>
          <div className={styles.btn} onClick={this.cutFun}>
            {getLocale() === 'en-US' ? 'Tailor' : '裁剪'}
          </div>
        </div>
        <div className={styles.canvasBox}>
          <canvas className={styles.canvas} id="the-canvas1"></canvas>
          <canvas className={styles.canvas2} id="the-canvas2"></canvas>
          <canvas
            className={styles.canvasDraw}
            id="draw-canvas"
            onMouseDown={this.mousedownFun}
            onMouseMove={this.mousemoveFun}
            onMouseUp={this.mouseupFun}
          ></canvas>
        </div>
      </div>
    );
  }
}
export default PDFCut;