<template>
	<view class="w-100">
		<!-- searchBar -->
		<viwe class="search-bar w-100 flex j-between a-center">
			<view class="input-wrap">
				<input
					class="input font-28 mr-2"
					type="text" 
					v-model="searchParams.keywords"
					placeholder="搜索商品"
					confirm-type="search"
					@confirm="search"
				/>
				<image
					class="search-icon ml-2"
					src="/static/images/common/icon-search.png"
					mode="aspectFit"
				/>
				<view class="clearBtn clear-btn " @click.stop="clearInput" />
			</view>
			<image
				class="nav-cart"
				src="/static/images/common/icon-cart_gray.png"
				mode="aspectFit"
				@click="navCart"
			/>
		</viwe>
		
		<view class="filter-bar flex j-around a-center font-28 text-center w-100">
			<view 
				class="item flex-1"
				:class="current_tab === 1 ? 'item_active' : null"
				@click="handleTab(1)"
			>综合</view>
			<view 
				class="item flex-1"
				:class="current_tab === 2 ? 'item_active' : null"
				@click="handleTab(2)"
			>销量</view>
			<view 
				class="item flex-1 flex j-center a-center"
				:class="current_tab === 3 || current_tab === 4 ? 'item_active' : null"
				@click="handleTab(3)"
			>
				<view>价格</view>
				<view class="sanjiao-wrap flex flex-column j-center a-center">
					<view 
						class="sanjiao iconfont icon-sanjiaoxing"
						:class="searchParams.sort === 3 ? 'item_active' : null"
					></view>
					<view 
						class="sanjiao iconfont icon-sanjiaoxingbeifen1"
						:class="searchParams.sort === 4 ? 'item_active' : null"
					></view>
				</view>
			</view>
		</view>
		
		<!-- list -->
		<view class="list w-100">

			<pull-list
				@tolower="tolower"
				@refresh="refresh"
			>
				<block
					v-for="(item, index) in searchList"
					:key="index"
				>	
					<block v-if="item.length === 0">
						<empty-view />
					</block>
					<block v-else>
						<navigator
							class="goods-item w-100 flex j-star a-center"
							open-type="redirect"
							hover-class="none"
							v-for="good in item" 
							:key="good.goods_id"
							:url="'/pages/goods/detail?goods_id=' + good.goods_id"
						>
							<image
								class="goods-cover mr-2"
								:src="baseUrl + '/' + good.goods_thumb" 
								mode="aspectFit"
							/>
							<view class="information flex-1 flex flex-column j-between a-start">
								<view class="title font-bold font-28">{{good.goods_name}}</view>
								<view class="font-24 counts">
									<text class="mr-2">规格：{{good.specification}}</text>
									<text>销量：{{good.virtual_quantity_sold}}</text>
								</view>
								<view class="font-28 flex w-100 j-between a-center">
									<view class="flex j-start a-center">
										<price
											:is_inquiry="good.is_inquiry"
											:price="good.shop_price"
										/>
										<text class="primaryColor font-28">{{good.least_str}}</text>
									</view>
									<image
										class="cart-icon"
										@click.stop="handlePop(good)"
										src="/static/images/common/icon-cart.png"
										mode="aspectFit"
									/>
								</view>
							</view>
						</navigator>
					</block>
				</block>
			</pull-list>
			
		</view>
		
		<!-- 购物弹窗 -->
		<goods-popup ref="popup" />
	</view>
</template>

<script>
import pullList from '@/components/pull-list/index.vue'
import goodsPopup from '@/components/goods-popup/index.vue'
import price from '@/components/price/index.vue'

import { searchGoods, goodsSku } from '@/apis/goods.js'
import LoadMore from '@/utils/load-more.js'
import { baseUrl } from '@/config/index.js'

export default {
	data() {
		return {
			baseUrl,
			searchList: [],
			current_tab: 1, // sort参数从1开始，为了方便
			searchParams: {
				sort: 1, // 1综合优先 2销量优先 3价格升序 4价格降序
				keywords: ''
			}
		}
	},
	
	components: {
		pullList,
		goodsPopup,
		price
	},
	
	onLoad(options) {
		this.loadmore = new LoadMore()
		this.searchParams.keywords = options.val || ''
		this.getData()
	},
	
	methods: {
		handleTab(idx) {
			const current_tab = this.current_tab
			if(idx === current_tab && current_tab !== 3) return
			this.current_tab = idx
			if(current_tab === 3) { // 当tab位于价格
				this.searchParams.sort = this.searchParams.sort === 3 ? 4 : 3
			} else {
				this.searchParams.sort = idx
			}
			this.loadmore.resetParams() // 切换请求缓存有bug，先不缓存，直接刷新参数重新请求
			this.searchList = []
			this.getData()
		},
		
		clearInput() {
			this.searchParams.keywords = ''
		},
		
		// handleSearch(e) {
		// 	const { type } = e
		// 	const value = e.detail.value.trim()
		// 	if(!value) return this.$toast({title: '请输入搜索内容'})
		// 	this.searchParams.keywords = value
		// 	switch(type) {
		// 		case 'confirm':
		// 			this.search()
		// 		break;
		// 		case 'blur':
		// 			if(this.cancle) return
		// 			this.search()
		// 		break;
		// 		default:
		// 			this.search()
		// 		break;
		// 	}
		// },
		
		// 重新搜索
		search() {
			const value = this.searchParams.keywords.trim()
			if(!value) return this.$toast({title: '请输入搜索内容'})
			this.searchParams.keywords = value
			this.loadmore.resetParams()
			this.searchList = []
			this.getData()
		},
		
		// 前往购物车
		navCart() {
			uni.switchTab({
				url: '/pages/carts/index'
			})
		},
		
		async getData() {
			try{
				const listRes = await this.loadmore.getList(this.searchParams, searchGoods)
				if(listRes.status) {
					this.$set(this.searchList, this.searchList.length, listRes.data)
				}
			}catch(e){
				this.$toast({title: e.msg || '程序错误'})
			}
		},
		
		// 加载更多
		tolower() {
			this.getData()
		},
		
		// 下拉刷新
		refresh() {
			this.searchList = []
			this.loadmore.resetParams()
			this.getData()
		},
		
		// 点击拉起弹窗
		async handlePop(goods) {
			try{
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const { status, data } = await goodsSku(goods.goods_id)
				if(status) {
					const params = {
						goodsInfo: {
							cover: `${this.baseUrl}/${goods.goods_thumb}`,
							title: goods.goods_name,
							is_inquiry: goods.is_inquiry,
							unit: goods.goods_unit
						},
						skuData: data
					}
					this.$refs.popup.show(params)
				}
				uni.hideLoading()
			}catch(e){
				console.log(e)
				uni.hideLoading()
				//TODO handle the exception
			}
		}
	}
}
</script>

<style lang="scss" scoped>
@import './common/iconfont.css';
@import './common/clear.css';
.search-bar {
	box-sizing: border-box;
	padding: 0 20rpx;
	position: relative;
	width: 100%;
	height: 128rpx;
	background-color: #fff;
	.input-wrap {
		box-sizing: border-box;
		position: relative;
		width: 654rpx;
		height: 88rpx;
		border-radius: 8rpx;
		background-color: yellow;
		.input {
			width: 500rpx;
			padding-left: 70rpx;
			height: 88rpx;
			background-color: $mainBg;
		}
		.search-icon {
			position: absolute;
			left: 0;
			top: 50%;
			z-index: 1;
			width: 34rpx;
			height: 34rpx;
			transform: translateY(-50%);
		}
		.clearBtn {
			position: absolute;
			right: 0;
			top: 50%;
			z-index: 1;
			transform: translateY(-50%);
			width: 88rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
		}
	}
	
	.nav-cart {
		width: 40rpx;
		height: 88rpx;
	}
}

.filter-bar {
	position: relative;
	height: 72rpx;
	background-color: #fff;
	&::after {
		display: inline-block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		content: '';
		width: 100%;
		height: 1rpx;
		background-color: $line;
	}
	.item {
		height: 72rpx;
		line-height: 72rpx;
		
	}
	.item_active {
		color: $primary!important;
	}
	.sanjiao-wrap {
		width: 24rpx;
		height: 18rpx;
		color: #333;
		line-height: 10rpx;
		.sanjiao {
			display: inline-block;
			font-size: 10rpx!important;
			color: #333;
			&:nth-child(1) {
				margin-bottom: 5rpx;
			}
		}
		
	}	
}

.list {
	@include borderBox(20rpx, 20rpx);
	height: calc(100vh - 200rpx);
	background-color: #fff;
	.goods-item {
		@include borderBox(20rpx, 0);
		border-bottom: 1rpx solid $line;
		.goods-cover {
			flex: 0 0 160rpx;
			width: 160rpx;
			height: 160rpx;
		}
		.information {
			height: 160rpx;
			.title {
				@include text-ellipsis(2);
			}
			.counts {
				color: $desc;
			}
			.cart-icon {
				width: 44rpx;
				height: 42rpx;
				padding: 5rpx 20rpx;
			}
		}
	}
}
</style>