<template>
	<view class="content">
		<view class="search">
			<input type="text" v-model="search_value" placeholder="输入关键字匹配食谱" />
			<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"></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"></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="auto-search-dialog" v-if="showAutoSearchDlg">
			<view class="auto-search-inner">
				<text>{{autoSearchContent != '' ? `识别到你描述的菜谱为“${autoSearchContent}”,是否查找菜谱“${autoSearchContent}”` : "长安麦克风图标开始说话，松开后结束"}}</text>
				<view class="mic-icon" :style="{'border-color':mic_touch ? '#18bc37' : '#777777'}"
					@touchstart="onVoiceTouchStart" @touchend="onVoiceTouchEnd" v-if="autoSearchContent == ''">
					<uni-icons type="mic-filled" size="80" :color="mic_touch ? '#18bc37' : '#777777'"></uni-icons>
				</view>
				<view class="btn-wrap" v-else>
					<view class="retry" @click="retrySearch">重试</view>
					<view class="confirm" @click="handleSearchHistory(autoSearchContent)">确定</view>
				</view>
				<uni-icons class="close" type="close" color="#ffffff" size="45"
					@click="showAutoSearchDlg=false"></uni-icons>
			</view>
		</view>
		<!-- 语音 -->
		<view class="footBtn">
			<view @click="showAutoSearchDlg = true">
				<uni-icons type="mic-filled" size="22" color="#fff"></uni-icons> 语音搜索
			</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: '',
				mic_touch: false,
				voiceManager: null,
				autoSearchContent: "",
				showAutoSearchDlg: false
			};
		},
		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.autoSearchContent = res.result.replace('。', '')
			}
			that.voiceManager.onError = function(res) {
				console.error("error msg", res.retcode)
			}
			that.voiceManager.stop()
		},
		methods: {
			// 切换显示全部/部分
			toggleShowAll() {
				this.showAll = !this.showAll
			},
			// 重试
			retrySearch() {
				let that = this
				that.autoSearchContent = ''
			},
			onVoiceTouchStart() {
				let that = this
				that.mic_touch = true
				that.voiceManager.start({
					duration: 60000,
					lang: "zh_CN"
				})
			},
			onVoiceTouchEnd() {
				let that = this
				that.mic_touch = false
				that.voiceManager.stop()
			},
			// 历史搜索
			handleSearchHistory(text) {
				let that = this
				that.showAutoSearchDlg = false
				that.autoSearchContent = ''
				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: 10px;
			background-color: $maincolor;


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

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

			image {
				width: 25px;
				height: 25px;
				position: absolute;
				right: 20px;
				top: 18px;
				z-index: 99;
			}
		}

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

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

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

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

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

		.title {
			width: 90%;
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
			margin-top: 15px;
			margin-left: 15px;
			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: 10px;
			flex-wrap: wrap;
			margin-bottom: 90px;
			margin-top: 15px;
			justify-content: space-between;

			.search_list_item {
				width: 30%;
				margin-top: 15px;
				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%;
			height: 100%;
			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: 70%;
				height: 350rpx;
				padding: 80rpx 0;
				background-color: #fff;
				border-radius: 20rpx;
				box-shadow: 0 0 20rpx #ccc;

				.close {
					position: absolute;
					left: 0;
					right: 0;
					bottom: -140rpx;
					width: 90rpx;
					margin: 0 auto;
				}
			}

			text {
				font-size: 32rpx;
				width: 80%;
			}

			.mic-icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				border: 8rpx solid #777777;
			}

			.btn-wrap {
				display: flex;
				justify-content: space-around;
				width: 90%;

				.retry,
				.confirm {
					width: 190rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 28rpx;
					border: 2rpx solid #777;
					border-radius: 15rpx;
				}
			}
		}


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

			view {
				color: #fff;
				width: auto;
				padding: 5px 20px;
				background: $maincolor;
				margin-bottom: 15px;
				display: flex;
				align-items: center;
				border-radius: 10px;
			}
		}
	}

	.button-container {
		position: absolute;
		top: 10px;
		right: 15px;
		font-size: 20px;

		image {
			width: 25px;
			height: 25px;
		}
	}
</style>