/**
 * 箭头样式计算
 * */
export default {
	data() {
		return {
			// 箭头元素信息
			arrowDomInfo:null
		}
	},
	computed: {
		// 是否自定义箭头
		customArrow() {
			return this.getBaseConfigByKey('customArrow', true)
		},
		// 是否根据提示框显示位置自动旋转箭头
		autoRotateArrow() {
			return this.getBaseConfigByKey('autoRotateArrow', true)
		},
		// 箭头位置信息样式
		tipsArrowPositionStyle() {
			if (!this.currentEleAfterRenderInfo) return {}
			const {
				top,
				left,
				width,
				height
			} = this.currentEleAfterRenderInfo
			const arrowInfo = this.arrowStyleInfo || {}
			const arrowWidth = arrowInfo.width || 0
			const arrowHeight = arrowInfo.height || 0
			const arrowTop = this.tipsPosition == 'top' ? 0 - arrowHeight : height
			const positionStyle = {
				top: top + arrowTop + 'px',
				left: left + width / 2 - arrowWidth / 2 + 'px',
			}
			// 如果是自定义箭头，且允许箭头自动旋转，则弹窗在上方时，将箭头旋转180°
			if (this.customArrow && this.autoRotateArrow && this.tipsPosition == 'top') {
				positionStyle.transform = 'rotate(180deg)'
			}
			return positionStyle
		},
		// 箭头样式配置
		arrowStyleConfig() {
			const base = (this.realBaseConfig && this.realBaseConfig.arrowStyle) || {}
			const step = (this.currentEleConfig && this.currentEleConfig.arrowStyle) || {}
			return {
				arrowStyle: {
					...base,
					...step
				}
			}
		},
		// 箭头样式
		tipsArrowStyle() {
			// 如果是自定义箭头样式，则不使用默认箭头样式
			if (this.customArrow) {
				return {}
			}
			const {
				arrowStyle
			} = this.arrowStyleConfig
			const {
				width,
				height
			} = this.arrowStyleInfo
			const arrowColor = (arrowStyle && arrowStyle.color) ? arrowStyle.color : '#fff'
			const border = {
				[this.tipsPosition == 'top' ?
					'borderTop' :
					'borderBottom'
				]: `${height}px solid ${arrowColor}`,
			}
			
			const _arrowStyle = {...arrowStyle}
			delete _arrowStyle.width
			delete _arrowStyle.height
			
			return {
				...(_arrowStyle || {}),
				...border,
				'--arrow-width': width / 2 + 'px',
				'--arrow-height': height + 'px',
				'--arrow-color': arrowColor,
			}
		},
		// 箭头信息
		arrowStyleInfo() {
			if (this.customArrow) {
				return this.arrowDomInfo
			}

			const {
				arrowStyle
			} = this.arrowStyleConfig
			return {
				width: (arrowStyle && arrowStyle.width) ? parseFloat(arrowStyle.width) : 18,
				height: (arrowStyle && arrowStyle.height) ? parseFloat(arrowStyle.height) : 12,
			}
		}
	},
	methods:{
		// 获取箭头元素信息
		async getArrowDomInfo(){
			const res = await this.getDomInfo('.step-tips-arrow-container', this.instance)
			this.arrowDomInfo= res
		}
	}
}