<template>
	<div class="slideUpd" ref="boxH">
		<div class="list" 
		@mouseover="mouseOver"
		@mouseleave="mouseLeave"
		:style="{'margin-top': -marginTop+'px'}">
			<div class="listBox" id="listBoxH">
				<slot></slot><slot></slot><slot></slot><slot></slot>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				marginTop: 0,
				listHeight: 0,
				timeOut: '',
				boxHeight: 0
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.automatic()
			},
			getslot() {
				this.listHeight = document.getElementById("listBoxH").clientHeight/4
				this.boxHeight = this.$refs.boxH.clientHeight
			},
			// 自动滑动
			automatic() {
				this.timeOut = setInterval(() => {
					if(this.listHeight == 0) {
						this.getslot()
					}else {
						this.marginTop++
					}
					
				},60)
			},
			// 移入
			mouseOver() {
				clearTimeout(this.timeOut)
			},
			// 移出
			mouseLeave() {
				this.init()
			}
		},
		watch: {
			marginTop() {
				if(this.listHeight - this.marginTop <= 0) {
					this.marginTop = 0
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slideUpd {
		Height: 100%;
		overflow: hidden;
		.list {
			.listBox {
			}
		}
	}
</style>
