<template>
	<view class="change-position">
		<view class="search-list">
			<view v-for="item in sectionsList" :key="item.sectionCode" class="item" hover-class="is-active"
				@click="$emit('changeCode', item)">
				<!-- <view class="icon icon-lk" v-if="item.type == 1" />
				<view class="icon icon-ld" v-else /> -->
				<text class="position-name">{{item.name}}</text>
				<text class="position">{{item.distance}}m内</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Change",
		props: {
			sectionsList: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {
				searchValue: '',
			}
		},
		computed: {
			// sectionsArr() {
			// 	if (this.searchValue) {
			// 		return this.sectionsList.filter(item => item.name.includes(this.searchValue))
			// 	}
			// 	return this.sectionsList
			// }
		},
		methods: {
		}
	}
</script>

<style scoped lang="scss">
	.change-position {
		width: 100%;
		height: 100%;
		background: #ffffff;

		.u-button {
			width: 170rpx;
			background: #2663BF;
			color: #ffffff;
			margin-left: 20rpx;
			height: 68rpx;
		}


		.search-list {
			min-height: 160rpx;
			width: 100%;
			max-height: 400rpx;
			overflow-y: auto;

			.item {
				display: flex;
				height: 100rpx;
				align-items: center;
				font-size: 32rpx;
				color: #8a8a8a;
				padding: 0 26rpx;

				&.is-active {
					background: #e7effd;
					color: #2663BF;
				}

				.icon {
					width: 30rpx;
					height: 30rpx;
					background-size: 30rpx 30rpx;
					background-repeat: no-repeat;
					margin-right: 8px;

					&-lk {
						background-image: url("/static/map/lk.png");
					}

					&-ld {
						background-image: url("/static/map/ld.png");
					}
				}

				.position-name {
					display: block;
					flex: 1;
					overflow: hidden;
					// white-space: nowrap;
					// text-overflow: ellipsis;
				}
			}
		}
	}
</style>