<!-- 公告轮播 -->
<template>
	<view class="NoticeList" :style="'background-color: '+bgColor+';'">
		<view  class="notice-image">
			<image :src="imageUrl" mode="aspectFit" />
		</view>
		<view class="notice-content">
			<view v-if="list.length < 1">
				<text class="content-item-text" :style="'color: '+color+';'">暂无消息</text>
			</view>
			<swiper v-else class="content-item" :vertical="vertical" :autoplay="true" :interval="interval" :circular="circular">
				<swiper-item v-for="(item, index) in list" :key="index" @click="noticeItemClickHandle(item)">
					<text class="content-item-text" :style="'color: '+color+';'">{{ item[itemKey] }}</text>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'NoticeList',
		props:{
			list: {
				type: Array,
				default: function () {
					return []
				}
			},
			// 默认图片
			imageUrl: {
				type: String,
				default: ''
			},
			// 字体颜色
			color: {
				type: String,
				default: '#564F5F'
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: '#F5F5F5'
			},
			// 滚动方向是否为纵向
			vertical: {
				type: Boolean,
				default: true
			},
			// 自动切换时间间隔
			interval: {
				type: Number,
				default: 5 * 1000
			},
			// 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张
			circular: {
				type: Boolean,
				default: true
			},
			// 公告显示的取值字段
			itemKey: {
				type: String,
				default: 'title'
			}
		},
		data() {
			return {};
		},
		methods: {
			noticeItemClickHandle (item) {
				this.$emit('click', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
.NoticeList{
	width: 100%;
	height: 38rpx;
	overflow: hidden;
	display: flex;
	justify-content: flex-start;
	
	.notice-image {
		line-height: 38rpx;
		padding-right: 20rpx;
		// vertical-align: middle;
		// text-align: center;
		display: flex;
		align-items: center;
		image {
			width: 28rpx;
			height: 28rpx;
		}
	}
	.notice-content {
		flex: 1;
		position: relative; 
		font-size: 24rpx;
		
		.content-item {
			width: 100%;
			height: 38rpx;
			text-align: left;
			line-height: 38rpx;
		}
		.content-item-text{
			display: inline-block;
			width: 100%;
			white-space: nowrap;
			text-overflow: ellipsis;
			line-height: 40rpx;
			overflow: hidden;
		}
	}
}
</style>
