<template>
  <canvas class="canvas" id="canvas" ref="canvas" v-bind="$attrs"></canvas>
</template>

<script>
import SignaturePad from 'signature_pad';
import { onMounted, ref } from '@vue/runtime-core';
import common from '@/api/common.js';
import { useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import { date } from 'is-type-of';
export default {
  props: {
    url: {
      type: String,
      default: () => ''
    },
    disabled: {
      type: Boolean,
      default: () => false
    }
  },
  setup(props, content) {
    // // 以数据 URL 的形式返回签名图像（请参阅 https://mdn.io/todataurl 了解可能的参数列表）
    // signaturePad.toDataURL(); // save image as PNG
    // signaturePad.toDataURL("image/jpeg"); // save image as JPEG
    // signaturePad.toDataURL("image/svg+xml"); // save image as SVG
    // // 从数据 URL 中绘制签名图像。
    // // 注意：此方法不会填充表示绘制签名的内部数据结构。因此，使用#fromDataURL 后，#toData 将无法正常工作。
    // signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");
    // // 以点组数组的形式返回签名图像
    // const data = signaturePad.toData();
    // // 从点组数组中绘制签名图像
    // signaturePad.fromData(data);
    // // 从点组数组中绘制签名图像，而不清除现有图像（如果未提供，则清除默认为 true）
    // signaturePad.fromData(data, { clear: false });
    // // 清除画布
    // signaturePad.clear();
    // // 如果 canvas 为空，则返回 true，否则返回 false
    // signaturePad.isEmpty();
    // // 取消绑定所有事件处理程序
    // signaturePad.off();
    // // 重新绑定所有事件处理程序
    const canvas = ref();
    const signaturePad = ref();
    const isErase = ref(false);
    const imgList = ref([]);
    const isSave = ref(false);
    const options = ref();
    const route = useRoute();
    //用于画完图后的显示，在抬起时，添加来自于allPoints的所有点的数据
    // const List<List> allList = new ArrayList<>();
    onMounted(() => {
      if (props.url) {
        let image = new Image();
        //解决跨域问题
        image.crossOrigin = '*';
        image.src = props.url + '?v=' + Math.random();

        image.onload = () => {
          var canvas = document.createElement('canvas');

          canvas.width = 316;
          canvas.height = 191;
          var context = canvas.getContext('2d');
          context.drawImage(image, 0, 0, 316, 191, 0, 0, 316, 191);

          var quality = 1;
          //这里的dataurl就是base64类型
          var dataURL = canvas.toDataURL('image/jpg', quality); //使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
          signaturePad.value.fromDataURL(dataURL);
          if (props.disabled) {
            signaturePad.value.off();
          }
        };
      }

      // dotSize   default = (minWidth + maxWidth/2)
      // //number或函数(取返回值),作用为点击画布的时候,绘制一个半径为dotSize的圆
      // //注意事项,从input 获取的值为string,而dotSize 为数值,如果通过input设置画笔大小,需要转number,不然就成了字符串拼接,就会出现超级大的点.
      // minWidth default  0.5
      // number画笔的笔锋
      // maxWidth default  2.5
      // number画笔的粗细
      // throttle default 16
      // number每秒绘制的次数,越大越耗性能,越细腻
      // backgroundColor default null
      // 画布背景色,可以为 green 字符串,#FFFFFF  rgb(0,0,0)格式
      // penColor default #000000
      // 画笔颜色,可以为 green 字符串,#FFFFFF  rgb(0,0,0)格式
      // velocityFilterWeight default 0.7
      // number 用于根据先前的速度修改新速度的重量
      // onBegin
      // 回调函数,落笔时候的回调
      // onEnd
      // 回调函数,收笔时候的回调
      // const aa = new SignaturePad(canvas.value, {
      //   minWidth: 1,
      //   maxWidth: 1,
      //   onBegin: function() {
      //     console.log('sss')
      //   }
      // });
      signaturePad.value = new SignaturePad(canvas.value, {
        minWidth: 2,
        maxWidth: 2,
        backgroundColor: '#fafafa'
      });
      signaturePad.value.width = 318;
      signaturePad.value.height = 192;
      signaturePad.value.addEventListener('beginStroke', (e) => {
        content.emit('begin', e);
      });
      signaturePad.value.addEventListener('endStroke', (e) => {
        content.emit('end', e);
        console.log('end', e, signaturePad.value.toData());
      });
      if (props.disabled) {
        signaturePad.value.off();
      }
    });

    const base64ToFile = (dataUrl, name) => {
      var arr = dataUrl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], name + '.jpg', { type: 'image/jpg' });
    };

    //保存
    const save = async () => {
      if (signaturePad.value.isEmpty()) {
        message.error('签名不能为空');
        return;
      }
      let base64 = signaturePad.value.toDataURL();
      let file = base64ToFile(base64, new Date().getTime());
      const data = await common.cosUpload(file, file.name, '', () => {});
      console.log(route.query.sn, file, data);
      return data.url;
    };
    //清除
    const clear = () => {
      signaturePad.value.clear();
      // setTimeout(() => {
      //   isErase.value = isErase2;
      //   erase();
      // });
      setTimeout(() => {
        var ctx = canvas.value.getContext('2d');
        ctx.globalCompositeOperation = 'source-over';
        if (isErase.value) {
          signaturePad.value.minWidth = 18;
          signaturePad.value.maxWidth = 212;
          signaturePad.value.penColor = '#fafafa';
          signaturePad.value.velocityFilterWeight =
          signaturePad.value.velocityFilterWeight + 0.1;
        } else {
          signaturePad.value.minWidth = 2;
          signaturePad.value.maxWidth = 2;
          signaturePad.value.penColor = '#000000';
          signaturePad.value.velocityFilterWeight =
            signaturePad.value.velocityFilterWeight + 0.1;
        }
      }, 100);
    };
    //撤回
    const revoke = () => {
      signaturePad.value.minWidth = 18;
      signaturePad.value.maxWidth = 18;
      const data = signaturePad.value.toData();
      const newData = data.slice(0, data.length - 1);
      signaturePad.value.fromData(newData, {
        clear: true
      });
      // newData.forEach(async (s) => {
      //   await setTimeout(() => {
      //     signaturePad.value.fromData([s], {
      //       clear: false
      //     });
      //   });
      // });
      console.log(newData);
      // console.log(newData);
      // data = newData;
      // signaturePad.value.fromData(newData, {
      //   clear: false
      // });

      setTimeout(() => {
        var ctx = canvas.value.getContext('2d');
        ctx.globalCompositeOperation = 'source-over';
        if (isErase.value) {
          signaturePad.value.minWidth = 18;
          signaturePad.value.maxWidth = 18;
          signaturePad.value.penColor = '#fafafa';
          // ctx.globalCompositeOperation = 'destination-out';
        } else {
          signaturePad.value.minWidth = 2;
          signaturePad.value.maxWidth = 2;
          signaturePad.value.penColor = '#000000';
          // ctx.globalCompositeOperation = 'source-over';
        }
      }, 100);
    };
    //擦除
    const erase = () => {
      console.log(isErase.value);
      var ctx = canvas.value.getContext('2d');
      ctx.globalCompositeOperation = 'source-over';
      if (!isErase.value) {
        signaturePad.value.minWidth = 18;
        signaturePad.value.maxWidth = 18;
        signaturePad.value.penColor = '#fafafa';
        //ctx.globalCompositeOperation = 'destination-out';
        isErase.value = true;
      } else {
        signaturePad.value.minWidth = 2;
        signaturePad.value.maxWidth = 2;
        signaturePad.value.penColor = '#000000';

        isErase.value = false;
      }
      return isErase;
    };

    const onMousedown = (e) => {
      console.log(e);
      if (!isSave.value) {
        isSave.value = true;
      }
    };
    const onMouseleave = (e) => {
      if (!isSave.value) {
        isSave.value = false;
        imgList.value.push(save());
      }
    };
    const onMouserup = (e) => {
      if (!isSave.value) {
        isSave.value = false;
        imgList.value.push(save());
      }
    };

    return {
      canvas,
      signaturePad,
      erase,
      revoke,
      clear,
      save,
      onMousedown,
      onMouseleave,
      onMouserup,
      options
    };
  }
};
</script>

<style>
.canvas {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
</style>
