<template>
	<div>
		<div class="productInfoModule" style="position: absolute;right: 120px;margin-bottom:0;border:none;z-index:1;" v-if="activeAnchor">
			<div class="location-href-box">
				<div class="locationHref location-href fixed-box">
					<div class="maodian">
						<ul>
								<li class="locationHrefUP"></li>
								<li class="locationHrefIn" v-for="(item,index) in stepsArr" :key="index" @click="jump(index)"><a>{{item.title}}</a>
								</li>
								<li class="locationHrefDown"></li>
						</ul>
					</div>
					<div class="scroll-top" @click="backTopClick">
						<i class="el-icon-arrow-up"/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		props: {
			stepsArr: {
				type: Array,
				default:[],
			}
		},
		data() {
			return {
				screenWidth: document.body.clientWidth,
				activeAnchor:true,
			}
		},
		mounted() {
			this.$nextTick(function() {
				window.addEventListener('scroll', this.onScroll)
				if(this.screenWidth<1300){
					this.activeAnchor=false
				}
			})
			window.onresize = () => {
				return (() => {
					this.screenWidth = document.body.clientWidth
					if(this.screenWidth<1300){
						this.activeAnchor=false
					}else{
						this.activeAnchor=true
					}
				})()
   		 }
		},
		methods: {
			backTopClick(){
				document.documentElement.scrollTop = document.body.scrollTop = 0;
			},
			onScroll() {
				var jump = document.querySelectorAll('.product-info-module')
				var distance =
					document.documentElement.scrollTop ||
					window.pageYOffset ||
					document.body.scrollTop
				jump.forEach((item, index) => {
					if (distance >= item.offsetTop) {
						this.activeStep = index
					}
				})
			},
			// 锚点点击
			jump(index) {
				console.log(index)
				this.activeStep = index
				// 用 class=".step-jump" 添加锚点，此时的类名要放在tr上，放在td上不对，
				// 以后做的时候要注意这点，不是表格的时候，如何放置锚点
				let jump = document.querySelectorAll('.product-info-module')
				// 通过 offsetTop 获取对象到窗体顶部的距离，然后赋值给 scrollTop，就能实现锚点的功能
				let total = jump[index].offsetTop
				console.log(total)
				// scrollTop滚动条距离页面的距离
				let distance =
					document.documentElement.scrollTop ||
					window.pageYOffset ||
					document.body.scrollTop
				// console.log(distance)
				// 平滑滚动，时长500ms，每10ms一跳，共50跳
				let step = total / 50
				if (total > distance) {
					smoothDown()
				} else {
					let newTotal = distance - total
					step = newTotal / 50
					smoothUp()
				}
				function smoothDown() {
					if (distance < total) {
						distance += step
						document.body.scrollTop = distance
						document.documentElement.scrollTop = distance
						window.pageYOffset = distance
						setTimeout(smoothDown, 10)
					} else {
						document.body.scrollTop = total
						document.documentElement.scrollTop = total
						window.pageYOffset = total
					}
				}
				function smoothUp() {
					if (distance > total) {
						distance -= step
						document.body.scrollTop = distance
						document.documentElement.scrollTop = distance
						window.pageYOffset = distance
						setTimeout(smoothUp, 10)
					} else {
						document.body.scrollTop = total
						document.documentElement.scrollTop = total
						window.pageYOffset = total
					}
				}
			}
		},
	}
</script>
<style lang="less" scoped>
.productInfoModule {
    border-radius: 4px;
    margin: 0 auto 30px;
}
.location-href-box {
    position: absolute;
    margin-top: -80px;
}
.location-href.fixed-box {
    position: fixed;
    right: auto;
    margin-top: 80px;
		z-index: 10;
		.scroll-top{
			height:30px;
			width:30px;
			background:#999;
			border-radius: 2px;
			color: #fff;
			cursor: pointer;
			line-height: 30px;
			text-align: center;
			font-size: 20px;
		}
}
.location-href{
	.maodian {
    border-left: 1px solid #ddd;
    margin-left: 5px;
    margin-bottom: 10px;
	}
	ul {
    list-style-type: none;
    padding: 0;
    width: 100px;
    position: relative;
    left: -7px;
		margin: 0;
		li {
			display: block;
			box-sizing: border-box;
		}
		.locationHrefUP{
			padding: 8px;
			padding-left: 10px;
			background: url(../../assets/img/rightNavIcon.png) no-repeat 1px -6px;
		}
		.locationHrefDown {
			padding: 8px;
			padding-left: 10px;
			background: url(../../assets/img/rightNavIcon.png) no-repeat 1px -1px;
		}
	}
	.locationHrefIn a {
    color: #999;
    line-height: 26px;
    padding-left: 20px;
    display: block;
    box-sizing: border-box;
    background: url(../../assets/img/rightNavIcon.png) no-repeat 1px -18px;
	}
}
</style>