<template>
	<view v-show="rulerToggle" :style="{width : windowWidth + 'px',height : windowHeight + 'px',position:position }"
		class="ScaleBox" @touchmove.stop.prevent="dottedLineMove" @touchend.stop.prevent="dottedLineUp">

		<view id="levelRuler" class="ScaleRuler_h" @touchstart.stop.prevent="levelDragRuler"
			:style="{transform:'scaleX(' + zoomAndBigScan + ')', right: getWidthCalibrationData()}">
			<span v-for="(item,index) in xScale" :key="index" :style="{right:index * 50 + 2 + 'px'}"
				class="n">{{ item.id }}</span>
		</view>

		<view id="verticalRuler" class="ScaleRuler_v" @touchstart.stop.prevent="verticalDragRuler"
			:style="{transform:'scaleY(' + zoomAndBigScan + ')', bottom: getHeightCalibrationData() }">
			<span v-for="(item,index) in yScale" :key="index" :style="{bottom:index * 50 + 2 + 'px'}"
				class="n">{{ item.id }}</span>
		</view>
		<view id="levelDottedLine" :style="{top:(verticalDottedTop - 8)  + 'px'}" class="RefDot_h" style="right:18px;">
			<view
				style="position: absolute; left: 0; color: #4AFFFF;font-size: 26upx; height: 25px; top: -12.5px;padding-top: 6px; "
				v-if="isSelectMoveY">
				{{showYLine}}
			</view>
		</view>

		<view id="verticalDottedLine" :style="{left:(levelDottedLeft - 8)  + 'px'}" class="RefDot_v"
			style="bottom:18px ">
			<view
				style="position: absolute; top:0;color: #4AFFFF;font-size: 26upx;left: -12.5px;width: 25px; text-align: center;"
				v-if="isSelectMoveX">
				{{showXLine}}
			</view>
		</view>

		<view v-for="item in levelLineList" :id="item.id" :title="item.title" :style="{top:item.top+'px'}"
			:key="item.id" class="RefLine_h" @touchstart.stop.prevent="dragLevelLine(item.id)"
			style="height: 25px; right:18px;">
			<view v-if="isShowDistance"
				style="position: absolute; left: 0;color: #4AFFFF;font-size: 26upx; height: 25px;text-align: center;  top: -1.5px;padding-top: 6px; ">
				{{ getRealPxData(item.top,2) }}
			</view>
		</view>
		<view v-for="item in verticalLineList" :id="item.id" :title="item.title" :style="{left:item.left+'px'}"
			:key="item.id" class="RefLine_v" @touchstart.stop.prevent="dragVerticalLine(item.id)"
			style=" width: 25px; bottom:18px ">
			<view v-if="isShowDistance"
				style="position: absolute; top: 0;color: #4AFFFF;font-size: 26upx; width: 25px;text-align: center; left: -1.5px;">
				{{ getRealPxData(item.left,1) }}
			</view>
		</view>
		<view id="content" :style="{left: contentLayout.left + 'px',top: contentLayout.top + 'px'}"
			style="padding: 18px;">
		</view>
	</view>

</template>

<script>
	//var window;
	export default {
		name: 'VueRulerTool',
		components: {},
		props: {
			position: {
				type: String,
				default: 'relative',
				validator: function(val) {
					return ['absolute', 'fixed', 'relative', 'static', 'inherit'].indexOf(val) !== -1
				}
			},
			//规定元素的定位类型
			isHotKey: {
				type: Boolean,
				default: true
			}, //热键开关
			isScaleRevise: {
				type: Boolean,
				default: false
			},
			isShowDistance: {
				type: Boolean,
				default: true
			}, //显示距离
			presetLine: {
				type: Array,
				default: () => {
					return [] // { type: 'l', site: 50 }, { type: 'v', site: 180 }
				}
			},
			//预置参考线
			contentLayout: {
				type: Object,
				default: () => {
					return {
						top: 0,
						left: 0
					}
				}
			}, //内容部分布局
			parent: {
				type: Boolean,
				default: false
			},
			//窗口宽度
			windowWidth: {
				type: Number,
				default: 10,
			},
			windowHeight: {
				type: Number,
				default: 0,
			},
			//上间距
			topSpacing: {
				type: Number,
				default: 10,
			},
			//左间距
			leftSpacing: {
				type: Number,
				default: 10,
			},
			xScale: {
				type: Array,
				default: () => {
					return [] // { type: 'l', site: 50 }, { type: 'v', site: 180 }
				}
			},
			yScale: {
				type: Array,
				default: () => {
					return [] // { type: 'l', site: 50 }, { type: 'v', site: 180 }
				}
			},
			presetLine: {
				type: Array,
				default: () => {
					return [] // { type: 'l', site: 50 }, { type: 'v', site: 180 }
				}
			},
			//尺子间距
			ruleSpacing: {
				type: Number,
				default: 50,
			},
			//尺子宽度放大比例
			ruleWidthScale: {
				type: Number,
				default: 1,
			},
			//尺子高度放大比例
			ruleHeightScale: {
				type: Number,
				default: 1,
			},
			//对比后缩放比例
			zoomAndBigScan: {
				type: Number,
				default: 1,
			},
		},
		data() {
			return {
				isDrag: false,
				dragFlag: '', // 拖动开始标记，可能值x(从水平标尺开始拖动),y(从垂直标尺开始拖动)
				levelLineList: [], // 生成的水平线列表
				verticalLineList: [], // 生成的垂直线列表
				levelDottedLeft: -999, // 水平虚线位置
				verticalDottedTop: -999, // 垂直虚线位置
				rulerWidth: 0, // 垂直标尺的宽度
				rulerHeight: 0, // 水平标尺的高度
				dragLineId: '', // 被移动线的ID
				keyCode: {
					r: 82
				}, // 快捷键参数
				rulerToggle: true, // 标尺辅助线显示开关
				stickerList: [], //贴纸集合
				showXLine: "", //显示x轴数据
				showYLine: "", //显示Y轴数据
				isSelectMoveX: false, //是否选中移动
				isSelectMoveY: false, //是否选中移动
			}
		},

		watch: {

		},

		mounted() {
			this.init()
			const self = this // 绑定窗口调整大小onresize事件
		},

		beforeDestroy: function() {

		},

		methods: {

			//生成坐标点数据
			generateGuides(XList, YList) {
				this.verticalLineList = [];
				this.levelLineList = [];
				//添加横线
				if (XList != null) {
					for (let topDataInit of XList) {
						this.addNewHorizontalLineList(topDataInit);
					}
				}
				//添加竖线
				if (YList != null) {
					for (let leftDataInit of YList) {
						this.addNewVerticalLineList(leftDataInit);
					}
				}

			},

			//新添加横线参考线
			addNewHorizontalLineList(topDataInit) {
				let topData = (this.windowHeight - 30.5 - (this.ruleWidthScale * topDataInit)).toFixed(0);
				this.levelLineList.push({
					id: 'levelLine' + this.levelLineList.length + 1,
					title: topData + 'px',
					top: topData,
				})
			},

			//新添加竖线参考线
			addNewVerticalLineList(leftDataInit) {
				let leftData = (this.windowWidth - 30.5 - (this.ruleWidthScale * leftDataInit)).toFixed(0);
				this.verticalLineList.push({
					id: 'verticalLine' + this.verticalLineList.length + 1,
					title: leftData + 'px',
					left: leftData
				})
			},

			//保留两位小数点
			keepTwoNumber(num) {
				try {
					num = Number(num.toString().match(/^\d+(?:\.\d{0,6})?/))
				} catch (e) {
					//TODO handle the exception
				}
				return num
			},

			//获取宽度校准数据
			getWidthCalibrationData() {
				let distance = this.keepTwoNumber(this.windowWidth * (1 - this.zoomAndBigScan) / 2);
				let widthData = (18 - distance) + "px";
				return widthData;
			},

			//获取高度校准数据
			getHeightCalibrationData() {
				let distance = this.keepTwoNumber(this.windowHeight * (1 - this.zoomAndBigScan) / 2);
				let heightData = (18 - distance) + "px";
				return heightData;
			},

			//获取水平线列表
			getlevelLineList() {
				return this.levelLineList;
			},

			//生成的垂直线列表
			getverticalLineList() {
				return this.verticalLineList;
			},

			//获取精确像素点 //type=1 ,type =2  //1竖线 2 横线
			getRealPxData(date, type) {
				var data;
				if (type == 1) {
					data = Math.floor(((this.windowWidth - 30.5 - date) / this.ruleWidthScale))
				} else {
					data = Math.floor(((this.windowHeight - 30.5 - date) / this.ruleWidthScale))
				}
				return data;
			},

			//初始化盒子数据
			init() {
				this.box()
			},

			//盒子数据
			box() {
				this.rulerWidth = 18;
				this.rulerHeight = 18;
			},

			//获取是否参考线
			getRulerLineIs() {
				this.$emit('getRulerLineIs', this.levelLineList, this.verticalLineList)
			},


			//获取窗口宽与高生成刻数字
			scaleCalc() {
				for (let i = 0; i < this.windowWidth; i += 1) {
					if (i % 50 === 0) {
						this.xScale.push({
							id: i
						})
					}
				}
				for (let i = 0; i < this.windowHeight; i += 1) {
					if (i % 50 === 0) {
						this.yScale.push({
							id: i
						})
					}
				}
			},


			//添加横线参考线
			addHorizontalLineList(topDataInit) {
				let topData = (this.windowHeight - 30.5 - (this.ruleWidthScale * topDataInit)).toFixed(0);
				// let realTopData = this.getRealPxData(topData, 2);
				// let distance = realTopData - topDataInit;
				// if (distance > 0) {
				// 	distance = distance * this.ruleWidthScale;
				// 	topData = (1 - distance) + parseFloat(topData)
				// } else if (distance < 0) {
				// 	distance = distance * this.ruleWidthScale;
				// 	topData = (distance) + parseFloat(topData)
				// }
				this.levelLineList.push({
					id: 'levelLine' + this.levelLineList.length + 1,
					title: topData + 'px',
					top: topData,
				})
				this.getRulerLineIs()
			},


			//添加竖线参考线
			addVerticalLineList(leftDataInit) {
				let leftData = (this.windowWidth - 30.5 - (this.ruleWidthScale * leftDataInit)).toFixed(0);
				// let realLeftData = this.getRealPxData(leftData, 1);
				// let distance = realLeftData - leftDataInit;
				// if (distance > 0) {
				// 	distance = distance * this.ruleWidthScale;
				// 	leftData = (1 - leftData) + parseFloat(leftData)
				// } else if (distance < 0) {
				// 	distance = distance * this.ruleWidthScale;
				// 	leftData = (distance) + parseFloat(leftData)
				// }
				this.verticalLineList.push({
					id: 'verticalLine' + this.verticalLineList.length + 1,
					title: leftData + 'px',
					left: leftData
				})
				this.getRulerLineIs()
			},


			//移动开始计算距离
			dottedLineMove($event) {
				if (!this.isShowDistance) {
					return;
				}
				switch (this.dragFlag) {
					case 'x':
						if (this.isDrag) {
							this.isSelectMoveY = true;
							this.verticalDottedTop = $event.changedTouches[0].pageY - this.topSpacing
							this.showYLine = Math.floor((this.windowHeight - 11.5 - this.verticalDottedTop) / this
								.ruleWidthScale)
						} else {
							this.showYLine = "";
							this.isSelectMoveY = false;
						}
						break
					case 'y':
						if (this.isDrag) {
							this.isSelectMoveX = true;
							this.levelDottedLeft = $event.changedTouches[0].pageX - this.leftSpacing
							this.showXLine = Math.floor((this.windowWidth - 11.5 - this.levelDottedLeft) / this
								.ruleWidthScale)

						} else {
							this.isSelectMoveX = false;
							this.showXLine = "";
						}
						break
					case 'l':
						if (this.isDrag) {
							this.isSelectMoveY = true;
							this.verticalDottedTop = $event.changedTouches[0].pageY - this.topSpacing
							this.showYLine = Math.floor((this.windowHeight - 11.5 - this.verticalDottedTop) / this
								.ruleWidthScale)
						} else {
							this.isSelectMoveY = false;
							this.showYLine = "";
						}
						break
					case 'v':
						if (this.isDrag) {
							this.isSelectMoveX = true;
							this.levelDottedLeft = $event.changedTouches[0].pageX - this.leftSpacing
							this.showXLine = Math.floor((this.windowWidth - 11.5 - this.levelDottedLeft) / this
								.ruleWidthScale)

						} else {
							this.isSelectMoveX = false;
							this.showXLine = "";
						}
						break
					default:
						break
				}
			},


			//抬起事件
			dottedLineUp($event) {
				if (!this.isShowDistance) {
					return;
				}
				if (this.isDrag) {
					this.isDrag = false
					switch (this.dragFlag) {
						case 'x':
							this.isSelectMoveY = false;
							if ($event.changedTouches[0].pageY - this.topSpacing < -15) { //超出边界不添加
								let Index, id
								this.levelLineList.forEach((item, index) => {
									if (item.id === this.dragLineId) {
										Index = index
										id = item.id
									}
								})
								this.levelLineList.splice(Index, 1, {
									id: id,
									title: -600 + 'px',
									top: -600
								})
							} else {
								this.levelLineList.push({
									id: 'levelLine' + this.levelLineList.length + 1,
									title: $event.changedTouches[0].pageY - 1 - this.topSpacing - 18 + 'px',
									top: $event.changedTouches[0].pageY - 1 - this.topSpacing - 18
								})
								this.getRulerLineIs()
							}
							break
						case 'y':
							this.isSelectMoveX = false;
							if ($event.changedTouches[0].pageX - this.leftSpacing < -15) { //超出边界不添加
								//不添加尺子测量线
								let Index, id
								this.verticalLineList.forEach((item, index) => {
									if (item.id === this.dragLineId) {
										Index = index
										id = item.id
									}
								})
								this.verticalLineList.splice(Index, 1, {
									id: id,
									title: -600 + 'px',
									left: -600
								})
							} else {
								this.verticalLineList.push({
									id: 'verticalLine' + this.verticalLineList.length + 1,
									title: $event.changedTouches[0].pageX - 1 - this.leftSpacing - 18 + 'px',
									left: $event.changedTouches[0].pageX - 1 - this.leftSpacing - 18
								})
								this.getRulerLineIs()
							}
							break
						case 'l':
							this.isSelectMoveY = false;
							if ($event.changedTouches[0].pageY - this.topSpacing < -15) {
								let Index, id
								this.levelLineList.forEach((item, index) => {
									if (item.id === this.dragLineId) {
										Index = index
										id = item.id
									}
								})
								this.levelLineList.splice(Index, 1, {
									id: id,
									title: -600 + 'px',
									top: -600
								})
							} else {
								let Index, id
								let top = 0;
								this.levelLineList.forEach((item, index) => {
									if (item.id === this.dragLineId) {
										Index = index
										id = item.id
										top = item.top
									}
								})
								let distance = Math.abs(($event.changedTouches[0].pageY - this.topSpacing) - top);
								if (distance > 18) {
									this.levelLineList.splice(Index, 1, {
										id: id,
										title: $event.changedTouches[0].pageY - 1 - this.topSpacing - 18 + 'px',
										top: $event.changedTouches[0].pageY - 1 - this.topSpacing - 18
									})
									this.getRulerLineIs()
								}
							}
							break
						case 'v':
							this.isSelectMoveX = false;
							if ($event.changedTouches[0].pageX - this.leftSpacing < -15) {
								let Index, id
								this.verticalLineList.forEach((item, index) => {
									if (item.id === this.dragLineId) {
										Index = index
										id = item.id
									}
								})
								this.verticalLineList.splice(Index, 1, {
									id: id,
									title: -600 + 'px',
									left: -600
								})
							} else {
								let Index, id
								let left = 0;
								this.verticalLineList.forEach((item, index) => {
									if (item.id === this.dragLineId) {
										Index = index
										id = item.id
										left = item.left
									}
								})
								let distance = Math.abs(($event.changedTouches[0].pageX - this.leftSpacing) - left);
								if (distance > 18) {
									this.verticalLineList.splice(Index, 1, {
										id: id,
										title: $event.changedTouches[0].pageX - 1 - this.leftSpacing - 18 + 'px',
										left: $event.changedTouches[0].pageX - 1 - this.leftSpacing - 18
									})
									this.getRulerLineIs()
								}
							}
							break
						default:
							break
					}
					this.verticalDottedTop = this.levelDottedLeft = -10
				}
			},

			//虚线松开
			levelDragRuler() {
				this.newLevelLine()
			},

			//水平标尺处按下鼠标
			verticalDragRuler() {
				this.newVerticalLine()
			},

			//垂直标尺处按下鼠标
			dragLevelLine(id) {
				//console.log("按下垂直")
				this.isDrag = true
				this.dragFlag = 'l'
				this.dragLineId = id
			},

			//水平线处按下鼠标
			dragVerticalLine(id) {
				this.isDrag = true
				this.dragFlag = 'v'
				this.dragLineId = id
			},

			//生成新参看线
			newLevelLine() {
				this.isDrag = true
				this.dragFlag = 'x'
			},

			//生成一个水平参考线
			newVerticalLine() {
				this.isDrag = true
				this.dragFlag = 'y'
			}, //生成一个垂直参考线

			//垂直线处按下鼠标
			keyboard($event) {
				if (this.isHotKey) {
					switch ($event.keyCode) {
						case this.keyCode.r:
							this.rulerToggle = !this.rulerToggle
							break
					}
				}
			},

			//键盘抬起事件
			quickGeneration(params) {
				if (params !== []) {
					params.forEach(item => {
						switch (item.type) {
							case 'l':
								this.levelLineList.push({
									id: 'levelLine' + this.levelLineList.length + 1,
									title: item.site + 'px',
									top: item.site
								})
								break
							case 'v':
								this.verticalLineList.push({
									id: 'verticalLine' + this.verticalLineList.length + 1,
									title: item.site + 'px',
									left: item.site
								})
								break
							default:
								break
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.ScaleBox {
		right: 0;
		bottom: 0;
		// left: 0;
		// top: 0;
		z-index: 999;
	}

	.ScaleRuler_h,
	.ScaleRuler_v,
	.RefLine_v,
	.RefLine_h,
	.RefDot_h,
	.RefDot_v {
		position: absolute;
		right: 0;
		bottom: 0;
		/*left: 0;
		top: 0; */
		//overflow: hidden;
		z-index: 999;
	}

	.ScaleRuler_h {
		width: 100%;
		height: 18px;
		right: 18px;
		opacity: 0.8;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAASCAMAAAAuTX21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACNJREFUeNpiYCAdMDKRCka1jGoBA2JZZGshiaCXFpIBQIABAAplBkCmQpujAAAAAElFTkSuQmCC) repeat-x;
		background-position: 100% 0%
			/*./image/ruler_h.png*/
	}

	.ScaleRuler_v {
		width: 18px;
		height: 100%;
		bottom: 18px;
		right: 0px;
		opacity: 0.8;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAyCAMAAABmvHtTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACBJREFUeNpiYGBEBwwMTGiAakI0NX7U9aOuHyGuBwgwAH6bBkAR6jkzAAAAAElFTkSuQmCC) repeat-y;
		background-position: 50% 100%
			/*./image/ruler_v.png*/
	}

	.ScaleRuler_v .n,
	.ScaleRuler_h .n {
		position: absolute;
		font: 10px/1 Arial, sans-serif;
		color: #333;
		cursor: default;
	}

	.ScaleRuler_v .n {
		width: 6px;
		left: 3px;
		word-wrap: break-word;
	}

	.ScaleRuler_h .n {
		top: 1px;
	}

	.RefLine_v,
	.RefLine_h,
	.RefDot_h,
	.RefDot_v {
		z-index: 998;
	}

	.RefLine_h {
		width: 100%;
		height: 3px;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAMAAADU3h9xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYIACgAADAAAJAAE0lmO3AAAAAElFTkSuQmCC) repeat-x left center;
		/*./image/line_h.png*/
		cursor: n-resize;
		/*url(./image/cur_move_h.cur), move*/
	}

	.RefLine_v {
		width: 3px;
		height: 100%;
		_height: 9999px;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAMAAAAPxGVzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYEAFAAEGAAAQAAGePof9AAAAAElFTkSuQmCC) repeat-y center top;
		/*./image/line_v.png*/
		cursor: w-resize;
		/*url(./image/cur_move_v.cur), move*/
	}

	.RefDot_h {
		width: 100%;
		height: 3px;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==) repeat-x left 1px;
		/*./image/line_dot.png*/
		cursor: n-resize;
		/*url(./image/cur_move_h.cur), move*/
		top: -10px;
	}

	.RefDot_v {
		width: 3px;
		height: 100%;
		_height: 9999px;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==) repeat-y 1px top;
		/*./image/line_dot.png*/
		cursor: w-resize;
		/*url(./image/cur_move_v.cur), move*/
		left: -10px;
	}

	#content {
		position: absolute;
	}
</style>
