<template>
	<view class="content">
		<view class="one">
			<u-search shape="square" v-model="value" :show-action="true" action-text="取消" placeholder="想买什么车"
				@change="toChange" @custom="toCustom"></u-search>
		</view>
		<view class="two">
			<view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
				<view class="left">
					<image v-if="item.file" class="image" :src="item.file&&item.file.length>0?item.file[0].url:''">
					</image>
					<u-icon v-else size="14px" name="search"></u-icon>
				</view>
				<view class="right">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;

	const value = ref('');
	const list = ref([]);
	// 查询
	const search = async () => {
	};
	// 搜索
	const toChange = async () => {
	};
	// 取消
	const toCustom = async () => {
		value.value = ''
	};
	// 查看详情
	const toView = (item) => {
		console.log(item);
		uni.navigateTo({
			url: `/pagesHome/search/index?type=${item.type || ''}`
		})
	};
	
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			padding: 2vw;
		}

		.two {
			.list {
				display: flex;
				align-items: center;
				margin: 1vw 0 0 0;
				padding: 1vw;
				border-bottom: 1px solid var(--f9Color);
			}

			.left {
				.image {
					width: 40px;
					height: 40px;
					border-radius: 40px;
				}
			}

			.right {
				margin: 0 0 0 2vw;
				font-size: var(--font14Size);
			}
		}
	}
</style>