<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="车辆品牌" left-icon="left" @clickLeft="goBackAdd" backgroundColor="transparent" :border="false">
		</uni-nav-bar>


		<scroll-view class="page" scroll-y>
			<!-- 搜索框 -->
			<view class="search-box">
				<input class="search-input" v-model="searchKey" placeholder="请输入名称"
					placeholder-class="input-placeholder" @input="onSearch" />
				<uni-icons type="search" size="20" color="#999" />
			</view>
			<!-- 小区列表 -->
			<view class="carBrand-list">
				<view class="carBrand-item" v-for="(item, index) in filteredList" :key="index"
					@click="selectCarBrand(item)">
					<text class="carBrand-name">{{ item.name }}</text>
					<text class="item-arrow"></text>
				</view>
			</view>
		</scroll-view>
	</view>



</template>

<script>
	export default {
		onReady: function(e) {},
		components: {

		},
		computed: {
			// 过滤后的列表（搜索功能）
			filteredList() {
				if (!this.searchKey.trim()) {
					return this.carBrandList
				}
				return this.carBrandList.filter(item =>
					item.name.includes(this.searchKey.trim())
				)
			},


		},

		created() {

		},
		onShow() {

		},
		onUnload() {

		},
		onLoad(option) {

		},
		mounted() {},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				searchKey: '',
				carBrandList: [{
						id: 1,
						name: '宝马'
					},
					{
						id: 2,
						name: '奥迪'
					},
				]
			}
		},


		methods: {
			// 搜索输入事件
			onSearch() {
				// 实时过滤，computed 自动处理
			},

			// 选择小区
			selectCarBrand(item) {
				uni.setStorageSync('carBrandId', item.id);
				uni.setStorageSync('carBrandName', item.name);

				uni.redirectTo({
					url: '/pages/my/addCar',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

			},
			goBackAdd() {
				uni.removeStorageSync('carBrandId');
				uni.removeStorageSync('carBrandName');

				uni.redirectTo({
					url: '/pages/my/addCar',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

			},

		},


	}
</script>
<style lang="scss">
	page {
		background: #fff;
		overflow: hidden;
		height: 100vh;
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		/* background-color: #fff; */
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 20px;
		box-sizing: border-box;
	}

	/* 底部按钮 */
	.bottom-btn {
		padding: 10px 15px 20px;
	}


	/* 搜索框 */
	.search-box {
		display: flex;
		align-items: center;
		background-color: #F3F3F3;
		border-radius: 10px;
		margin: 0rpx 0px 20rpx 0px;
		padding: 0 30rpx;
		height: 70rpx;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 30rpx;
		border: none;
		background: transparent;
	}

	.input-placeholder {
		color: #999;
		font-size: 30rpx;
	}

	.search-icon {
		font-size: 36rpx;
		color: #999;
	}

	/* 小区列表 */
	.carBrand-list {
		padding: 0 30rpx;
	}

	.carBrand-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}



	.carBrand-name {
		font-size: 32rpx;
		color: #000;
		font-weight: 500;
	}

	.item-arrow {
		display: inline-block;
		width: 5px;
		height: 5px;
		border-top: 2rpx solid #999;
		border-right: 2rpx solid #999;
		transform: rotate(45deg);
		margin-left: 10rpx;
		margin-right: 5px;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}
</style>