<template>
	<div class="banner banner-b-n-n">
		<div class="box">
			<ul id="bannerBox">
				<li
					v-for="(item, index) in list"
					:key="item.id"
					:class="index === current ? 'active' : ''"
					@click="bannerClick(index, item)"
				>
					<!-- <img :src= "item.cover" style="width:100%;height:560px;min-height: 350px;" :alt="item.alt"/> -->
					<img :src="item.cover" style="width:100%;" class="indexBanner" :alt="item.alt" />
				</li>
			</ul>
			<div class="status" id="status">
				<span
					class="name-t ellipsis"
					v-for="(item, index) in list"
					:key="item.id"
					:class="index === current ? 'active' : ''"
					@mouseenter="changeBanner(index)"
					@mouseleave="startLoop"
				>{{item.title}}</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'banner',
	data() {
		return {
			current: 0, // 当前索引
			timerId: null, // 清除循环标记
			intStyle: {},
			imgHeight: '',
			uiHeight: '',
			screenWidth: '',//屏幕宽度
		}
	},
	props: [
		'list',
		'looptime',
		'height',
		'width',
		'background',
		'color',
		'fontSize'
	],
	methods: {
		getArticle() {
			this.$emit('getArticle', this.article)
		},
		// 鼠标移入状态圆点
		changeBanner(index) {
			this.$emit('change', this.current)
			this.stopLoop()
			this.current = index
		},
		// 鼠标点击banner内容
		bannerClick(index, item) {
			this.$emit('click', index, item)
		},
		// 点击上一张按钮
		prev() {
			if (this.current > 0) {
				// 将对象列表对应的索引和整个对象传出去
				this.$emit('prev', this.current, this.list)
				this.current--
			} else {
				this.$emit('prev', this.current, this.list)
				this.current = this.list.length - 1
			}
		},
		// 点击下一张按钮
		next() {
			if (this.current < this.list.length - 1) {
				this.$emit('prev', this.current, this.list)
				this.current++
			} else {
				this.$emit('prev', this.current, this.list)
				this.current = 0
			}
		},
		// 鼠标移出继续循环播放
		startLoop() {
			this.int(4000)
		},
		// 鼠标移入停止循环播放
		stopLoop() {
			clearTimeout(this.timerId) // 清除循环
		},
		// 初始化加载
		int(time) {
			this.timerId = setInterval(() => {
				this.next()
			}, time)
			// 初始化样式
			this.intStyle = {
				width: this.width + 'px',
				height: this.height + 'px',
				background: this.background,
				color: this.color
			}
		},
		//图片高度
		picHeigth() {
			this.$nextTick(function() {
				// console.log(document.getElementsByClassName('indexBanner')[0].height);
				this.imgHeight = document.getElementsByClassName(
					'indexBanner'
				)[0].height
				this.uiHeight = document.getElementById('bannerBox')
				this.uiHeight.style.height = this.imgHeight + 'px'
			})
		}
	},
	mounted() {
		this.picHeigth()
	},
	created() {
		this.int(4000)
	}
}
</script>
<style>
@import '../assets/banner.css';
</style>
