<template>
	<view class="search-list-page">
		<HeaderCom></HeaderCom>
		<view class="search">
			<image src="@/static/new/search.png" class="search-icon" mode="aspectFit"></image>
			<input type="text" placeholder="请输入内容" v-model="productName" class="input" placeholder-class="place-class">
			<image src="@/static/new/close.png" class="close" mode="a" v-if="productName" @click="delSearch"></image>
			<view @click="search" class="cancel">搜索</view>
		</view>
		<scroll-view scroll-y="true" class="main">
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
					<view class="shop">
						<image v-if="item.coverResource" :src="item.coverResource.url" class="shop-img" mode="aspectFit"></image>
					</view>
					<view class="name">{{item.name}}</view>
					<view class="point">
						<image src="@/static/an/point.gif" class="point-icon" mode=""></image>
						{{item.point.mall | numberFormat(item.point.mall)}}
					</view>
					<!-- <view class="price">¥{{item.price.sale}}</view> -->
				</view>
			</view>
		</scroll-view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/shop/search-list"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { productTagsApi,productApi } from '@/API/product.js'
	import {
		productChannelApi,productChannelPointApi
	} from '@/API/shop.js'
	import HeaderCom from '@/pages/components/header.vue'
	export default{
	mixins: [myMixins],
		data(){
			return{
				list:[],
				id:"",
				page:1,
				productName:"",
				sort: "",//sales销量 price价格
				order: "desc",//asc 升  desc降
				total:0
			}
		},
		components:{HeaderCom},
		onLoad(opation) {
			this.id = opation.id ? opation.id : ''
			this.productName = opation.productName ? opation.productName : ''
			this.getList(this.productName)
		},
		methods:{
			goBack(){
				uni.switchTab({
					url:'/pages/shop/index'
				})
			},
			delSearch(){
				this.productName = ''
				this.page = 1
				this.list = []
				this.getList(this.productName)
			},
			search(){
				this.page = 1
				this.list = []
				this.getList(this.productName)
			},
			// 查看详情
			goDetail(item){
				uni.navigateTo({
					url:`/pages/shop/detail?id=${item.id}`
				})
			},
			// 获取商品列表
			getList(productName){
				uni.showLoading()
				// productChannelPointApi({page:this.page,size:10,name:this.productName,}).then(res => {
				// 	uni.hideLoading()
				// 	if(res.code === 200){
				// 		if(this.page > 1){
				// 			this.list = [...this.list,...res.data.content]
				// 		}else{
				// 			this.list = res.data.content
				// 		}
				// 		this.total = res.data.total
				// 	}else{
				// 		this.$api.msg(res.message)
				// 	}
				// }).catch(err => {
				// 	uni.hideLoading()
				// })
				productChannelApi({page:this.page,size:10,name:this.productName,}).then(res => {
					uni.hideLoading()
					if(res.code === 200){
						if(this.page > 1){
							this.list = [...this.list,...res.data.content]
						}else{
							this.list = res.data.content
						}
						this.total = res.data.total
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
				// productApi({page:this.page,size:10,name:this.productName,}).then(res => {
				// 	uni.hideLoading()
				// 	if(res.code === 200){
				// 		if(this.page > 1){
				// 			this.list = [...this.list,...res.data.content]
				// 		}else{
				// 			this.list = res.data.content
				// 		}
				// 		this.total = res.data.total
				// 	}else{
				// 		this.$api.msg(res.message)
				// 	}
				// }).catch(err => {
				// 	uni.hideLoading()
				// })
			},
			// 上拉加载
			lowerBottom(){
				if(this.total === this.list.length){
					return
				}
				this.page += 1;
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.search-list-page{
		padding-top: 112rpx;
		.search{
			height: 88rpx;
			padding: 0 32rpx;
			background-color: #fff;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.search-icon{
				position: absolute;
				width: 48rpx;
				height: 48rpx;
				top: 22rpx;
				left: 48rpx;
			}
			.input{
				width: 598rpx;
				height: 64rpx;
				background: rgba(0,0,0,0.04);
				border-radius: 16rpx;
				padding: 0 72rpx;
				color: #000;
				font-size: 32rpx;
			}
			.place-class{
				font-size: 32rpx;
				color: rgba(0,0,0,0.45);
			}
			.close{
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 136rpx;
				top: 28rpx;
			}
			.cancel{
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}
		.main {
			height: calc(100vh - 200rpx);
		
			.list {
				display: grid;
				gap: 22rpx;
				grid-template-rows: 1fr;
				margin: 0px auto;
				grid-template-columns: repeat(2, 1fr);
				padding: 24rpx;
				border-radius: 8rpx;
		
				.item {
					width: 340rpx;
					// height: 436rpx;
					padding-bottom: 12rpx;
					background-color: #fff;
		
					.shop {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 340rpx;
						height: 240rpx;
						background-image: url('@/static/new/card-shop.png');
						background-repeat: no-repeat;
						background-size: 100%;
						border-radius: 8rpx 8rpx 0px 0px;
		
						.shop-img {
							// width: 192rpx;
							height: 236rpx;
						}
					}
		
					.name {
						width: 304rpx;
						max-height: 80rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 28rpx;
						color: #666;
						margin: 16rpx 0 0 16rpx;
					}
		
					.point {
						margin: 8rpx 0 0 16rpx;
						display: flex;
						align-items: center;
						font-weight: 800;
						font-size: 28rpx;
						color: #000000;
						.point-icon {
							margin-right: 8rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}
		
					.price {
						margin-left: 16rpx;
						height: 40rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #999999;
						display: flex;
						align-items: center;
						text-decoration: line-through;
					}
				}
			}
		}
	}
</style>