import { defineStore } from "pinia";
import { ref } from "vue";

export const useCanvasImgStore = defineStore("canvas_img", () => {
  const show_image: any = ref(null as unknown as HTMLImageElement);
  const res_image: any = ref(null as unknown as HTMLImageElement);
  const show_canvas: any = ref(null as unknown as HTMLCanvasElement);
  const hide_canvas: any = ref(null as unknown as HTMLCanvasElement);
  const input_file: any = ref(null as unknown as File);
  const fabric_canvas: any = ref(null);

  const reset_images =  () => {
    show_image.value = ''; // 清空 show_image 对象
    res_image.value = ''; // 清空 res_image 对象
    show_canvas.value.getContext('2d').clearRect(0, 0, show_canvas.value.width, show_canvas.value.height);
    hide_canvas.value = ''; // 清空 hide_canvas 对象
    input_file.value = undefined; // 清空 input_file 对象
    // fabric_canvas.value?.dispose(); // 释放 fabric_canvas 对象占用的资源
  }

  return {
    show_image,
    res_image,
    show_canvas,
    hide_canvas,
    fabric_canvas,
    input_file,
    reset_images
  };
});
