<template>
	<div class="generalCanvas">
		<div class="canvasBox">
			<editCanvas v-if="canvasLoad" ref="editCanvas"></editCanvas>
		</div>
		<div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div>
	</div>
</template>
<script>
import {defineComponent, toRefs, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
} from "vue";
import {message} from 'ant-design-vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneralCopy";
import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";


export default defineComponent({
    components: {
		editCanvas,
    },
	emits:['setGenerateImg'],
    setup(props,{emit}) {
		const { t } = useI18n();
		const store = useStore();
		const isShowMark = ref(false)
		const component = reactive({
		})
		const data = reactive({
			canvasLoad:false,
		})
		const dataDom = reactive({
			editCanvas:null,
		})
		const openSetData = ()=>{
			data.canvasLoad = true
			// dataDom.canvasContent.openSetData()
		}
		const addImage = (value)=>{
			console.log(value)
			dataDom.editCanvas.addImageToLayer(value.imgUrl)
		}
		const addBottomImage = (value)=>{
			dataDom.editCanvas.changeFixedImage(value)
		}
		const getData = async ()=>{
		
		}
		const getCanvasData = ()=>{
			
			return canvasExport
		}
        onMounted(() => {
		});
		onBeforeUnmount(()=>{
			data.canvasLoad = false
			// canvasGeneral.canvasClear()
		})
        return {
			...toRefs(data),
			...toRefs(dataDom),
			isShowMark,
			openSetData,
			addImage,
			getData,
			getCanvasData,
        };
    },
    data(prop) {
        return {
		};
    },
	computed: {
	},
    watch: {
      
    },
    mounted() {},

    methods: {
		
	},
});
</script>
<style lang="less" scoped>
.generalCanvas{
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	> .canvasBox{
		width: 100%;
		height: 100%;
	}
}
</style>