import * as fabric from "fabric" //'../../../components/fabric';
import {
	v4 as uuidv4
} from 'uuid';
import {
	Base64
} from '../../../comm/base64.js';
// import okIcon from '../../../static/images/confirm.svg';
// import cancelIcon from '../../../static/images/remove.svg';
export default {
	data() {
		return {
			vehicleIp: "",
			canvasId: "",
			canvas: null,
			eleWidth: 0,
			eleHeight: 0,
			touchStartPoint: {
				x: 0,
				y: 0
			},
			isDrawing: false,
			drawType: "",
			drawSvg: "",
			initialDistance: null,
			initialZoom: 1,
			isDragging: false,
			lastPosX: 0,
			lastPosY: 0,
			agvObj: null,
			initFlag: false,
			editMode: false,


		}
	},
	mounted() {
		console.log("ctx mounted")
		this.init()
	},
	methods: {
		async init(ip) {
			try {
				this.agvObj = null
				const _this = this
				fabric.Object.prototype.setControlsVisibility({
					mt: false, // 中间上
					mb: false, // 中间下
					ml: false, // 中间左
					mr: false, // 中间右
					mtr: false, // 旋转控制

					tl: false, //是否显示中间横杠
					bl: false, //是否显示中间横杠
					tr: false, //是否显示中间横杠
					br: false, //是否显示中间横杠
				})
				// 全局样式调整
				fabric.Object.prototype.set({
					borderColor: '#1890FF',
					cornerColor: '#fff',
					cornerStrokeColor: '#1890FF',
					cornerSize: 36,
					//	touchCornerSize: 48,
					transparentCorners: false,
					cornerStyle: 'circle',
					borderScaleFactor: 2,
					padding: 10,

				});
				this.canvasId = `canvas_${uuidv4()}`
				const cantainerEl = document.getElementById("canvasMap")
				let canvas = document.getElementById(this.canvasId)
				canvas = document.createElement("canvas")
				canvas.setAttribute("id", this.canvasId)
				canvas.setAttribute("type", "2d")
				cantainerEl.appendChild(canvas)
				this.canvas = new fabric.Canvas(this.canvasId, {
					allowTouchScrolling: true, // 允许触摸滚动
					selection: true,
					isTouchDevice: true, // 关键配置
					stopContextMenu: true, // 禁止长按菜单
					fireRightClick: true,
					fireMiddleClick: true,
					targetFindTolerance: 15, // 增大触摸容差
					isTouchSupported: true
				})
				this.canvas.clear()
				this.eleWidth = cantainerEl.clientWidth
				this.eleHeight = cantainerEl.clientHeight
				this.canvas.setWidth(this.eleWidth);
				this.canvas.setHeight(this.eleHeight);
				this.workSpace = new fabric.Rect({
					id: "workspace",
					eleType: "workspace",
					left: 0,
					top: 0,
					width: this.eleWidth,
					height: this.eleHeight,
					selectable: false,
					hasControls: false,
					fill: "#FFFFFF"
				})
				this.canvas.add(this.workSpace)
				this.patchFabricForUniApp(this.canvas)
				this.initFlag = true
				await this.$nextTick();
				this.canvasEventListener()

			} catch (ex) {
				this.showError(ex)
			}
		},
		patchFabricForUniApp(canvas) {
			// 保存原始方法
			const originalSetActiveObject = canvas.setActiveObject.bind(canvas);

			// 重写setActiveObject
			canvas.setActiveObject = function(object, e) {
				originalSetActiveObject(object, e);
				if (object) {
					object.canvas = this;
					this._activeObject = object;
				}
			};

			// 确保对象初始化时设置正确的canvas引用
			fabric.Object.prototype.initialize = function(options) {
				const originalInit = fabric.util.getOriginalMethod(this, 'initialize');
				originalInit.call(this, options);

				if (this.canvas && this.canvas._activeObject === this) {
					this.canvas._activeObject = this;
				}
				return this;
			};
		},
		createDeleteControl(obj) {
			// 创建删除按钮的图片元素
			const _this = this
			const deleteIcon =
				"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
			const deleteImg = document.createElement('img');
			deleteImg.src = deleteIcon;
			// 添加自定义删除控件到所有对象的原型上
			//	console.log("controls", JSON.stringify(fabric.Object.prototype))
			obj.controls.deleteControl = new fabric.Control({
				x: 0.5,
				y: 0,
				offsetY: 0,
				offsetX: 36,
				mouseDownHandler: _this.deleteObject, // 触摸事件处理器
				render: (ctx, left, top, styleOverride, fabricObject) => {

					if (fabricObject.lockRemove) {
						return;
					}
					if (fabricObject.canvas?.skipTargetFind) {
						return;
					}
					const size = this.cornerSize || 36;
					// drawImg(ctx, left, top, imgDelete, 24, 24, fabricObject.angle);
					ctx.save();
					ctx.translate(left, top);
					ctx.drawImage(deleteImg, -size / 2, -size / 2, size, size);
					ctx.restore();
				},
				cornerSize: 36,
				withConnection: false,
				actionName: 'delete', // 动作名称
				pointerStyle: 'pointer' // 指针样式
			});
		},
		deleteObject(eventData, transform, x, y) {
			console.log("")
			const target = transform.target;
			const canvas = target.canvas;

			canvas.remove(target);
			canvas.requestRenderAll();
		},
		editCancelObject(eventData, transform, x, y) {
			const target = transform.target;
			const canvas = target.canvas;
			this.$ownerInstance.callMethod('receiveRenderData', {
				method: "edit_finish",
				cmd: "cancel",
				station: target.data,
			});
			target.set({
				lockEdit: true
			})
			this.canvas.requestRenderAll()
		},
		editOkObject(eventData, transform, x, y) {
			const target = transform.target;
			const canvas = target.canvas;
			this.$ownerInstance.callMethod('receiveRenderData', {
				method: "edit_finish",
				cmd: "ok",
				station: target.data,
			});
			target.set({
				lockEdit: true
			})
			this.canvas.requestRenderAll()
		},
		createOkCancelControl(obj) {
			// 创建删除按钮的图片元素
			const _this = this
			const cancelImg = document.createElement('img');
			cancelImg.src = "static/images/remove.svg"
			const okImg = document.createElement('img');
			okImg.src = "static/images/confirm.svg"
			// 添加自定义删除控件到所有对象的原型上
			//	console.log("controls", JSON.stringify(fabric.Object.prototype))
			obj.controls.cancelControl = new fabric.Control({
				x: -0.5,
				y: 0,
				offsetY: 0,
				offsetX: -32,
				mouseDownHandler: _this.editCancelObject, // 触摸事件处理器
				render: (ctx, left, top, styleOverride, fabricObject) => {

					if (fabricObject.lockEdit) {
						return;
					}
					if (fabricObject.canvas?.skipTargetFind) {
						return;
					}
					const size = this.cornerSize || 32;
					// drawImg(ctx, left, top, imgDelete, 24, 24, fabricObject.angle);
					ctx.save();
					ctx.translate(left, top);
					ctx.drawImage(cancelImg, -size / 2, -size / 2, size, size);
					ctx.restore();
				},
				cornerSize: 32,
				withConnection: false,
				actionName: 'delete', // 动作名称
				pointerStyle: 'pointer' // 指针样式
			});
			obj.controls.okControl = new fabric.Control({
				x: 0.5,
				y: 0,
				offsetY: 0,
				offsetX: 32,
				mouseDownHandler: _this.editOkObject, // 触摸事件处理器
				render: (ctx, left, top, styleOverride, fabricObject) => {

					if (fabricObject.lockEdit) {
						return;
					}
					if (fabricObject.canvas?.skipTargetFind) {
						return;
					}
					const size = this.cornerSize || 32;
					// drawImg(ctx, left, top, imgDelete, 24, 24, fabricObject.angle);
					ctx.save();
					ctx.translate(left, top);
					ctx.drawImage(okImg, -size / 2, -size / 2, size, size);
					ctx.restore();
				},
				cornerSize: 32,
				withConnection: false,
				actionName: 'delete', // 动作名称
				pointerStyle: 'pointer' // 指针样式
			});

		},
		addObject(obj) {
			obj.set({
				lockEdit: true
			})
			this.canvas.add(obj)
			this.createOkCancelControl(obj)
		},
		canvasEventListener() {
			const _this = this

			const cantainerEl = document.getElementById("canvasMap")
			_this.canvas.on('touch:gesture', function(e) {
				console.log("touch:gesture", e);
				// 处理手势操作
			});
			_this.canvas.on("selection:created", function(e) {
				const activeObj = _this.canvas.getActiveObject();
				activeObj.set({
					borderColor: '#1890ff',
					borderScaleFactor: 3,
					padding: 5,
					borderDashArray: [5, 5], //5px 实线和5px 间隔
				});
				_this.canvas.requestRenderAll();

				_this.onSelectionChanage()
				//_this.selectionChangeCanvas();
			});
			_this.canvas.on("selection:updated", function(e) {
				console.log("selection:updated", e);
				const activeObj = _this.canvas.getActiveObject();
				activeObj.set({
					borderColor: '#1890ff',
					borderScaleFactor: 3,
					padding: 5,
					borderDashArray: [5, 5], //5px 实线和5px 间隔
				});
				_this.canvas.requestRenderAll();
				_this.onSelectionChanage()


			});
			_this.canvas.on("selection:cleared", function(e) {
				console.log("selection:cleared", e);

				//_this.selectionChangeCanvas();
			});
			_this.canvas.on("object:removed", function(e) {
				// console.log("object:removed", e.target);
				if (e.target) {
					e.target.isRemoved = true;
				}
			});
			_this.canvas.on("object:modified", function(e) {
				// console.log("object:modified", e.target);
				if (e?.target.eleType == "station") {
					const obj = e.target
					obj.data.x = obj.left
					obj.data.y = obj.top
					_this.$ownerInstance.callMethod('receiveRenderData', {
						method: "update_station",
						station: obj.data,

					});
				}
				// _this.resizetCanvas();
			});
			_this.canvas.on("object:moving", function(e) {
				// console.log("object:modified", e.target);

			});

			var pressObjTimer
			cantainerEl.addEventListener('touchstart', function(e) {
				console.log('touchstart:', e);
				e.preventDefault(); // 阻止默认行为
				_this.canvas.fire('touch:start', {
					e: e
				});
				//	_this.canvas._onMouseDown(e);
				if (!_this.canvas.getActiveObject()) {
					// 根据触摸点数量判断交互类型
					if (e.touches.length === 1) {


						_this.handleSingleTouch(e.touches[0]);
					} else if (e.touches.length >= 2) {


						_this.handleMultiTouch(e.touches);
					}
				} else {
					if (e.touches.length === 1) {
						const touch = e.touches[0]
						this.lastPosX = touch.clientX;
						this.lastPosY = touch.clientY;
						const list = _this.canvas.getActiveObjects()
						if (list.length === 1) {
							pressObjTimer = setTimeout(function() {
								console.log("edit_station", list[0].eleType)
								if (list[0].eleType == "station") {
									_this.setAllObjectSelectable(false)

									list[0].set({
										selectable: true
									})
									const zoom = _this.canvas.getZoom();
									let deltaX = list[0].left * zoom
									let deltaY = list[0].top * zoom
									const vpt = _this.canvas.viewportTransform;

									_this.$ownerInstance.callMethod('receiveRenderData', {
										method: "edit_station",
										station: list[0].data,
										view: {
											x: vpt[4] + deltaX,
											y: vpt[5] + deltaY,
											// x: e.touches[0].clientX,
											// y: e.touches[0].clientY,
											width: list[0].width * zoom,
											height: list[0].height * zoom
										}
									});
								}
							}, 3000); //
						}
					}
				}
			});

			cantainerEl.addEventListener('touchmove', function(e) {
				//	_this.canvas._onMouseMove(e);
				e.preventDefault(); // 阻止默认行为
				// 处理移动
				if (!_this.canvas.getActiveObject()) {
					if (e.touches.length === 1) {
						_this.handleSingleTouchMove(e.touches[0]);
					} else if (e.touches.length >= 2) {
						_this.handleMultiTouchMove(e.touches);
					}
				} else {
					if (e.touches.length === 1) {
						const touch = e.touches[0]
						const deltaX = touch.clientX - this.lastPosX;
						const deltaY = touch.clientY - this.lastPosY;
						if (Math.abs(deltaX) > 20)
							clearTimeout(pressObjTimer);
					}
				}
			});

			cantainerEl.addEventListener('touchend', function(e) {
				//	_this.canvas._onMouseUp(e);
				e.preventDefault(); // 阻止默认行为
				_this.touchPoint = {
					x: 0,
					y: 0
				};
				if (!_this.canvas.getActiveObject()) {
					// 处理结束事件
					if (e.touches.length === 0) {
						_this.handleTouchEnd();
					}
					if (_this.editObject) {
						_this.canvas.setActiveObject(_this.editObject)
					}
				} else {
					clearTimeout(pressObjTimer);
				}


			});
			cantainerEl.addEventListener('touchcancel', function(e) {
				if (_this.canvas.getActiveObject()) {
					// 处理结束事件
					clearTimeout(pressObjTimer);
				} else {
					if (_this.editObject) {
						_this.canvas.setActiveObject(_this.editObject)
					}
				}
			})

		},
		onSelectionChanage() {
			const _this = this
			const list = _this.canvas.getActiveObjects()
			if (list.length === 1) {
				if (list[0].eleType == "station") {
					_this.$ownerInstance.callMethod('receiveRenderData', {
						method: "selected_change",
						type: list[0].eleType,
						param: list[0].data
					});
				} else if (list[0].eleType == "agv") {
					_this.$ownerInstance.callMethod('receiveRenderData', {
						method: "selected_change",
						type: list[0].eleType,
						param: list[0].data
					});
				} else if (list[0].eleType == "agv_line") {
					_this.$ownerInstance.callMethod('receiveRenderData', {
						method: "selected_change",
						type: list[0].eleType,
						param: list[0].data
					});
				} else {
					_this.$ownerInstance.callMethod('receiveRenderData', {
						method: "selected_change",
						type: ""
					});
				}

			} else {
				_this.$ownerInstance.callMethod('receiveRenderData', {
					method: "selected_change",
					type: ""
				});
			}
		},
		safeLoadImage(url, maxSize = 2048) {
			console.log(url)
			return new Promise((resolve) => {
				const img = new Image();
				img.onload = () => {
					// 检查尺寸是否超出限制
					const scale = Math.min(
						maxSize / Math.max(img.width, img.height),
						1
					);
					resolve(new fabric.Image(img, {
						scaleX: scale,
						scaleY: scale
					}));
				};
				img.onerror = () => {
					console.error('图片加载失败');
					resolve(null);
				};
				img.src = url;
			});
		},
		safeLoadImageData(data, maxSize = 2048) {
			//console.log("safeLoadImageData")
			const _this = this
			return new Promise((resolve) => {
				let base64Image = data
				if (base64Image.indexOf("data:image/png;base64,") < 0) {
					base64Image = "data:image/png;base64," + data
				}
				// var img = new fabric.Image();
				// img.setSrc(base64Image, function() {
				// 	console.log("img", JSON.stringify(img))
				// 	const scale = Math.min(
				// 		maxSize / Math.max(img.width, img.height),
				// 		1
				// 	);
				// 	img.set({
				// 		scaleX: scale,
				// 		scaleY: scale
				// 	})
				// 	resolve(img)
				// });
				fabric.Image.fromURL(base64Image, {
					crossOrigin: 'anonymous' // 重要：设置跨域
				}).then((img) => {

					//console.log("img",JSON.stringify(img))
					const scale = Math.min(
						maxSize / Math.max(img.width, img.height),
						1
					);
					img.set({
						scaleX: scale,
						scaleY: scale,
					})
					resolve(img)
				}).catch((err) => {
					console.error("图片加载失败", err)
					_this.showError("图片加载失败")
					resolve(null);
				})

			});
		},
		async loadBase64ImageWithProgress(data, maxSize = 2048) {
			const _this = this
			return new Promise((resolve, reject) => {
				// 创建临时Image对象监控加载进度
				var base64Image = data
				if (base64Image.indexOf("data:image/png;base64,") < 0) {
					base64Image = "data:image/png;base64," + data
				}
				_this.$ownerInstance.callMethod('receiveRenderData', {
					method: "set_backgroud_progress",
					type: "start",
				});
				const img = new Image();
				img.onloadstart = () => {
					_this.$ownerInstance.callMethod('receiveRenderData', {
						method: "set_backgroud_progress",
						type: "progress",
						percent: 5
					});
				};
				img.onprogress = (e) => {
					if (e.lengthComputable) {
						const percent = Math.min(99, Math.round((e.loaded / e.total) * 100));
						_this.$ownerInstance.callMethod('receiveRenderData', {
							method: "set_backgroud_progress",
							type: "progress",
							percent
						});
					} else {
						// 无法计算进度时的模拟进度
						const percent = Math.min(this.progressPercent + 10, 95);
						_this.$ownerInstance.callMethod('receiveRenderData', {
							method: "set_backgroud_progress",
							type: "progress",
							percent
						});
					}
				};
				img.onload = () => {
					const percent = Math.min(this.progressPercent + 10, 95);
					_this.$ownerInstance.callMethod('receiveRenderData', {
						method: "set_backgroud_progress",
						type: "progress",
						percent: 100
					});
					// 转换为Fabric图像
					const scale = Math.min(
						maxSize / Math.max(img.width, img.height),
						1
					);
					const fabricImg = new fabric.Image(img, {
						left: 0,
						top: 0,
						scaleX: scale,
						scaleY: scale,
					});
					_this.$ownerInstance.callMethod('receiveRenderData', {
						method: "set_backgroud_progress",
						type: "end",
					});
					resolve(fabricImg);
				};

				img.onerror = (err) => {
					_this.$ownerInstance.callMethod('receiveRenderData', {
						method: "set_backgroud_progress",
						type: "error",
					});
					console.error("图片加载失败", err)
					reject(new Error('图片加载失败'));
				};
				// 开始加载
				img.src = base64Image;
			});
		},

		// 监控内存使用情况
		checkMemoryUsage() {
			if (window.performance && window.performance.memory) {
				const usedMB = window.performance.memory.usedJSHeapSize / (1024 * 1024);
				console.log(`内存使用: ${usedMB.toFixed(2)}MB`);
				return usedMB;
			}
			return null;
		},

		setBackground(info) {
			const _this = this

			if (!this.canvas)
				return
			this.canvas.clear()
			this.canvas.selectionColor = 'rgba(100, 200, 255, 0.3)'; // 选中背景色
			this.canvas.selectionBorderColor = '#1890ff'; // 边框颜色
			this.canvas.selectionLineWidth = 3; // 边框宽度
			this.agvObj = null
			const cantainerEl = document.getElementById("canvasMap")
			this.eleWidth = cantainerEl.clientWidth
			this.eleHeight = cantainerEl.clientHeight
			console.log("client", this.eleWidth, this.eleHeight)
			this.canvas.setWidth(this.eleWidth);
			this.canvas.setHeight(this.eleHeight);

			//console.log("setBackground", JSON.stringify(info))

			return new Promise((resolve, reject) => {
				// if (svgUrl) {
				// 	fabric.loadSVGFromURL(svgUrl).then(({
				// 		objects,
				// 		options
				// 	}) => {
				// 		const workSpace = fabric.util.groupSVGElements(objects, options);
				// 		workSpace.set({
				// 			id: "workspace",
				// 			eleType: "workspace",
				// 			left: 0,
				// 			top: 0,
				// 			selectable: false,
				// 			hasControls: false,


				// 		});
				// 		_this.canvas.add(workSpace)
				// 		if (_this.workSpace) {
				// 			_this.canvas.remove(_this.workSpace)
				// 		}
				// 		_this.workSpace = workSpace
				// 		//	_this.auto()
				// 		resolve()
				// 	});
				// } else if (imgUrl) {
				if (info.filedata) {
					_this.loadBase64ImageWithProgress(info.filedata).then((img) => {
						//console.warn('setBackground', JSON.stringify(img));
						if (img) {
							img.set({
								id: "workspace",
								eleType: "workspace",
								left: 0,
								top: 0,
								selectable: false,
								hasControls: false,
							});
							_this.canvas.add(img)
							if (_this.workSpace) {
								_this.canvas.remove(_this.workSpace)
							}
							_this.workSpace = img

						}
						//_this.checkMemoryUsage()
						resolve()

					}).catch((err) => {
						resolve()
					})

				} else {
					resolve()
				}
				// fabric.Image.fromURL(imgUrl).then((img) => {
				// 	// 设置背景图像的属性
				// 	img.set({
				// 		id: "workspace",
				// 		eleType: "workspace",
				// 		left: 0,
				// 		top: 0,
				// 		selectable: false,
				// 		hasControls: false,
				// 	});

				// 	_this.canvas.add(img)
				// 	if (_this.workSpace) {
				// 		_this.canvas.remove(_this.workSpace)
				// 	}
				// 	_this.workSpace = img
				// 	//_this.auto()
				// 	resolve()
				// })

				//}
			})
		},
		getAutoScale() {
			// 按照宽度

			const eleWidth = this.eleWidth
			const eleHeight = this.eleHeight
			if (!this.workSpace)
				return 1
			const width = this.workSpace.width
			const height = this.workSpace.height
			if (eleWidth / eleHeight < width / height) {
				return eleWidth / width;
			} // 按照宽度缩放
			return eleHeight / height;
		},

		auto() {
			const scale = this.getAutoScale()
			this.setZoomAuto((98 * scale) / 100);
		},
		one() {
			this.setZoomAuto(1, ); //
			this.canvas.requestRenderAll();
		},
		setZoomAuto(scale, zoomPoint) {
			const _this = this
			let center = this.canvas.getCenter();
			if (zoomPoint) {
				this.canvas.zoomToPoint(new fabric.Point(zoomPoint.x, zoomPoint.y), scale);
			} else {
				this.canvas.zoomToPoint(new fabric.Point(center.left, center.top), scale);
			}
			this.canvas.fire("transform", {
				scale: scale
			});
			if (!this.workSpace) return;
			this.setCenterFromObject(this.workSpace);
			// 超出画布不展示
			_this.workSpace.clone().then((cloned) => {
				_this.canvas.clipPath = cloned;
				_this.canvas.requestRenderAll();
			});
		},
		setDrawingType(type, svg) {
			if (svg) {
				if (type == "svg") {
					this.drawType = "svg"
					this.drawSvg = svg
					return
				}
			}
			if (type == "line") {
				this.drawType = "line"
			} else {
				this.drawType = ""
			}
		},
		deleteSelected() {
			const list = this.canvas.getActiveObjects()
			list.map((item) => this.canvas.remove(item));
			this.canvas.requestRenderAll();
			this.canvas.discardActiveObject();
			this.canvas.fire("object:modified");

		},
		/**
		 * 设置画布中心到指定对象中心点上
		 * @param {Object} obj 指定的对象
		 */
		setCenterFromObject(obj) {
			const objCenter = obj.getCenterPoint();
			const viewportTransform = this.canvas.viewportTransform;
			if (this.canvas.width === undefined || this.canvas.height === undefined || !viewportTransform)
				return;
			viewportTransform[4] = this.canvas.width / 2 - objCenter.x * viewportTransform[0];
			viewportTransform[5] = this.canvas.height / 2 - objCenter.y * viewportTransform[3];
			this.canvas.setViewportTransform(viewportTransform);
			this.canvas.renderAll();
		},
		handleSingleTouch(touch) {
			this.touchStartPoint = {
				x: touch.clientX,
				y: touch.clientY
			};
			console.log('单点触摸开始');

			let activeObj = this.canvas.getActiveObject();
			if (!activeObj) {
				if (!this.drawType) {
					this.isDrawing = false;
					this.isDragging = true;
					this.lastPosX = touch.clientX;
					this.lastPosY = touch.clientY;
				} else {
					this.isDragging = false;
					this.isDrawing = true;

				}
			}

			// 单点触摸逻辑
		},
		handleMultiTouch(touches) {
			const _this = this
			const touch1 = touches[0];
			const touch2 = touches[1];
			this.initialDistance = Math.sqrt(
				Math.pow(touch2.clientX - touch1.clientX, 2) +
				Math.pow(touch2.clientY - touch1.clientY, 2)
			);
			this.initialZoom = this.canvas.getZoom();
			// 多点触摸初始逻辑
		},
		handleSingleTouchMove(touch) {
			console.log('单点移动', touch.clientX, touch.clientY);
			if (this.isDragging) {
				const deltaX = touch.clientX - this.lastPosX;
				const deltaY = touch.clientY - this.lastPosY;
				// 移动视口
				console.log('relativePan', deltaX, deltaY);

				this.canvas.relativePan(new fabric.Point(deltaX, deltaY));
				this.lastPosX = touch.clientX;
				this.lastPosY = touch.clientY;
			} else if (this.isDrawing) {
				const vpt = this.canvas.viewportTransform;
				console.log("viewportTransform", vpt[4], vpt[5])
				let startX = this.touchStartPoint.x - vpt[4]
				let startY = this.touchStartPoint.y - vpt[5]
				let endX = touch.clientX - vpt[4]
				let endY = touch.clientY - vpt[5]

				const scale = this.canvas.getZoom();
				startX /= scale
				startY /= scale
				endX /= scale
				endY /= scale
				console.log("viewportTransform", startX, startY, endX, endY)
				const left =
					endX > startX ?
					startX :
					endX;
				const top =
					endY > startY ?
					startY :
					endY;
				let width = Math.abs(endX - startX)
				let height = Math.abs(endY - startY)


				if (this.drawType == "rect") {
					if (this.drawingObj) {
						this.drawingObj.set({
							left,
							top,
							width,
							height
						})
						this.drawingObj.setCoords()
					} else {
						const rect = new fabric.Rect({
							id: `${new Date().getTime()}`,
							eleType: "rect",
							left,
							top,
							width,
							height,
							stroke: "#333",
							strokeWidth: 1,
							fill: "#fff",
							lockEdit: true
						});
						this.canvas.add(rect);
						this.drawingObj = rect
					}
					this.canvas.requestRenderAll();
				} else if (this.drawType == "ellipse") {
					if (this.drawingObj) {
						this.drawingObj.set({
							left,
							top,
							rx: width / 2,
							ry: height / 2,
						})
						this.drawingObj.setCoords()
					} else {
						const ellipse = new fabric.Ellipse({
							id: `${new Date().getTime()}`,
							eleType: "ellipse",
							left,
							top,
							rx: width / 2,
							ry: height / 2,
							stroke: "#333",
							strokeWidth: 1,
							fill: "#fff",
							lockEdit: true
						});
						this.canvas.add(ellipse);
						this.drawingObj = ellipse
					}
					this.canvas.requestRenderAll();
				} else if (this.drawType == "line") {
					if (this.drawingObj) {
						this.drawingObj.set({
							left,
							top,
							x1: startX,
							y1: startY,
							x2: endX,
							y2: endY,
						})
						this.drawingObj.setCoords()
					} else {
						const line = new fabric.Line([startX, startY, endX,
							endY
						], {
							id: `${new Date().getTime()}`,
							eleType: "line",
							stroke: "#333",
							strokeWidth: 5,
							lockEdit: true
						});
						this.canvas.add(line);
						this.drawingObj = line
					}
					this.canvas.requestRenderAll();
				} else if (this.drawType == "arrow") {
					if (this.drawingObj) {
						this.setArrowPath(this.drawingObj, startX, startY, endX, endY);
						this.drawingObj.setCoords()
					} else {
						let path = this.getArrowPath(
							startX, startY, endX, endY,
							30, 40
						)
						const line = new fabric.Path(path, {
							id: `${new Date().getTime()}`,
							eleType: "arrow",
							stroke: "#333",
							strokeWidth: 5,
							lockEdit: true
						});
						this.canvas.add(line);
						this.drawingObj = line
					}
					this.canvas.requestRenderAll();
				} else if (this.drawType == "svg") {
					if (this.drawingObj) {
						this.drawingObj.set({
							left,
							top,
							width,
							height,
						});
						this.drawingObj.setCoords()
					} else {
						const _this = this
						fabric.loadSVGFromURL(this.drawSvg).then(({
							objects,
							options
						}) => {
							const objGroup = fabric.util.groupSVGElements(objects, options);
							objGroup.set({
								id: `${new Date().getTime()}`,
								eleType: "svg",
								left,
								top,
								width,
								height,
								viewBoxWidth: options.viewBoxWidth || options.width,
								viewBoxHeight: options.viewBoxHeight || options.height,
								lockEdit: true
							});
							_this.canvas.add(objGroup)

						});



						this.drawingObj = line
					}
					this.canvas.requestRenderAll();
				}


			}

			// 单点移动逻辑
		},
		handleMultiTouchMove(touches) {
			// 计算两点间距离（缩放）
			if (!this.initialDistance) {
				return
			}
			const _this = this
			const touch1 = touches[0];
			const touch2 = touches[1];
			console.log('多点移动', touch1.identifier, touch2.identifier);

			const distance = Math.sqrt(
				Math.pow(touch2.clientX - touch1.clientX, 2) +
				Math.pow(touch2.clientY - touch1.clientY, 2)
			);

			// 计算旋转角度
			const angle = Math.atan2(
				touch2.clientY - touch1.clientY,
				touch2.clientX - touch1.clientX
			) * 180 / Math.PI;

			// 计算中心点
			const center = {
				x: (touch1.clientX + touch2.clientX) / 2,
				y: (touch1.clientY + touch2.clientY) / 2
			};

			// 计算缩放比例 (限制在0.1-10倍之间)
			let scale = Math.min(Math.max(
				this.initialZoom * (distance / this.initialDistance),
				0.1), 10);
			let scaleAuto = this.getAutoScale()
			if (scale < scaleAuto) {
				scale = scaleAuto
			} else if (scale == scaleAuto) {
				return
			}
			console.log(scale, scaleAuto)
			this.setZoomAuto(scale, center)

			console.log('多点移动 - 距离:', distance, '角度:', angle);
			// 多点移动逻辑
		},
		handleTouchEnd() {
			console.log('所有触摸结束');
			this.isDrawing = false
			this.drawingObj = undefined
			this.initialDistance = null;
			// 触摸结束逻辑
		},
		addStation(info) {
			const _this = this
			return new Promise((resolve) => {
				const zoom = _this.canvas.getZoom();
				let svg = "static/images/station.svg"
				// if (info.angle > 0) {
				// 	if (info.angle / 3.14 <= 0.25) {
				// 		svg = "static/images/station2.svg"
				// 	} else if (info.angle / 3.14 <= 0.50) {
				// 		svg = "static/images/station3.svg"
				// 	} else if (info.angle / 3.14 <= 0.75) {
				// 		svg = "static/images/station4.svg"
				// 	} else if (info.angle / 3.14 <= 1) {
				// 		svg = "static/images/station5.svg"
				// 	}
				// } else if (info.angle < 0) {
				// 	if (info.angle / 3.14 < -0.75) {
				// 		svg = "static/images/station5.svg"
				// 	} else if (info.angle / 3.14 < -0.5) {
				// 		svg = "static/images/station6.svg"
				// 	} else if (info.angle / 3.14 < -0.25) {
				// 		svg = "static/images/station7.svg"
				// 	} else if (info.angle / 3.14 < 0) {
				// 		svg = "static/images/station8.svg"
				// 	}
				// }

				//	const scale = this.getAutoScale()
				const left = info.x // * scale
				const top = info.y //* scale
				const angle = info.angle * 180 / 3.14
				console.log("addStation", svg, info)
				fabric.loadSVGFromURL(svg).then(
					({
						objects,
						options
					}) => {

						const obj = fabric.util.groupSVGElements(objects, options);
						obj.set({
							id: `station_${new Date().getTime()}`,
							eleType: "station",
							left,
							top,
							angle,
							data: info,
							originX: "center",
							originY: "center",
							hasControls: this.editMode,
							lockRotation: true,
							lockScalingX: true,
							lockScalingY: true,
							lockMovementX: true,
							lockMovementY: true,
							canSelect: true,
							lockEdit: true
						});
						_this.addObject(obj)
						resolve()
					}
				)
			})
		},
		updateAgv(info) {
			const _this = this
			return new Promise((resolve) => {
				//	const scale = this.getAutoScale()
				const left = info.x // * scale
				const top = info.y // * scale
				const angle = info.angle * 180 / 3.14
				if (this.agvObj) {
					this.agvObj.set({
						left,
						top,
						angle,
						data: info
					});
					this.agvObj.setCoords()
					_this.canvas.requestRenderAll();
					resolve()
				} else {
					const zoom = _this.canvas.getZoom();
					fabric.loadSVGFromURL("static/images/van.svg").then(
						({
							objects,
							options
						}) => {

							const obj = fabric.util.groupSVGElements(objects, options);

							obj.set({
								id: "agv",
								eleType: "agv",
								left,
								top,
								angle,
								data: info,
								originX: "center",
								originY: "center",
								//	scale: 1 / zoom,
								hasControls: false,
								lockRotation: true,
								lockScalingX: true,
								lockScalingY: true,
								lockMovementX: true,
								lockMovementY: true,
								selectable: false,
								lockEdit: true

							});
							console.log("agv", JSON.stringify(info))
							_this.canvas.add(obj)
							_this.agvObj = obj
							resolve()
						}
					)
				}

			})
		},
		setAllObjectSelectable(selectable) {
			let flag = false
			this.canvas.forEachObject(function(obj) {
				if (obj.canSelect) {
					if (!obj.flag) {
						flag = true
					}
					obj.set({
						selectable: selectable,
						lockEdit: true
					})

				}

			});
			if (flag) {
				this.canvas.requestRenderAll()
			}
		},
		receiveMsg(newValue, oldValue) {
			if (typeof newValue == "undefined")
				return;
			const _this = this
			//console.log("receiveMsg",_this.initFlag)
			setTimeout(() => {
				if (_this.initFlag) {
					_this.handleMsg(newValue, oldValue)
				} else {
					_this.receiveMsg(newValue, oldValue)
				}
			}, 500)

		},
		async handleMsg(newValue, oldValue) {

			const _this = this
			try {
				var data = JSON.parse(newValue);
				for (var i = 0; i < data.length; i++) {
					const item = data[i]

					if (item.method == "init") {
						if (item.param?.editMode) {
							_this.editMode = true
						} else {
							_this.editMode = false
						}
					}

					if (item.method == "background") {
						await _this.setBackground(item.param)
					} else if (item.method == "update_agv_state") {
						const info = item.param || {}
						await _this.updateAgv(info)
						// const workSpaceWidth = this.workSpace.width
						// const workSpaceHeight = this.workSpace.height


					} else if (item.method == "move_canvas") {
						const info = item.param || {}
						//	const scale = this.getAutoScale()
						const zoom = this.canvas.getZoom();
						const eleHeight = this.eleHeight - 150

						let deltaX = info.x * zoom - this.eleWidth / 2 // * scale;
						let deltaY = info.y * zoom - eleHeight / 2 //* scale;
						const vpt = this.canvas.viewportTransform;
						const oldX = vpt[4]
						const oldY = vpt[5]
						if (deltaX + this.eleWidth > this.workSpace.width)
							deltaX = this.workSpace.width - this.eleWidth
						if (deltaY + eleHeight > this.workSpace.height)
							deltaY = this.workSpace.height - eleHeight
						if (oldX + this.eleWidth >= info.x * zoom && info.x * zoom >= oldX) {
							deltaX = -oldX
							//console.log("move_canvas X", oldX)
						}
						if (oldY + eleHeight >= info.y * zoom && info.y * zoom >= oldY) {
							//	console.log("move_canvas Y", oldY)
							deltaY = -oldY
						}
						_this.canvas.absolutePan(new fabric.Point(deltaX, deltaY));

					} else if (item.method == "add_station") {
						const stationList = item.param || []
						let list = _this.canvas.getObjects() || []
						for (let i2 in stationList) {
							const station = stationList[i2]
							const curIndex = list.findIndex((a) => a.data?.stationID == station.stationID)
							if (curIndex < 0) {
								await _this.addStation(station)
							}
						}
					} else if (item.method == "update_station") {
						const stationList = item.param || []
						let list = _this.canvas.getObjects() || []
						list = list.filter((a) => a.eleType == "station")
						for (let i2 in stationList) {
							const station = stationList[i2]
							const curIndex = list.findIndex((a) => a.data.stationID == station.stationID)
							if (curIndex < 0) {
								await _this.addStation(station)
							} else {
								//	_this.canvas.remove(list[curIndex])
								const curStationObj = list[curIndex]
								const angle = station.angle * 180 / 3.14
								//const scale = this.getAutoScale()
								const left = station.x //* scale
								const top = station.y //* scale
								console.log("update_station", curIndex, left,
									top,
									angle)
								if (curStationObj.left != left || top != station.y || curStationObj.angle !=
									angle) {
									curStationObj.set({
										left,
										top,
										angle,
										data: station
									})
									curStationObj.setCoords()
								}
							}

						}

					} else if (item.method == "remove_station") {
						const stationList = item.param || []
						let list = _this.canvas.getObjects() || []
						list = list.filter((a) => a.eleType == "station")
						for (let i2 in stationList) {
							const station = stationList[i2]
							const curIndex = list.findIndex((a) => a.data.stationID == station.stationID)
							if (curIndex > -1) {
								_this.canvas.remove(list[curIndex])
							}
						}

					} else if (item.method == "select_station") {
						const station = item.param || {}
						let list = _this.canvas.getObjects() || []
						list = list.filter((a) => a.eleType == "station")
						_this.setAllObjectSelectable(false)

						let listSel = []
						const curIndex = list.findIndex((a) => a.data.stationID == station.stationID)
						if (curIndex > -1) {
							console.log("select_station", curIndex, list[curIndex])
							listSel.push(list[curIndex])

							list[curIndex].set({
								selectable: true
							})
							_this.canvas.discardActiveObject();
							// let sel = new fabric.ActiveSelection(listSel, {
							// 	canvas: _this.canvas,
							// });
							_this.canvas.setActiveObject(list[curIndex]);
						}
					} else if (item.method == "edit_station_pos") {
						const station = item.param || undefined
						if (!station) {
							if (_this.editObject) {
								_this.editObject.set({
									lockMovementX: true,
									lockMovementY: true,
								})
								_this.editObject = null
							}
							continue
						}
						let list = _this.canvas.getObjects() || []
						list = list.filter((a) => a.eleType == "station")
						_this.setAllObjectSelectable(false)
						const curIndex = list.findIndex((a) => a.data.stationID == station.stationID)
						if (curIndex > -1) {
							console.log("edit_station_pos", curIndex, list[curIndex])
							if (_this.editObject != list[curIndex]) {
								if (_this.editObject) {
									_this.editObject.set({
										lockMovementX: true,
										lockMovementY: true,
									})
								}
								_this.editObject = list[curIndex]
								_this.editObject.set({
									lockMovementX: false,
									lockMovementY: false,
								})
							}
							list[curIndex].set({
								selectable: true,
								lockEdit: false
							})
						}

					} else if (item.method == "set_selectable") {
						if (item.param)
							_this.setAllObjectSelectable(true)
						else
							_this.setAllObjectSelectable(false)
						if (_this.editObject) {
							_this.editObject.set({
								lockMovementX: true,
								lockMovementY: true,
							})
							_this.editObject = null
						}
					}

				}
				_this.canvas.renderAll()
			} catch (ex) {
				console.log(ex)
			}
		},
		showError(ex) {
			const type = typeof ex
			if (type == "string") {
				let tip = ex
				plus.nativeUI.alert(tip, undefined, "错误");
				return
			}
			let exStr = JSON.stringify(ex)
			if (exStr == "{}")
				exStr = ex

			let tip = typeof ex.msg == "string" ? ex.msg : exStr
			plus.nativeUI.alert(tip, undefined, "错误");
		},

	},
}