/**
 * 步骤提示框计算
 * */
export default {
	data() {
		return {
			// 外部按钮元素信息
			outerBtnDomInfo: null,
		}
	},
	computed: {
		// 是否外部按钮
		isOuterBtn() {
			return this.getBaseConfigByKey('outerBtn', true)
		},
		// 外部按钮样式
		outerBtnStyle() {
			if (!this.isOuterBtn || !this.outerBtnDomInfo || !this.tipsElementInfo) return {}
			const {
				top,
				left,
				width,
				height
			} = this.tipsElementInfo
			const _outerBtnDomInfo = this.outerBtnDomInfo
			// 距提示框的上下间距
			const gutter = 20
			// 外部按钮top值
			let bTop = 0
			if (this.tipsPosition == 'top') {
				bTop = top - gutter - _outerBtnDomInfo.height
			} else {
				bTop = top + gutter + height
			}

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

			// 外部按钮left值
			let bLeft = getTipsLeft(checkTipsPosition(['center', 'left', 'right']))
			if (this.realBaseConfig.customOuterBtn) {
				bLeft = 0
			}
			return {
				top: bTop + 'px',
				left: bLeft + 'px',
			}
		}
	},
	methods: {
		// 获取外部按钮元素信息
		async getOuterBtnDomInfo() {
			const res = await this.getDomInfo('.step-tips-btn-outer-container', this.instance)
			this.outerBtnDomInfo = res
		},

	}
}