<template>
	<view>
		<view :style="'height:'+top_height+'px;background: #71caf4;'"></view>
		<view class="search_box">
			<view class="search">
				<!-- <image :src="img+'tip_search.png'" class="search_icon" mode=""></image> -->
				<input type="text" placeholder="搜索" placeholder-style="color:#C8C9CC;" :value="searchInput"
					class="search_input" @input="bindInput" />
			</view>
			<view class="search_btn" @click="searchQuestion">
				取消
			</view>
		</view>
		<view class="" v-if="noData">
			<view class="box">
				<view class="box_title">
					<view class="box_title_left">
						历史搜索 <image src="../../static/ic_16@2x.png" mode="" @click="clear"></image>
					</view>
				</view>
				<view class="box_list">
					<view class="item" v-for="(item,index) in recommenList" :key="index" @click="select(item)">
						{{item.title}}
					</view>
				</view>
			</view>

			<view class="box" style="margin-top: 0;">
				<view class="box_title">
					<view class="box_title_left">
						热门搜索
					</view>
					<!-- <image :src="img+'cg_del.fw.png'" mode="" @click="delAll"></image> -->
				</view>
				<view class="box_list">
					<view class="item" v-for="(item,index) in recordList" :key="index" @click="select(item)">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<!-- 搜索结果 -->
		<view class="resultBox" v-else>
			<view class="item" v-for="(item,index) in getQuestion" :key="index">
				<view class="">
					<block v-for="(item2,index) in item"  @click="searchDetail(item2)">
						<text class="questionText" v-if="item2.key==true" style="color: red;">{{item2.str}}</text>
						<text class="questionText" v-else>{{item2.str}}</text>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	var that;
	var app = getApp()
	export default {
		data() {
			return {
				img: '',
				top_height: '',
				searchInput: '',
				noData: true, //搜索结果
				recordList: ['减肥', '哈哈哈哈2', '哈哈哈哈', '哈', 'aaacl', '哈哈哈哈', '哈哈哈哈', '哈哈哈哈', '哈哈哈哈', '哈哈哈哈', '哈哈哈哈',
					'哈哈哈哈'
				], //搜索历史
				recommenList: ['哈哈哈哈', '哈哈哈哈2', '哈哈哈哈', '哈', 'aaacl', '哈哈哈哈', '哈哈哈哈', '哈哈哈哈', '哈哈哈哈', '哈哈哈哈', '哈哈哈哈',
					'哈哈哈哈'
				], //大家都在搜
				getQuestion: [{
						str: "减肥啊哈哈能否喝酒",
						number: 1,
						key: false
					},
					{
						str: "固定食谱能减肥吗哈哈",
						number: 2,
						key: false
					},
					{
						str: "吃苹果能不能减肥还是减肥呢哈哈",
						number: 2,
						key: false
					}
				],
			}
		},
		onLoad() {
			let that = this;
			that.img = app.globalData.img
			that.top_height = app.globalData.height
			that.getHistoryList()
			that.seacrchTitle()
			that.seacrchTitle()
		},
		methods: {
			bindInput(e) {
				this.searchInput = e.detail.value
				if (this.searchInput !== '') {
					this.noData = false
					this.searchQuestion()
				} else {
					this.noData = true
				}
			},
			//搜索历史
			getHistoryList() {
				request.get('/api/search/search_history', {}).then(res => {
					this.recommenList = res.data.search
					this.recordList = res.data.hot
				}).catch(err => {

				})
			},
			//搜索标题列表
			seacrchTitle() {
				request.get('/api/goods/search?keywords=' + this.searchInput, {}).then(res => {
					let list = res.data
					let ary = []
					list.forEach((item, index) => {
						let obj = {}
						obj.str = item.title,
							obj.number = 2,
							obj.key = false
						ary.push(obj)
					})
					this.getQuestion=ary
				}).catch(err => {

				})
			},
			//清空历史
			clear() {
				uni.showModal({
					title: '提示',
					content: '确定清空所有记录吗？',
					success: function(res) {
						if (res.confirm) {
							request.get('/api/search/eliminate', {}).then(res => {
								this.recordList = []
							}).catch(err => {})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//搜索详情
			searchDetail(keyword) {
				console.log(keyword,'关键之')
				uni.navigateTo({
					url: '/pages/index/search-result?keyword='+keyword
				})
			},
			//判断关键字
			searchQuestion() {
				var that = this
				let hilight_word = function(key, word, number) {
					let idx = word.indexOf(key);
					let t = [];
					if (idx > -1) {
						if (idx == 0) {
							t = hilight_word(key, word.substr(key.length));
							t.unshift({
								key: true,
								str: key,
								number: number
							});
							return t;
						}
						if (idx > 0) {
							t = hilight_word(key, word.substr(idx));
							t.unshift({
								key: false,
								str: word.substring(0, idx),
								number: number
							});
							return t;
						}
					}
					return [{
						key: false,
						str: word,
						number: number
					}];
				};
				let searched = [];
				let inputs = this.searchInput;
				for (let i = 0; i < that.getQuestion.length; i++) {
					var current_word = that.getQuestion[i].str;
					var number = that.getQuestion[i].number;
					if (current_word.indexOf(inputs) > -1) {
						searched.push(hilight_word(inputs, current_word, number))
					}
				}
				this.getQuestion = searched;
			},
			//选择记录
			select(item) {
				this.searchInput = item
				this.searchQuestion()
			},
			//删除记录
			delAll() {
				uni.showModal({
					title: '提示',
					content: '确认删除全部历史记录',
					success: function(res) {
						if (res.confirm) {
							this.recordList = []
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//取消
			cancel() {
				uni.navigateBack({
					delta: 1
				})
			},
			//获取大家都在搜
			getList() {
				app.post('auth/login', data).then(res => {

					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>
<style lang="less">
	.search_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 88rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;

		.search {
			display: flex;
			align-items: center;
			width: 600rpx;
			height: 72rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background: #f7f8fa;
			border-radius: 30rpx;

			.search_icon {
				width: 22rpx;
				height: 23rpx;
			}

			.search_input {
				flex: 1;
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #323233;
			}
		}

		.search_btn {
			font-size: 32rpx;
			color: #323233;
		}
	}

	.box {
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 80rpx;

		.box_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 0;
			box-sizing: border-box;
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
			}

		}

		.box_list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.item {
				padding: 10rpx 32rpx;
				box-sizing: border-box;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 58rpx;
				font-size: 26rpx;
				text-align: center;
				color: #969799;
				width: auto;
				background: #f2f3f5;
			}
		}
	}

	.resultBox {
		width: 100%;
		padding: 110rpx 24rpx 0rpx;
		box-sizing: border-box;

		.item {
			display: flex;
			justify-content: space-between;
			width: 100%;
			border-bottom: 1rpx solid #ebedf0;
			font-size: 28rpx;
			padding: 26rpx 0;
			align-items: center;
		}
	}

	.box_title_left {
		font-size: 32rpx;
		font-weight: 600;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>