<template>
	<div class="editFrontBack_center">
		<div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
			<!-- <div @click="setOperation('')" class="editFrontBack_center_btn_item">
				<div>新增</div>
			</div> -->
			<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
			<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
			<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
			<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
			<!-- <i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i> -->
			<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:(canvasState != 'eraser' && rgba == 'rgb(255,0,0)')}" title="front">front</div>
			<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:(canvasState != 'eraser' && rgba == 'rgb(0,255,0)')}" title="back">back</div>
			<div class="editFrontBack_center_btn_colorWhite" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}" title="background">background</div>
			<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
			<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
		</div>
		<div class="exportCanvasBox_center_box">
			<div class="exportCanvasBox_center">
				<div class="editFrontBack_bgImg" v-show="loadingShow">
					<img :src="imgData?.undividedLayer" alt="">
				</div>
			</div>
			<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
		</div>
	</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { formatTime,segmentImage } from "@/tool/util";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { getMousePosition } from "@/tool/mdEvent";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneral";
export default defineComponent({
    components: {
    },
	// emits: ['setSloganData'],
	props:['patchData','imgDomIndex'],
    setup(props,{emit}) {
        let presentState = ref('paypal');
        let loadingShow = ref(false);
        let { t } = useI18n();
        let canvas = reactive({});
		let ratio = [1,1]
		let exportWH = 0
		let imgDomIndex = 0
		let imgData = ref()
		let pencilbtnStyle = ref({
			background:'',
			width:0+'px',
			height:0+'px',
			display:'none',
			left:0+'px',
			top:0+'px',
		})
		// let a = computed(()=>{
		// 	console.log(123);
		// 	return props.patchData
		// })
		watch(()=>props.imgDomIndex,(newVal,oldVal)=>{
			if(newVal == -1) return
			imgDomIndex = newVal
			props.patchData.front.imageUrl=  ''
			clearTimeout(setTimeSubmit)
			
			init(props.patchData.front[newVal],'')
		})
		let canvasBtn = reactive({
			canvasState:'move',
			canvasPencilWidth:{
				pencil:20,
				eraser:20,
			},
			spreadState:false,
		})
		let canvasWH = ref(0);
		
		let exportUrl = ''
		let reverseCanvasState = ref([])//存放canvas操作
		let normalCanvasState = ref([])//存放canvas操作
		let canvasState = ref()//存放canvas操作
		let keyDown = []//监听键盘的 keydown 和 keyup 事件
		let init = (data,index)=>{
			normalCanvasState.value = []
			reverseCanvasState.value = []
			ratio = [1,1]
			imgData.value = data
			nextTick(()=>{
				let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
				let editFrontBack_bgImg = document.querySelector(".editFrontBack_center .editFrontBack_bgImg");
				document.addEventListener("keydown", canvasKeyDown);
				document.addEventListener("keyup", canvasKeyUp);
				document.removeEventListener('mousemove', mouseMove);
				document.removeEventListener('touchmove', touchmove);
				let img = new Image();
				img.onload = async function(){
					loadingShow.value = true
					let height = canvasBox.offsetHeight;
					canvasWH.value = height
					canvasBox.style.width = height+'px'
					
					let wScale = 1
					let hScale = 1
					let styleWidth = Number(data.style.width.split('px')[0])
					let styleHeight = Number(data.style.height.split('px')[0])
					if(styleWidth>styleHeight){
						hScale = styleHeight/styleWidth
						exportWH = img.width
					}else{
						wScale = styleWidth/styleHeight
						exportWH = img.height
					}
					editFrontBack_bgImg.style.width = canvasWH.value * wScale+'px'
					editFrontBack_bgImg.style.height = canvasWH.value * hScale+'px'
					ratio = [wScale,hScale]
					canvas = canvasGeneral.canvasInit(canvasBox,{
						width:canvasWH.value * wScale,
						height:canvasWH.value * hScale,
					})
					pencilbtnStyle.value.background = rgba.value
					fabric.Object.prototype.cornerSize = 10
					fabric.Object.prototype.transparentCorners = false 
					exportUrl = data.maskUrl
					// canvas.on('mouse:wheel', opt => {
					// 	const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
					// 	let zoom = canvas.getZoom() // 获取画布当前缩放值
					// 	zoom *= 0.999 ** delta
					// 	if (zoom > 20) zoom = 20
					// 	if (zoom < 0.01) zoom = 0.01
					// 	// console.log(zoom);
					// 	canvas.zoomToPoint(
					// 		{ // 关键点
					// 		x: opt.e.offsetX,
					// 		y: opt.e.offsetY
					// 		},
					// 		zoom
					// 	)
					// 	opt.e.preventDefault()
					// 	opt.e.stopPropagation()
					// })
					await new Promise((resolve, reject) => {
						fabric.Image.fromURL(data.maskUrl, function(img) {
							// 设置背景图对象的宽度和高度与 canvas 相同
							img.scaleToWidth(canvas.width);
							img.scaleToHeight(canvas.height);;
							img.set({
								// width: canvas.width,
								// height: canvas.height,
								// scaleX:2,
								// scaleY:1,
								scaleX: canvas.width / img.width,
								scaleY: canvas.height / img.height
							});
							// 将背景图添加到 canvas 的底层
							// canvas.add(img);
							canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
							if(!fabric.Object.prototype.controls.deleteControl){
								JSSetRemoveImage(deleteObj)
							}else{
								fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
							}
							setPencilWidth()
							updateCanvasState()
							resolve('')
						},{ crossOrigin: "Anonymous" });
					})
					
					// 鼠标抬起事件
					canvas.on('mouse:up', function(event) {
						if(canvasBtn.canvasState != 'move'){
							updateCanvasState('mouseUp')
						}
					});
					
					//画布上移动
					// canvas.on("mouse:move", event =>setCanvasMove(event));
					document.addEventListener('mousemove', mouseMove);
					document.addEventListener('touchmove', touchmove);
					setOperation('pencil')
					createSetTimeSubmit()
					img.remove()
				}
				img.src = data.maskUrl
				
			})
        }
		let canvasKeyDown = (event) => {
			if(keyDown.indexOf(event.key)>-1){
			}else{
				keyDown.push(event.code)
				if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
					historyState('reverse')
				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
					historyState('')
				}
			}
		}
		let canvasKeyUp = (event) =>{
				keyDown = keyDown.filter(function(item) {
					return event.code !== item;
				})
				
			}
		let setClone = ()=>{
			let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
			let oldCanvasDom = canvasBox.querySelector('.canvas-container')
			let oldCanvasDom1 =  canvasBox.querySelector('canvas')
			if(oldCanvasDom)oldCanvasDom.remove()
			if(oldCanvasDom1)oldCanvasDom1.remove()
			loadingShow.value = false
		}
		let clearCanvas = ()=>{
			document.removeEventListener("keydown", canvasKeyDown);
			document.removeEventListener("keyup", canvasKeyUp);
		}
		let rgba = ref('rgb(255,0,0)')
		let mouseMove = (event)=>{
			let e = getMousePosition(event,false)
			setCanvasMove(e)
		}
		let touchmove = (event)=>{
			let e = getMousePosition(event,true)
			setCanvasMove(e)
		}
		let setCanvasMove = (event)=>{
			if(canvas.isDrawingMode){
				canvas.setCursor('none');
			}
			let canvasCenterBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center_box");
			if(!canvasCenterBox)return
			let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
			let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
			pencilbtnStyle.value.left = parentX + "px"
			pencilbtnStyle.value.top =  parentY+'px'
		}
		let setOperation = (str)=>{
			if(!canvas)return
			canvasBtn.canvasState = str
			if(str == 'move'){
				setMove()
				pencilbtnStyle.value.display = `none`
			}else if(str == 'pencil'){
				setPencil()
				pencilbtnStyle.value.display = `block`
			}else if(str == 'eraser'){
				setEraser()
				// rgba.value = 'rgb(255,255,255)'
				pencilbtnStyle.value.display = `block`
			}
		}
		let setOperationColor = (color)=>{
			pencilbtnStyle.value.background = color
			rgba.value = color
			canvas.freeDrawingBrush.color = color
			setOperation('pencil')
		}
		let setMove = ()=>{
			canvas.isDrawingMode = false
			canvas.forEachObject((obj) =>obj.selectable = true);
		}
		let setPencil = ()=>{
			canvas.isDrawingMode = true//开启绘画模式
			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
			setPencilWidth()
			canvas.freeDrawingBrush.color = rgba.value
			pencilbtnStyle.value.background = rgba.value
			canvas.freeDrawingBrush.isEraser = false
		}
		let setEraser = ()=>{
			canvas.isDrawingMode = true
			let eraser = new fabric.EraserBrush(canvas)
            canvas.freeDrawingBrush = eraser
			pencilbtnStyle.value.background = `rgb(255,255,255)`
			canvas.requestRenderAll();
			canvas.freeDrawingBrush.isEraser = true
			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
			setPencilWidth()
		}
		let deleteObj = ()=> {
			// if(!canvas.getActiveObjects()){
			// 	return
			// }
			let target = canvas.getActiveObjects()
			target.forEach((item)=>{
				canvas.fxRemove(item, {
					onComplete(){
					canvas.discardActiveObject(); // 丢弃当前选中的对象
					canvas.renderAll(); // 重新渲染 Canvas
					}
				})
				canvas.FX_DURATION = 300
			})
		}
		let setTimeOutWidth
		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
			clearTimeout(setTimeOutWidth)
			setTimeOutWidth = setTimeout(()=>{
				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
				pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
				pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'

			},300)
		}
		let setTimeSubmit = null
		let createSetTimeSubmit = ()=>{
			setSubmit()
		}
		let updateCanvasState = (str) =>{
			if(str != 'mouseUp'){
				// editFrontBackPencilbtn.value.style.display = 'none'
			}else{
				clearTimeout(setTimeSubmit)
				setTimeSubmit = setTimeout(()=>{
					createSetTimeSubmit()
				},1000)
			}
			const canvasAsJson = JSON.stringify(canvas.toJSON());
			normalCanvasState.value.push(canvasAsJson);
		}
		//撤回
		let historyState = (str)=> {
			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
				let obj = reverseCanvasState.value.pop()
				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
				canvasState.value = obj 
				normalCanvasState.value.push(obj);
			}else if(str == '' && normalCanvasState.value.length > 1){
				let obj = normalCanvasState.value.pop()
				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
				reverseCanvasState.value.push(obj);
			}else{
				return
			}
			canvas.loadFromJSON(canvasState.value, () => {
				createSetTimeSubmit()
			});
			
		}
		let setSubmit = ()=>{
			var allObjects = canvas.getObjects('path');
			var canvasDom = document.createElement("canvas");
			let exportCanvas = new fabric.Canvas(canvasDom, {
				width: exportWH * ratio[0],
				height: exportWH * ratio[1],
				isDrawingMode: false, // 开启绘图模式
			});
			canvas.backgroundImage.clone((back)=>{
				back.scaleToWidth(exportCanvas.width);
				back.scaleToHeight(exportCanvas.height);
				back.set({
					scaleX: exportCanvas.width / back.width,
					scaleY: exportCanvas.height / back.height
				})
				let scale = exportCanvas.height/canvas.height
				exportCanvas.backgroundImage = back
				allObjects.forEach((item,index)=>{
					// let obj = fabric.util.object.clone(item);
					if(item.type == 'circle')return
					let obj 
					item.clone((cloned)=>{
						obj = cloned
					})
					obj.set(
						{
							scaleX:(item.scaleX?item.scaleX:1)*scale,
							scaleY:(item.scaleY?item.scaleY:1)*scale,
							left:item.left*scale,
							top:item.top*scale,
						}
					)
					exportCanvas.add(obj)
					
				})
				let data = exportCanvas.toDataURL('png')
				cancelDsign()
				clearCanvas()
				// props.props.patchData.front[imgDomIndex].imageUrl = data
				let mark = data
				let full = props.patchData.front[imgDomIndex].undividedLayer
				let size = {
					width: Math.round(exportWH * ratio[0]),
					height: Math.round(exportWH * ratio[1]),
				}
				segmentImage(mark,full,size).then((rv)=>{
					// console.log(rv.targetFrontUrl,rv.targetBackUrl)
					props.patchData.front[imgDomIndex].imageUrl = rv.targetFrontUrl
					props.patchData.back[imgDomIndex].imageUrl = rv.targetBackUrl
					props.patchData.front[imgDomIndex].maskUrl = data
				})
				return
			})
		}
		let cancelDsign = ()=>{
			
			document.removeEventListener('keydown',canvasKeyDown);
			document.removeEventListener('keyup', canvasKeyUp);
		}
        return {
            presentState,
			loadingShow,
			imgData,
			pencilbtnStyle,
            t,
			...toRefs(canvasBtn),
			rgba,
			init,
			setOperation,
			setOperationColor,
			setPencilWidth,
			historyState,
			setSubmit,
			setClone,
			cancelDsign,
        };
    },
    data() {
        return {
        };
    },
    mounted() {},
    methods: {
       
    },
});
</script>
<style lang="less" scoped>
.editFrontBack_center{
	position: relative;
	// width: calc(512px / 2);
	// width: 256px;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	// height: calc(512px / 2);
	margin: 0 auto;
	.editFrontBack_center_item{
		// position: relative;
		background: #fff;
		position: absolute;
		
		display: flex;
		border: 0.2rem solid #c4c4c4;
		width: 35rem;
		border-radius: 4px; /* 设置圆角半径 */
		flex-wrap: wrap;
		align-items: center;
		.editFrontBack_center_btn_item{
			display: flex;
			align-items: center;
			padding: 1rem 0;
			
		}
	}
	.editFrontBack_center_btn{
		z-index: 2;
		left: 50%;
		// transform: translate(-50%,-135%);
		// transition: all .3s;
		padding: 1rem 1.5rem;
		transform: translate(-50%,0);
		position: relative;
		width: 100%;
		flex-direction: row;
		input{
			// width: 100%;
			flex: 1;
			max-width: 30%;
		}
		.icon-xiala{
			position: absolute;	
			width: 2rem;
			bottom: 0;
			transform: translate(-50%, 90%);
			left: 50%;
			width: 6rem;
			background: #fff;
			text-align: center;
			cursor: pointer;
			&.icon-xiala::before{
				transition: all .3s;
			}
			&.btnRotate::before{
				transform: rotate(180deg);
				display: block;
			}
		}
		.editFrontBack_center_btn_colorRed,.editFrontBack_center_btn_colorGreen,.editFrontBack_center_btn_colorWhite{
			width: 9rem;
			line-height: 3rem;
			text-align: center;
			height: 3rem;
			border-radius: 4px;
			margin: 0 .5rem;
			cursor: pointer;
			padding: .5rem 1;
			border: 1px solid rgba(0,0,0,.5);
			&.active{
				border: 2px solid;
				border-radius: .4rem;
			}
		}
		.editFrontBack_center_btn_colorRed{
			background: rgba(255,0,0);
		}
		.editFrontBack_center_btn_colorGreen{
			background: rgba(0,255,0);
		}
		.editFrontBack_center_btn_colorWhite{
			background: rgba(255,255,255);
		}
		i{
			font-size: 2.5rem;
			cursor: pointer;
			width: 4rem;
			height: 4rem;
			display: flex;
			align-items: center;
			justify-content: center;
			&.active{
				border: 1px solid;
				border-radius: .4rem;
			}
		}
		&.spread{
			transform: translate(-50%,0);
		}
	}
	.exportCanvasBox_center_box{
		padding: 3rem;
		height: 100%;
		flex: 1;
		position: relative;
		overflow: hidden;
		width: 100%;
		background: #e6e6e6;
		&:hover{
			cursor: none;
		}
		.editFrontBack_pencilbtn{
			position: absolute;
			z-index: 1;
			border-radius: 50%;
			border: 1px solid #000;
			pointer-events: none;
			transform: translate(-50%,-50%);
		}
	}
	.exportCanvasBox_center{
		margin: 0 auto;
		overflow: hidden;
		height: 100%;
		position: relative;
		// overflow: scroll;
		
		:deep(.canvas-container){
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			opacity: .5;
			// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
		}
		.editFrontBack_bgImg{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			img{
				height: 100%;
				width: 100%;
			}
		}
		
	}
	.exportCanvasBox_center:hover{
		.editFrontBack_center_btn{
			transform: translate(-50%,-101%);
			&.spread{
				transform: translate(-50%,0);
			}
		}
	}
}
</style>