<template>
	<view>
		<tabbar :index="0"></tabbar>
		<view class="info">
			{{voiceText}}
		</view>
		<view class="footer">			
			<all-speech @startRecord="start" @endRecord="end" @cancelRecord="cancel"></all-speech>
		</view>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();

	const plugin = requirePlugin("WechatSI")
	const manager = plugin.getRecordRecognitionManager()

	import {
		getAIReply
	} from '@/config/api.js';

	export default {
		data() {
			return {
				voicePath: '',
				voiceText: ''

			}
		},
		onLoad() {
			manager.onStop = (res) => {
				this.voicePath = res.tempFilePath;
				this.voiceText = res.result;
				if (this.voiceText == '') {
					this.voiceText = '周围太安静啦~再试试~';
				}
				console.log("===============")
				console.log(this.voiceText)
				console.log("===============")
				getAIReply({
					prompt: this.voiceText,
					session_id: '1'
				}).then((res) => {
					console.log(res.data.url)
					innerAudioContext.src = res.data.url;
					innerAudioContext.play();
				}).catch((err) => {
					console.log(err)
				})
				console.log("2133123")
			};
			// 识别错误事件  
			manager.onError = (err) => {
				uni.showToast({
					title: '错误(' + err.retcode + ')：' + err.msg,
					icon: 'none',
					duration: 2000, //持续时间为 2秒
				})
			};
		},
		methods: {
			test() {


				getAIReply({
					prompt: "长春是哪个省的省会？"
				}).then((res) => {
					console.log(res)
				}).catch((err) => {
					console.log(err)
				})
			},
			start() {
				console.log('start--------------');
				manager.start({
					duration: 60000,
					lang: "zh_CN"
				})
			},
			end() {
				console.log('end--------------');
				manager.stop();
			},
			cancel() {
				console.log('cancel--------------');
			}
		}
	}
</script>

<style lang="scss">
	.app {
		height: 100vh;
		width: 100vw;
	}

	image {
		width: 450rpx;
		height: 800rpx;
	}

	.info {
		margin-top: 3vh;
		padding-left: 10px;
		font-size: 32rpx;
	}

	.footer {
		position: fixed;
		bottom: 13vh;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex {
		display: flex;
		width: 100%;
		/* background-color: red; */
	}

	/* 	image{
			width: 20vw;
			height: 70vh;
			margin-right: 3vw;
		} */
</style>