<template>
	<cover-view class="index">
		<cover-view class="search" v-if="show">
			<cover-view v-for="item in list" :key="item[valueName]" class="item" :style="[setItemStyle]"
				hover-class="item-hover" hover-start-time="0" hover-stay-time="100" @click="click(item)">
				<cover-view class="item" style="padding-left: 10rpx;"
					@click="click(item)">{{ item[labelName] }}</cover-view>
			</cover-view>
			<!-- <cover-view class="empty" v-else>{{ noData }}</cover-view> -->
		</cover-view>
	</cover-view>
</template>

<script>
	export default {
		props: {
			/** 展示整体组件 */
			show: {
				type: Boolean,
				default: false
			},
			/** 需要展示的列表 */
			list: {
				type: Array,
				default: () => []
			},
			/** 自定义label */
			labelName: {
				type: String,
				default: 'label'
			},
			/** 自定义value */
			valueName: {
				type: String,
				default: 'value'
			},
			/** 无内容时显示的内容  */
			noData: {
				type: String,
				default: '暂无匹配企业...'
			},
			/** item的对齐样式 */
			align: {
				type: String,
				default: 'left',
				validator: value => {
					return ['left', 'center', 'right'].includes(value);
				}
			},
			/** 自定义item展示样式 */
			customStyle: {
				type: Object,
				default: () => ({})
			}
		},
		computed: {
			/** 设置item的样式 */
			setItemStyle() {
				const {
					align,
					customStyle
				} = this;
				return {
					textAlign: align,
					...customStyle
				};
			}
		},
		methods: {
			/** item点击事件 */
			click(item) {
				this.$emit('select', {
					...item
				});
			},
			/** 触底加载下一页 */
			scrolltolower() {
				this.$emit('scrolltolower');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.index {
		width: 99%;
		position: absolute;
		z-index: 9;


	}

	.search {
		height: 500rpx;

		overflow-x: hidden;

		.item {
			font-size: 26rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #fff;

			&-hover {
				background-color: #f5f5f5;
			}
		}
	}
</style>