<!--
 * @Author: euzhi
 * @Description: 搜索商品
-->
<template>
	<view class="appCotent">
		<div class="myMoveCar">
			<div class="my__search">
				<u-search placeholder="请输入商品" :showAction='false' bgColor='#ffffff' v-model="keyword"
					@change="searchCommodity"></u-search>
			</div>
			<div class="list">
				<div class="list__item" v-for="(vo,inx) in items" :key="inx" @click="goDetail(vo.id,vo.link)">
					<div class="list__img">
						<!-- <image :src="vo.img" /> -->
						<image :src="vo.mainImgUrl" style="width: 160rpx;height: 160rpx;border-radius:10rpx;"></image>
					</div>
					<div class="list__money">
						<div class="money__title">
							<text>{{vo.title}}</text>
						</div>
						<div class="code__tips">
							<text>{{vo.spec}}</text>
						</div>
						<div class="money__num">
							<text class="num__one">¥{{vo.currentPrice/100}}</text>
							<text class="num__two">¥{{vo.originalPrice/100}}</text>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				items: [],
				timer: null
			};
		},
		methods: {
			goView() {
				uni.navigateTo({
					url: '/pagesB/pages/move-car/moveCarDetail'
				})
			},
			searchCommodity() {
				if (this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					let searchCondition = {
						searchVal: this.keyword
					}
					console.log(searchCondition, 222222222)
					this.$http.request({
						url: '/app/index/mall/list',
						method: 'get',
						data: searchCondition,
					}).then(res => {
						this.items = res.rows
					})
				}, 300)
			},
			goDetail(id, link) {
				let token = uni.getStorageSync('userToken');
				if (!token) {
					let returnPage = '/pages/main';
					let pageType = "reLaunch"
					uni.navigateTo({
						url: "/pages/login/index/index?returnPage=" + returnPage + '&pageType=' + pageType
					})
					return;
				}
				if (link) {
					// uni.navigateTo({
					//     url: '/pages/webview/webview?url=' + link
					// })
					uni.navigateToMiniProgram({
						appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
						path: link, // 目标小程序的页面路径
						extraData: { // 需要携带的参数
						},
						success(res) { // 打开成功
						}
					})
					return
				}
				uni.showToast({
					title: "该商品暂无链接！",
					icon: 'none',
					duration: 1500,
				});
				// uni.navigateTo({
				//     url: '/pagesC/pages/shop/detail?id=' + id
				// })
			},
		},
	}
</script>

<style lang="scss" scoped>
	.myMoveCar {
		padding: 40rpx 30rpx;

		.list {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;
			padding-top: 30rpx;

			.list__item {
				padding: 28rpx;
				box-sizing: border-box;
				width: 640rpx;
				height: 220rpx;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				position: relative;
				margin-bottom: 20rpx;

				.list__img {
					width: 160rpx;
					height: 160rpx;
					background: #3699ff;
					border-radius: 10rpx;
					position: absolute;
					left: -50rpx;
					border-radius: 20rpx;
				}

				.list__money {
					margin: 0 20rpx;
					margin-left: 100rpx;

					.money__title {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;

						line-height: 42rpx;

						.code__tips {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							line-height: 42rpx;
						}
					}

					.money__num {
						.num__one {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #e1251b;
							line-height: 42rpx;
							margin-right: 20rpx;
						}

						.num__two {
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 42rpx;
						}
					}
				}

				.list__add {
					position: absolute;
					right: 30rpx;
					bottom: 30rpx;
					width: 44rpx;
					height: 44rpx;

					image {
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
		}
	}
</style>
