<template>
	<view class="content">
		<view class="search">
			<input type="text" v-model="search_value" placeholder="输入关键字匹配食谱" />
			<icon v-if="search_value" class="iconfont icon-error" @click="handlecolse"></icon>
			<image src="/static/28.png" @click="handleSearchHistory(search_value)"></image>
		</view>

		<view class="content-box">
			<!-- 历史搜索 -->
			<view v-if="history_food.length" class="search-history">
				<view class="title">
					<view class="quan mr-5"></view>历史搜索
				</view>
				<view class="button-container" @click="showAll =! showAll" v-if="history_food.length>8">
					<image :src="showAll?'/static/arrow-up.png':'/static/arrow-down.png'"></image>
				</view>
				<view class="history-list">
					<view class="history-list-item"
						v-for="(item,index) in showAll?history_food:history_food.slice(0, 8)"
						@click="handleSearchHistory(item.keyword)">
						{{item.keyword}}
					</view>
				</view>
			</view>
			<!-- 猜你想搜 -->
			<view class="popular-container">
				<view class="title">
					<view class="quan mr-5"></view>猜你想搜
				</view>
				<view class="popular-food-item" v-for="(ite,index) in popular_food" :key="index">
					<view class="food-title">{{ite.title}}</view>
					<view class="popular-food-inner">
						<text class="popular-food-subitem" v-for="(sub_item,sub_index) in ite.list"
							@click="handleSearchHistory(sub_item.name)" :key="sub_index">{{sub_item.name}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 语音 -->
		<view class="footBtn">
			<view class="mic-icon" @touchstart="onVoiceTouchStart" @touchend="onVoiceTouchEnd"
				@touchcancel="cancelRecording">
				<uni-icons type="mic-filled" size="20" color="#fff"></uni-icons>
				语音搜索
			</view>
		</view>
		<!-- 语音弹框 -->
		<view class="wrapper" v-if="showAutoSearchDlg">
			<view class="auto-search-dialog">
				<view class="auto-search-inner">
					<view class="voice-wave">
						<view class="wave-bar"></view>
						<view class="wave-bar"></view>
						<view class="wave-bar"></view>
						<view class="wave-bar"></view>
						<view class="wave-bar"></view>
						<view class="wave-bar"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	const plugin = requirePlugin("WechatSI")
	export default {
		data() {
			return {
				index: 0,
				Page: 1,
				showAll: false,
				search_value: '',
				showAutoSearchDlg: false,
				voiceManager: null,
			};
		},
		computed: {
			...mapState(["configInfo"]),
			popular_food() {
				return this.configInfo.search_guess.cookbook
			},
			history_food() {
				return this.configInfo.search_history.cookbook
			}
		},
		onLoad() {

		},
		mounted() {
			let that = this
			that.voiceManager = plugin.getRecordRecognitionManager()
			that.voiceManager.onStop = function(res) {
				that.handleSearchHistory(res.result.replace('。', ''))
			}
			that.voiceManager.onError = function(res) {
				console.error("error msg", res.retcode)
			}
			that.voiceManager.stop()
		},
		methods: {
			// 切换显示全部/部分
			toggleShowAll() {
				this.showAll = !this.showAll
			},
			onVoiceTouchStart() {
				let that = this
				that.showAutoSearchDlg = true
				that.voiceManager.start({
					duration: 60000,
					lang: "zh_CN"
				})
			},
			onVoiceTouchEnd() {
				let that = this
				that.showAutoSearchDlg = false
				that.voiceManager.stop()
			},
			// 取消录音
			cancelRecording() {
				// #ifdef MP-WEIXIN
				if (this.voiceManager) {
					this.voiceManager.stop()
					this.showAutoSearchDlg = false
				}
				// #endif
			},
			handlecolse() {
				console.log("取消搜索")
				this.search_value = ""
				this.search_list = []
			},
			// 历史搜索
			handleSearchHistory(text) {
				let that = this
				if (text == "") {
					that.$tools.msg("输入关键字后搜索")
					return
				}
				uni.navigateTo({
					url: "/pages/search/list?name=" + text
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		box-sizing: border-box;
		background: #fff;
		-webkit-overflow-scrolling: touch;

		.search {
			width: 100%;
			position: relative;
			padding-bottom: 35px;
			padding-top: 20rpx;
			background-color: $maincolor;


			input {
				width: calc(100% - 80rpx);
				background: #fff;
				height: 39px;
				line-height: 38px;
				border-radius: 20rpx;
				padding: 0 20rpx;
				margin: 0 20rpx;
			}

			.input:hover {
				box-shadow: 0 1rpx 20rpx #ccc;
			}

			image {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				right: 40rpx;
				top: 18px;
				z-index: 99;
			}
		}

		.content-box {
			background: #fff;
			border-radius: 20rpx 20rpx 0 0;
			position: relative;
			z-index: 99;
			width: 100%;
			padding-top: -13px;
			margin: -40rpx 0 70px;
		}

		.search-history {
			width: 100%;
			height: auto;
			overflow: hidden;

			uni-icons {
				color: #333333;
				font-size: 60rpx;
				position: absolute;
				top: 13px;
				right: 30rpx;
			}
		}

		.history-list {
			width: calc(100% - 40rpx);
			margin: 20rpx 20rpx 0;
			height: auto;
			display: flex;
			flex-wrap: wrap;

			.history-list-item {
				border: 1px solid #dfdfdf;
				padding: 3px 24rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				margin-right: 20rpx;
			}
		}

		.title {
			width: 90%;
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
			margin-top: 30rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
		}

		.popular-container {
			width: 100%;

			.popular-food-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				background: linear-gradient(#EDFFF4, #ffffff 80%);

				.food-title {
					font-size: 34rpx;
					font-weight: 700;
				}

				.popular-food-inner {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					width: 100%;
					margin-top: 20rpx;

					.popular-food-subitem {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						padding: 10rpx 20rpx;
						background-color: #fff;
						margin-right: 20rpx;
						border-radius: 20rpx;
						border: 1px solid #f7f7f7;
					}
				}
			}
		}

		.search_list {
			display: flex;
			padding: 20rpx;
			flex-wrap: wrap;
			margin-bottom: 90px;
			margin-top: 30rpx;
			justify-content: space-between;

			.search_list_item {
				width: 30%;
				margin-top: 30rpx;
				text-align: center;

				image {
					width: 220rpx;
					height: 220rpx;
				}
			}
		}

		.auto-search-dialog {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			bottom: 60px;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 999;

			.auto-search-inner {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				position: relative;
				width: 50%;
				padding: 60rpx 0;
				background-color: #fff;
				border-radius: 20rpx;
				box-shadow: 0 0 20rpx #ccc;
			}
		}


		.footBtn {
			position: fixed;
			width: 100%;
			bottom: 0;
			padding-top: 30rpx;
			background: #fff;
			display: flex;
			z-index: 99;
			justify-content: space-around;

			view {
				color: #fff;
				width: 80%;
				padding: 8px 40rpx;
				background: $maincolor;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx;
			}
		}
	}

	.button-container {
		position: absolute;
		top: 20rpx;
		right: 30rpx;
		font-size: 40rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.icon-error {
		color: #888484;
		position: absolute;
		right: 120rpx;
		top: 18px;
		z-index: 999;
		font-size: 24px;
	}
</style>