<template>
	<view class="searchpage">
		<view class="ctrl-box">
			<u-search action-text="搜索" :focus="true" :clearabled="true" :show-action="true" radius="40" v-model="searchKey"
			 @search="searchHandler" @custom="searchHandler" @change="changeHandler"></u-search>
		</view>
		<view class="historys" v-if="searchKey == '' || !loadSearch">
			<view class="title-box">
				<view class="title">搜索历史</view>
				<view class="editor" v-if="searchHistory.length > 0">
					<u-icon size="36" name="delete" color="#999" v-if="!isEditor" @click="changeEditorHandler"></u-icon>
					<view v-else>
						<text @click="clearHandler" style="font-size: 12px;color: gray;padding-right: 15px;border-right: 1px solid #eee;">全部删除</text>
						<text style="font-size: 12px; padding-left: 15px;" :style="{ color: mainColor }" @click="changeEditorHandler">完成</text>
					</view>
				</view>
			</view>
			<view class="details" v-if="searchHistory.length > 0">
				<template v-for="(x, i) in searchHistory">
					<view class="item" v-if="i < 6 || showAllHistory" :key="i">
						<u-tag bg-color="#f1f1f1" size="big" :text="x" color="#111" shape="circle" mode="dark" :closeable="isEditor"
						 close-color="#333" :index="i" @close="delHistoryItemHandler" @click="tagClickHandler(x)"></u-tag>
					</view>
				</template>
				<view class="arrow" @click="changeShowHandler" v-if="searchHistory.length > 6 && !isEditor">
					<u-icon :name="showAllHistory ? 'arrow-up' : 'arrow-down'" size="24" color="#000"></u-icon>
				</view>
			</view>
			<u-empty text="没有搜索历史记录" v-else mode="news" font-size="24" img-width="120"></u-empty>
		</view>
		<view v-else class="search-content">
			<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" style="height: 100%;"
			 v-if="g.length > 0">
				<view :style="{'padding': IsEducation!=1?'12px':0,}">
					<goodlist :list="g" v-if="IsEducation!=1"></goodlist>
					<glist :list="g" v-if="IsEducation==1"></glist>
					<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
					 :margin-bottom="20" bg-color="#f8f8f8" />
				</view>
			</scroll-view>
			<view v-if="!loading && g.length == 0" style="height: calc(100vh - 42px); overflow-y: auto;">
				<u-empty text="抱歉，没有找到商品额~" mode="search" font-size="24" img-width="120" margin-top="24" padding-top="0"></u-empty>
				<view :style="{'padding': IsEducation!=1?'12px':0,}">
					<view class="recommed" :style="{'padding-left': IsEducation==1?'12px':0,}">
						<view class="title">为你推荐</view>
					</view>
					<goodlist :list="recommedGoods" v-if="IsEducation!=1"></goodlist>
					<glist :list="recommedGoods" v-if="IsEducation==1"></glist>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import goodlist from "@/components/goods/list";
	import glist from "@/components/school/list";
	export default {
		components: {
			goodlist,
			glist
		},
		data() {
			return {
				pageTitle: "",
				searchHistory: [],
				isEditor: false,
				mainColor: "",
				showAllHistory: false,
				searchKey: "",
				loadSearch: false,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				showLoading: false,
				g: [],
				page: 1,
				page_count: 1,
				status: "loadmore",
				isover: false,
				loading: false,
				recommedGoods: [],
				IsEducation: 0, //为1的时候是校园风格
			};
		},
		onLoad(option) {
			this.initPage();
			this.initRecommend();
			if (uni.getStorageSync("search_his")) {
				this.searchHistory = uni.getStorageSync("search_his");
			}
			this.mainColor = this.$uiConfig.mainColor;
			this.IsEducation = uni.getStorageSync('basedata') ?
				(uni.getStorageSync('basedata').mall.setting.mallStyle.IsEducation ? uni.getStorageSync('basedata').mall.setting.mallStyle
					.IsEducation : 0) :
				0;
		},
		methods: {
			//为你推荐
			initRecommend() {
				var UserPageType = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
				this.request2({
						url: "/api/AppletGoods/GetAppletGoodsRecommendListForZY",
						data: {
							RecommendType: 1,
							GoodsPageType: UserPageType
						},
					},
					(res) => {
						this.recommedGoods = res.data.List;
					}
				);
			},
			initPage() {
				let currentPages = getCurrentPages();
				let u = "/" + currentPages[currentPages.length - 1].route;
				let pages = uni.getStorageSync("basedata") ?
					uni.getStorageSync("basedata").bar_title : [];

				pages.forEach((x) => {
					if (x.value == u) {
						this.pageTitle = x.new_name ? x.new_name : x.name;
					}
				});
				uni.setNavigationBarTitle({
					title: this.pageTitle,
				});
			},
			changeShowHandler() {
				this.showAllHistory = !this.showAllHistory;
			},
			clearHandler() {
				this.searchHistory = [];
				uni.removeStorageSync("search_his");
			},
			changeEditorHandler() {
				this.isEditor = !this.isEditor;
				this.showAllHistory = true;
			},
			delHistoryItemHandler(i) {
				this.searchHistory.splice(i, 1);
				uni.setStorageSync("search_his", this.searchHistory);
			},
			changeHandler(val) {
				if (val == "") {
					this.loadSearch = false;
				}
			},
			tagClickHandler(val) {
				if (!this.isEditor) {
					this.searchHandler(val);
				}
			},
			searchHandler(val) {
				if (val != "") {
					let index = -1;
					this.searchHistory.forEach((x, i) => {
						if (x == val) {
							index = i;
						}
					});
					if (index != -1) {
						this.searchHistory.splice(index, 1);
					}
					this.searchHistory.unshift(val);
					uni.setStorageSync("search_his", this.searchHistory);
					this.page = 1;
					this.g = [];
					this.searchKey = val;
					this.loadSearch = true;
					this.init();
				} else {
					this.searchKey = "";
					this.loadSearch = false;
				}
			},
			init() {
				this.isover = false;
				this.loading = true;
				this.showLoading = this.page != 1;
				var UserPageType = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
				let url
				let StoreId = uni.getStorageSync("storeId")?uni.getStorageSync("storeId").storeId:0;
				let IsOpenReserve = uni.getStorageSync("GetAppConfig")?uni.getStorageSync("GetAppConfig").IsOpenReserve:0
				if(IsOpenReserve==0){//如果没开启 门店id赋值为0 
					StoreId=0
				}
				
				if (this.IsEducation == 1) {
					url = '/api/AppletSchool/GetAppletCoursePageList';
				} else {
					url = "/api/AppletGoods/GetAppletGoodsPageListForZY";
				}
				this.request2({
						url: url,
						data: {
							pageIndex: this.page,
							pageSize: 20,
							Name: this.searchKey,
							GoodsType: 0,
							CategoryIds: '',
							OrderBy: 1,
							GoodsPageType: UserPageType,
							StoreId:StoreId
						},
					},
					(res) => {
						console.log(res, '搜索ress');
						this.showLoading = true;
						if (res.data.pageData.length > 0) {
							console.log(res.data.pageData)
							res.data.pageData.forEach(x => {
								x.marketingLogo = JSON.parse(x.marketingLogo)
								x.totalStock = 0;
								if (x.attr && x.attr.length > 0) {
									x.attr.forEach(j => {
										x.totalStock += j.stock
									})
								}

							})
						}
						this.g = this.g.concat(res.data.pageData);
						this.page_count = res.data.pageCount;
						if (this.page_count == 1) {
							this.isover = true;
							this.status = "nomore";
						} else {
							this.status = "loadmore";
						}
						this.loading = false;
					}
				);
			},
			lower(e) {
				if (this.page < this.page_count) {
					if (!this.loading) {
						this.status = "loading";
						this.page++;
						this.init();
					}
				} else {
					this.isover = true;
					this.status = "nomore";
				}
			},
		},
	};
</script>

<style>
	.searchpage {
		min-height: 100vh;
	}

	.searchpage .ctrl-box {
		padding: 5px 10px;
	}

	.searchpage .historys {
		padding: 20px;
	}

	.searchpage .historys .title-box {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.searchpage .historys .title-box .title,
	.searchpage .recommed .title {
		font-size: 16px;
		color: #000;
		flex: 1;
		font-size: 600;
	}

	.searchpage .historys .details {
		display: flex;
		flex-wrap: wrap;
	}

	.searchpage .historys .details .item {
		margin-right: 10px;
		margin-top: 10px;
	}

	.searchpage .historys .details .arrow {
		margin-right: 10px;
		margin-top: 10px;
		height: 37px;
		display: flex;
		width: 20px;
		align-items: center;
	}

	.searchpage .search-content {
		height: calc(100vh - 42px);
		background: #f8f8f8;
	}

	.searchpage .recommed {
		margin-top: 20px;
	}

	.searchpage .recommed .title {
		margin-bottom: 10px;
	}
</style>