<template>
	<div class="canvasContent_box">
		<div class="canvasContent" ref="canvasScaleDom">
			<div class="generalCanvas_center canvas" ref="canvasDom">
				<div class="editFrontBack_pencilbtn" v-show="!isShowMark"></div>
				<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, onBeforeUnmount} from 'vue'
	import { Modal,message } from 'ant-design-vue';
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
	import { useStore } from "vuex";
	import { useI18n } from 'vue-i18n'
	export default defineComponent({
		component:{},
		setup(){
        const store = useStore();
		let {t} = useI18n()
			let canvasType = inject('canvasType')
			let getCanvasIfEdit:any = inject('getCanvasIfEdit')
			let canvasGeneral:any = inject('canvasObj')
			const data:any = reactive({
				canvasScaleDom:null,
				canvasDom:null,
				isShowMark:false,
				pencilbtnStyle:{},
				selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),

				
			})
			getCanvasIfEdit.fun = ()=>{
				return canvasGeneral.getElement()
			}
			const createCanvas = (canvasSize:any)=>{
				nextTick(async ()=>{
					let img = data.selectDetail.undividedLayer
					let WH = {
						width:data.canvasDom.offsetWidth,
						height:data.canvasDom.offsetHeight,
					}
					let image = new Image()
					image.onload = async ()=>{
						let wScale = 1
						let hScale = 1
						wScale = image.width/image.height

						// if(image.width>image.height){
						// 	hScale = image.height/image.width
						// }else{
						// 	wScale = mnnmmmimage.width/image.height
						// }
						let size = {
							width:WH.height*wScale,
							height:WH.height*hScale,
						}
						// let editGroupImg = data.selectDetail.partialDesign.partialDesignPath || data.selectDetail.partialDesign.partialDesignBase64
						let editGroupImg = data.selectDetail.partialDesign.partialDesignPath
						await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg,{dashedIsDetail:true})
					}
					image.src = img
					// canvasGeneral.canvasInit(data.canvasDom,canvasSize)
				})
			}
			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()
				
			}
			onMounted(()=>{
				createCanvas({})
			})
			onBeforeUnmount(()=>{
				canvasGeneral.canvasClear()
			})
			return {
				canvasGeneral,
				...toRefs(data),
			}
		}
	});
</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>