<template>
	<div class="slideLaR" ref="box">
		<div class="list" 
		@mouseover="mouseOver"
		@mouseleave="mouseLeave"
		:style="{'margin-left': -marginLeft+'px'}">
			<span class="listBox" id="detial">
				<slot></slot><slot></slot>
			</span>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				marginLeft: 0,
				listWidth: 0,
				timeOut: '',
				boxWidth: 0
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.automatic()
			},
			getslot() {
				this.listWidth = document.getElementById("detial").offsetWidth/2
				this.boxWidth = this.$refs.box.offsetWidth
			},
			// 自动滑动
			automatic() {
				this.timeOut = setInterval(() => {
					if(this.listWidth == 0) {
						this.getslot()
					}else {
						this.marginLeft++
					}
					
				},30)
			},
			// 移入
			mouseOver() {
				clearTimeout(this.timeOut)
			},
			// 移出
			mouseLeave() {
				this.init()
			}
		},
		computed: {
			isEnough() {
				return this.listWidth > this.boxWidth
			}
		},
		watch: {
			marginLeft() {
				if(this.listWidth - this.marginLeft <= 0) {
					this.marginLeft = 0
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.slideLaR {
		width: 100%;
		overflow: hidden;
		.list {
			height: 100%;
			flex-wrap: nowrap;
			// overflow: auto;
			display: flex;
			.listBox {
				display: flex;
			}
		}
	}
</style>
