<template>
	<div class="canvasContent_box">
		<div class="canvasContent" ref="canvasScaleDom">
			<div class="generalCanvas_center canvas" ref="canvasDom">
				<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted, watch} from 'vue'
	import { Modal,message } from 'ant-design-vue';
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
	import { useI18n } from 'vue-i18n'
	import { useStore } from "vuex";
	export default defineComponent({
		component:{},
		setup(props,{emit}){
			const store = useStore();
			let {t} = useI18n()
			let canvasType = inject('canvasType')
			let canvasGeneral:any = inject('canvasObj')
			const data:any = reactive({
				canvasDom:null,
				isShowMark:false,
				pencilbtnStyle:{},
				isCanva:false,
				selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
			})
			const dataDom = reactive({
				canvasScaleDom:null as any,
			})
			watch(()=>data.selectObject.model.id,(newVal:any)=>{
				if(newVal){
					canvasGeneral.upDataRectBGImg(data.selectObject.model.url)
				}
			})
			const createCanvas = ()=>{
				if(data.isCanva)return
				nextTick(async ()=>{
					let width = dataDom.canvasScaleDom.offsetWidth
					let canvasSize = {width,height:width}
					data.isCanva = true
					let img = data.selectObject.model.url
					await canvasGeneral.canvasInit(data.canvasDom,canvasSize,img,'',{noErasable:true})
					let oldCanvas = store.state.HomeStoreModule.canvasData.deReconstruction
					if(oldCanvas)canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
					// if(oldCanvas)canvasGeneral.canvas.loadFromJSON(oldCanvas, () => {});
				})
			}
			const openMode = (data:any)=>{
				let {yes,no} = data
				console.log(yes,no);
				Modal.confirm({
						title: '是否栅格化',
						icon: createVNode(ExclamationCircleOutlined),
						okText: 'Yes',
						cancelText: 'No',
						mask:false,
						centered:true,
						onOk() {
							yes()
						},
						onCancel(){
							no()
						}
					});
				yes()
			}
			const openSetData = ()=>{
				createCanvas()
			}
			onMounted(()=>{
			})
			return {
				canvasGeneral,
				...toRefs(data),
				...toRefs(dataDom),
				openSetData,
			}
		}
	});
</script>

<style lang='less' scoped>
.canvasContent_box{
	height: 100%;
	width: 100%;
	// padding: 2rem;
	background: #e6e6e6;
	.canvasContent{
		height: 100%;
		width: 100%;
		position: relative;
	}
}

.generalCanvas_center{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	&.canvas{
	}
	.editFrontBack_pencilbtn{
		position: absolute;
		z-index: 1;
		border-radius: 50%;
		border: 1px solid #000;
		pointer-events: none;
		transform: translate(-50%,-50%);
	}
	:deep(.canvas-container){
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
	}
}

</style>