/**
 * 步骤提示框计算
 * */
export default {
	data() {
		return {
			// 提示框元素信息
			tipsDomInfo: null,
		}
	},
	computed: {
		// 是否展示【跳过】按钮
		showSkip() {
			return this.getBaseConfigByKey('showSkip', true)
		},
		// 提示框样式
		tipsStyle() {
			if (!this.stepTipsShow || !this.tipsDomInfo || !this.currentEleAfterRenderInfo) return {
				top: 0,
				left: '-100vw'
			}
			const {
				top,
				left,
				width,
				height
			} = this.currentEleAfterRenderInfo

			const _tipsDomInfo = this.tipsDomInfo
			const {
				baseAlign = 'left', tipStyle
			} = this.currentEleConfig
			const arrowInfo = this.arrowStyleInfo || {}
			const arrowHeight = arrowInfo.height || 0
			const arrowWidth = arrowInfo.width || 0
			const tipsTop = this.tipsPosition == 'top' ? top - arrowHeight - _tipsDomInfo.height : top + height + arrowHeight
			let tipsLeft = left

			// 检查边界情况
			const check = (type = 'left') => {
				// 高亮元素中间位置到屏幕右侧的距离
				const rightDistance = this.systemInfo.windowWidth - left - width / 2
				// 高亮元素中间位置到屏幕左侧的距离
				const leftDistance = left + width / 2
				if (type == 'left') {
					// 检查提示框放再左侧时，位置是否合适
					return _tipsDomInfo.width > width / 2 + arrowWidth / 2 && rightDistance > _tipsDomInfo.width - width / 2
				} else if (type == 'center') {
					// 检查提示框放再中间时，位置是否合适
					return rightDistance > _tipsDomInfo.width / 2 && leftDistance > _tipsDomInfo.width / 2
				} else if (type == 'right') {
					// 检查提示框放再右侧时，位置是否合适
					return _tipsDomInfo.width > width / 2 + arrowWidth / 2 && leftDistance > _tipsDomInfo.width - width / 2
				}
			}
			// 获取left值
			const getTipsLeft = (type = 'left') => {
				if (type == 'left') {
					return left
				} else if (type == 'center') {
					return left + width / 2 - _tipsDomInfo.width / 2
				} else if (type == 'right') {
					return left + width - _tipsDomInfo.width
				}
			}

			// 检查提示框位置，寻找最合适的位置
			const checkTipsPosition = (p = ['left', 'center', 'right']) => {
				let align = ''
				for (let i = 0; i < p.length; i++) {
					if (check(p[i])) {
						align = p[i]
						break
					}
				}
				return align
			}

			if (baseAlign === 'left') {
				tipsLeft = getTipsLeft(checkTipsPosition(['left', 'center', 'right']))
			} else if (baseAlign === 'center') {
				tipsLeft = getTipsLeft(checkTipsPosition(['center', 'left', 'right']))
			} else if (baseAlign === 'right') {
				tipsLeft = getTipsLeft(checkTipsPosition(['right', 'center', 'left']))
			}
			
			return {
				...(tipStyle || this.realBaseConfig.tipStyle || {}),
				top: tipsTop + 'px',
				left: tipsLeft + 'px',
			}
		},
		// 提示框元素信息
		tipsElementInfo() {
			const _tipsStyle = this.tipsStyle
			const _tipsDomInfo = this.tipsDomInfo || {}
			const needFields = ['top', 'left']
			const info = {
				width: _tipsDomInfo.width || 0,
				height: _tipsDomInfo.height || 0,
			}
			for (const field of needFields) {
				info[field] = _tipsStyle[field] ? parseFloat(_tipsStyle[field].split('px')[0]) : 0
			}
			return info
		},
		// 【下一步】按钮文字
		nextText() {
			const baseNext = this.getBaseConfigByKey('next') || '下一步'
			const stepNext = this.currentEleConfig && this.currentEleConfig.next
			return this.currentStep == this.stepList.length - 1 ?
				(stepNext || '完成') :
				baseNext
		},
		// 【下一步】按钮样式
		nextStyle() {
			return this.getBaseConfigByKey('nextStyle') || {}
		},
		// 【【跳过】按钮文字
		skipText() {
			return this.getBaseConfigByKey('skip') || '跳过'
		},
		// 【跳过】按钮样式
		skipStyle() {
			return this.getBaseConfigByKey('skipStyle') || {}
		},
	},
	methods: {
		// 获取提示框元素信息
		getTipsDomInfo() {
			return new Promise((resolve) => {
				setTimeout(async ()=>{
					const res = await this.getDomInfo('.step-tips', this.instance)
					this.tipsDomInfo = res
					resolve()
				}, 50)
			})
		},
	}
}