<template>
  <div class="c_canvas">
    <div ref="canvas_container" class="canvas_container">
      <canvas ref="canvas" class="board"></canvas>
    </div>
  </div>
</template>
<script>
import Actions, { Action, Point, actionType } from "./utils/trockRecords";
import { Time } from "cdd-lib";
import blobToFile from "../utils/blobToFile";
export default {
  name: "jtCanvas",
  data() {
    return {
      ctx: null,
      top: 0,
      left: 0,
      actions: null
    };
  },
  props: {
    bg: {
      type: String,
      default: "rgba(255,255,250,1)"
    },
    lineWidth: {
      type: Number,
      default: 1.5
    }
  },
  methods: {
    create({
      isBlob = false,
      type = "image/png",
      name = "",
      quality = 1
    } = {}) {
      return new Promise((reso, rej) => {
        const canvas = this.$refs.canvas;
        if (!name) {
          const time = new Time({ dateSeparator: "", timeSeparator: "" });
          name = time.dateStr + time.timeStr + "." + type.split("/")[1];
        }
        if (isBlob) {
          canvas.toBlob(
            blob => {
              reso({
                data: blob,
                name,
                type
              });
            },
            type,
            quality
          );
        } else {
          reso({
            data: canvas.toDataURL(type, 1),
            type,
            name
          });
        }
      });
    },
    getImage() {
      return this.create().then(data => {
        return data.data;
      });
    },
    getFile(name, quality) {
      return this.create({ isBlob: true, name: name, quality }).then(data => {
        return blobToFile(data.data, data.name, data.type);
      });
    },
    back() {
      this.actions.back();
    },
    clear() {
      this.actions.clear();
    },
    // 获取上下文
    iniCtx() {
      const style = window.getComputedStyle(this.$refs.canvas_container);

      const canvas = this.$refs.canvas;
      // 宽和高
      canvas.height = parseFloat(style.height);
      canvas.width = parseFloat(style.width);

      // 动作记录类
      this.actions = new Actions({ canvas, background: this.bg ,lineWidth:this.lineWidth});
      // 获取当前组件的信息
      const { left, top } = canvas.getBoundingClientRect();
      this.top = top;
      this.left = left;
    },
    // 初始化画布
    intCanvas() {
      const canvas = this.$refs.canvas;
      // 开始绘制
      canvas.addEventListener("touchstart", e => {
        const touch = e.touches[0];
        const action = new Action(
          actionType.start,
          new Point(touch.pageX - this.left, touch.pageY - this.top)
        );
        this.actions.add(action);
        this.actions.draw(action);
      });

      canvas.addEventListener("touchend", e => {
        const touch = e.changedTouches[0];
        const action = new Action(
          actionType.finished,
          new Point(touch.pageX - this.left, touch.pageY - this.top)
        );
        this.actions.add(action);
        this.actions.draw(action);
      });
      // 进行直线绘制
      canvas.addEventListener("touchmove", e => {
        e.preventDefault();
        const touch = e.touches[0];
        const action = new Action(
          actionType.line,
          new Point(touch.pageX - this.left, touch.pageY - this.top)
        );
        this.actions.add(action);
        this.actions.draw(action);
      });
    }
  },
  mounted() {
    this.iniCtx();
    this.intCanvas();
  }
};
</script>
<style lang="scss">
.c_canvas {
  height: 100%;
  width: 100%;
  .canvas_container {
    height: 100%;
    width: 100%;
  }
}
</style>
