<template>
	<view>
		<view
			v-for="item in listReal"
			:key="item.value"
			class="show-view-item"
			:class="{ selected: item.isSel }"
			@click="handleClick(item)"
		>
			{{ item[useName] }}
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		index: {
			type: Number,
			default: 0
		},
		useName: {
			type: String,
			default: 'label'
		}
	},
	emits: ['click'],
	data() {
		return {
			listReal: []
		};
	},
	watch: {
		list: {
			handler(newVal) {
				this.listReal = newVal;
			},
			immediate: true
		}
	},
	methods: {
		handleClick(item) {
			this.listReal.forEach(i => {
				i.isSel = false;
			});
			item.isSel = true;
			this.$emit('click', item, this.index + 1);
		}
	}
};
</script>

<style lang="scss" scoped>
.show-view-item {
	height: 80rpx;
	padding: 0 13rpx 0 40rpx;
	line-height: 80rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.selected {
	color: $uni-color-primary;
	background-color: rgba(48, 119, 235, 0.05);
}
</style>
