<template>
	<view class="goods-search u-relative">

		<view class="header-wrap">
			<u-sticky offset-top="0" h5-nav-height="0">
				<view class="search">
					<u-search v-model="keyword" @focus="showHistory = true" :focus="showHistory" @search="onSearch" bg-color="#F4F4F4"></u-search>
				</view>
			</u-sticky>
		</view>
		<view v-show="showHistory" class="content bg-white">
			<view v-if="hotList.length" class="search-words">
				<view class="title">热门搜索</view>
				<view class="words row wrap">
					<view v-for="(item, index) in hotList" :key="index" class="item br60  mr20 mb20 lighter sm line1" @tap="onChangeKeyword(item)">{{item}}</view>
				</view>
			</view>
			<view v-if="historyList.length" class="search-words">
				<view class="title row-between">
					<view>历史搜索</view>
					<view class="xs muted mr20" style="padding: 10rpx 20rpx" @tap="clearSearchFun">清空</view>
				</view>
				<view class="words row wrap">
					<view v-for="(item, index) in historyList" :key="index" class="item br60  mr20 mb20 lighter sm line1" @tap="onChangeKeyword(item)">{{item}}</view>
				</view>
			</view>
		</view>
		<view v-show="!showHistory" class="content">
            <mescroll-body ref="mescroll" @init="mescrollInit" @down="downCallback" :up="upOption" :down="downOption" @up="upCallback">
				<view v-for="(item, index) in goodsList" :key="index">
					<navigator :url="`/pages/shop/shop?id=${item.id}`" hover-class="none" class="bg-white row u-m-b-20 u-p-20">
						<!-- <view class="bg-white row u-m-b-20 u-p-20"> -->
							<view class="">
								<u-image :src="item.image" width="136" height="136" border-radius="16"></u-image>
							</view>
							<view class="u-m-l-16 w-full row-start u-row-between">
								<view>
									<view class="u-line-2 u-p-t-10">{{item.name}}</view>
									<view class="u-p-t-20 row-between">
										<view class="row">
											<view class="primary">
												<price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
											</view>
											<view class="u-m-l-8">
												<price-format :price="item.market_price" :lineThrough="true" color="#C0C0C0" :subscriptSize="22" :firstSize="22" :secondSize="22"></price-format>
											</view>
										</view>
									</view>
								</view>
								<view class="column-end">
									<view @click.stop="addCartFun(item)">
										<u-icon name="plus-circle-fill" color="#254062" size="48"></u-icon>
									</view>
									<!-- <u-button 
										@click.stop="openSpec(item)"
										hover-class="none" 
										:customStyle="{width: '116rpx', height: '46rpx', lineHeight: '46rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx'}" 
										:hair-line="false" 
										shape="circle">
											选规格
									</u-button> -->
								</view>
							</view>
						<!-- </view> -->
					</navigator>
				</view>
			</mescroll-body>

			<view class="buy mx40 px40 br60 row-between">
				<view class="row" @tap="showCart = true">
					<view class="u-relative">
						<u-image :src="cloudPath + 'img/icon_cart.png'" width="80" height="80"></u-image>
						<view class="u-absolute top-0 right-0 text-fff number u-text-center xxs" v-if="buyNumber">
							{{ buyNumber }}
						</view>
					</view>
					<view class="text-fff u-m-l-32">未选购商品</view>
				</view>
				<view class="text-999">去结算</view>
			</view>
		</view>

		<!-- 购物车 -->
		<u-popup v-model="showCart" mode="bottom" :border-radius="16">
			<view style="max-height: 800rpx;">
				<view class="px20 text-999 mt20">
					温馨提示：请适量点餐
				</view>
				<view>
					<scroll-view style="height: 700rpx;" scroll-y="true" scroll-with-animation="true">
						<view class="row-start u-row-between u-p-t-20 u-padding-bottom-20 px20" v-for="(item, index) in 20" :key="index">
							<view class="row-start">
								<view>
									<u-image :src="cloudPath + 'img/banner.png'" width="136" height="136" border-radius="16"></u-image>
								</view>
								<view class="ml20">
									<view class="u-line-2 u-p-t-10">葱烩海鲜卷边披萨</view>
									<view class="primary u-p-t-40">
										<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
									</view>
								</view>
							</view>
							<view>
								<view class="u-text-right">
									<u-icon class="u-p-t-10" name="trash" size="32"></u-icon>
								</view>
								<view class="u-p-t-30">
									<u-number-box min="1" v-model="numberVal" @change="changeNumber"></u-number-box>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

		<shop-spec v-model="showSpec" :name="goodsName" :spec="goodsSpec" @close="showSpec = false" @confirm="confirmSpec"></shop-spec>
	</view>
</template>

<script>
	import {
		getGoodsSearch,
		getSearchpage,
		clearSearch,
		addCart,
	} from '@/api/store'
	import {
		trottle,
		loadingFun,
		getRect
	} from '@/utils/tools'
	import {
		loadingType
	} from '@/utils/type'
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins"
	export default {
        mixins: [MescrollMixin],
		data() {
			return {
				keyword: '',
				status: loadingType.LOADING,
				page: 1,
				goodsType: 'double',
				goodsList: [],
				priceSort: '',
				saleSort: '',
				showHistory: false,
				hotList: [],
				historyList: [],
                downOption: {
                    auto: false
                },
                upOption:{
                    auto: false,
					noMoreSize: 4,
					empty:{
						tip: '~ 空空如也 ~', // 提示
						btnText: ''
					},
					textNoMore: '没有更多了'
				},

				numberVal: 1,
				showCart: false,
				showSpec: false,
				count: 0,
				goodsName: '',
				goodsSpec: [],
			};
		},
        onLoad(options) {
			this.onNormal = trottle(this.onNormal, 500, this);
			this.onPriceSort = trottle(this.onPriceSort, 500, this);
			this.onSaleSort = trottle(this.onSaleSort, 500, this);
			this.onSearch = trottle(this.onSearch, 500, this);
			this.init(options);
		},
		methods: {
            init(option) {
				let {
					id,
					name,
					type
				} = option;
				this.type = type;
				if (id) {
					uni.setNavigationBarTitle({
						title: name
					});
					this.id = id;
					this.getGoodsSearchFun();
				} else {
					uni.setNavigationBarTitle({
						title: '搜索'
					});
					this.showHistory = true
				}
			},

            upCallback(page) {
				let pageNum = page.num;
				let pageSize = page.size;
				let {goodsList, keyword} = this
				const params = {
					page_size: pageSize,
					page_no: pageNum,
					keyword,
				}
				getGoodsSearch(params).then(({
					data
				}) => {
					if (page.num == 1) this.goodsList = [];
					let curPageData = data.list
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					this.goodsList = this.goodsList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				}).catch(() => {
					this.mescroll.endErr()
				})
			},
            
            // 清空搜索
			clearSearchFun() {
				clearSearch().then(res => {
					if (res.code == 1) {
						this.getSearchpageFun();
					}
				});
			},

			// 获取历史搜索
			getSearchpageFun() {
				getSearchpage().then(res => {
					if (res.code == 1) {
						let {
							history_lists,
							hot_lists
						} = res.data;
						this.hotList = hot_lists
						this.historyList = history_lists
					}
				});
			},

			onClear() {
				if (this.id) {
					this.onSearch();
				}
			},

			onSearch() {
				this.onRefresh()
			},

			onRefresh() {
				this.goodsList = []
				this.showHistory = false
				this.mescroll.resetUpScroll();
			},

			onChangeKeyword(item) {
				this.keyword = item
				this.showHistory = false
				this.onRefresh();
			},
			
			// 打开弹框
			openSpec(item) {
				console.log("123>>>", 123);
				
				this.showSpec = true
				this.goodsName = item.name
				this.goodsSpec = item.goods_spec
			},
			
			// 确认选择的商品规格
			confirmSpec() {

			},

			// 选择商品
			async addCartFun(item) {
				const {
					code,
					data,
					msg
				} = await addCart({
					item_id: item.id,
					goods_num: 1
				});
				if (code == 1) {
					this.getCartListFun()
				}
			}
		},
		watch: {
			keyword(value, old) {
				if (!value && !this.id) {
					this.showHistory = true
				}
			},
			showHistory(value) {
				if (value) {
					this.getSearchpageFun();
				}
			}
		},
		computed: {
			comprehensive() {
				const {
					priceSort,
					saleSort
				} = this
				if (priceSort == '' && saleSort == '') {
					return true;
				}

				return false;
			},
			buyNumber() {
				if (this.count > 0) {
					return this.count > 99 ? '99+' : this.count
				}

				return ''
			}
		}
	};
</script>
<style lang="scss">
	.goods-search {
		.header-wrap {
			.search {
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03);
				position: relative;
				z-index: 1;
			}

			.header {
				height: 80rpx;

				.tag {
					height: 100%;
					flex: 1;
				}
			}
		}


		.content {
			.search-words {
				padding-left: 24rpx;
				padding-bottom: 20rpx;

				.title {
					padding: 26rpx 0;
				}

				.words {
					.item {
						line-height: 52rpx;
						height: 52rpx;
						padding: 0 24rpx;
						background-color: #F5F5F5;
					}
				}
			}

			.goods-list {
				overflow: hidden;
			}
		}

		.buy {
			position: fixed;
			left: 0;
			right: 0;
			bottom: env(safe-area-inset-bottom);
			height: 100rpx;
			background-color: #212526;
		}
	}
</style>
