<template>
  <div :class="['sign-box', { 'is-disabled': disabled }]">
    <div v-if="!disabled">
      <t-button size="small" @click="clear">清除</t-button>
    </div>
    <canvas ref="canvasRef" width="600" height="300"></canvas>
  </div>
</template>

<script setup name="SIGNPC">
import { computed, onMounted, ref, watch } from 'vue';
const props = defineProps({
  config: { type: Object },
  modelValue: { type: String },
});
const emit = defineEmits(['update:modelValue', 'change']);

const valueData = ref('');
const canvasRef = ref(null);

const disabled = computed(() => {
  return !props.config?.writable;
});

const emitChange = () => {
  emit('update:modelValue', valueData.value);
  emit('change', valueData.value);
};

const initCanvas = () => {
  const ctx = canvasRef.value.getContext('2d');
  let isDrawing = false;
  canvasRef.value.addEventListener('mousedown', (e) => {
    isDrawing = true;
    ctx.moveTo(e.offsetX, e.offsetY);
  });
  canvasRef.value.addEventListener('mousemove', (e) => {
    if (isDrawing) {
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.lineWidth = 1;
      // ctx.strokeStyle = '#000';
      ctx.stroke();
    }
  });
  canvasRef.value.addEventListener('mouseup', (e) => {
    isDrawing = false;

    valueData.value = canvasRef.value.toDataURL();
    emitChange();
  });
};

const clear = () => {
  canvasRef.value.width = canvasRef.value.width;
  canvasRef.value.height = canvasRef.value.height;
  valueData.value = '';
  emitChange();
};

const drawImg = () => {
  if (!valueData.value) return;

  const img = new Image();
  img.onload = function () {
    const ctx = canvasRef.value.getContext('2d');
    ctx.drawImage(img, 0, 0);
  };
  img.onerror = function (e) {
    reject(e);
  };
  img.src = valueData.value;
};

onMounted(() => {
  if (disabled.value) return;
  initCanvas();
});

watch(
  () => props.modelValue,
  (val, oldval) => {
    if (val === oldval) return;
    valueData.value = val;

    if (val) {
      drawImg();
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.sign-box {
  position: relative;
  > canvas {
    box-shadow: 0 0 1px #333;
    margin-top: 10px;
  }

  &.is-disabled {
    &::after {
      cursor: not-allowed;
      display: block;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
    }
  }
}
</style>
