<template>
	<view class="talk-btns" ref="talkBtnRef">
		<view 
			class="touch-btn" 
			@touchstart="getRecordPermission"
			@touchend="hideOverlayTalking"
			@touchmove="handleMove"
			v-if="!keyboardIsShow"
		>按住说话
		</view>
		<view class="touch-btn" v-if="keyboardIsShow">
			<uv-input class="input-box" ref="inputRef" v-model.trim="answerValue" maxlength="500"
				placeholderStyle='color:#999999;font-size:26rpx' placeholder="请输入答案">
			</uv-input>
		</view>
		<view class="talk-btn-box"  @click.stop="showKeyboard" v-show="!onlyVoice">
			<image class="talk-btn-icon" v-show="!keyboardIsShow" src="/src/static/images/course/jianpan.png" mode=""></image>
			<image class="talk-btn-icon" v-show="keyboardIsShow" src="/src/static/images/course/send.png" mode=""></image>
		</view>
		<uv-overlay :show="showTalkingModel" opacity=".9" @click="showTalkingModel = false">
			<view class="overlay-box">
				<view class="circle-bg-box">
					<view class="icon-box">
						<image src="/src/static/images/course/talk-icon.png" mode=""></image>
					</view>
				</view>
				<view class="tips-box">松开发送</view>
				<view class="btns-box">
					<view :class="['close-btn',isOut?'is-out':'']" >取消
						<image class="btn-box" v-if="!isOut" src="/src/static/images/course/close.png" mode=""></image>
						<image class="btn-box" v-else src="/src/static/images/course/close-active.png" mode=""></image>
					</view>
				</view>
			</view>
		</uv-overlay>
	</view>
		
</template>

<script setup>
import { toRefs, ref, computed, unref, onMounted, onUnmounted, nextTick, watch, getCurrentInstance } from 'vue';
import common from '../../../common/common';
import permission from '@/common/permission.js'
import { getPhoneEnvBool } from '@/common/common.js'
const proxy = getCurrentInstance()
const emit = defineEmits(['uploadVoice', 'submitAnswer','startRecord'])
const props = defineProps({
	isDisabled:{
		default: true,
		type: Boolean
	},
	isLoading:{
		default: false,
		type: Boolean
	},
	loadingText:{
		default: '发送回答中，请稍后再试！',
		type: String
	},
	onlyVoice:{
		default:	false,
		type: Boolean
	},
})
const { isDisabled, onlyVoice } = toRefs(props)
const isLoadingState = computed(() => props.isLoading)
watch(()=>props.isLoading,()=>{},{
	deep:true,immediate:true
})
watch(()=>props.onlyVoice,()=>{},{
	deep:true,immediate:true
})
const showTalkingModel = ref(false)
const keyboardIsShow = ref(false)
const answerValue = ref('')
const talkBtnRef = ref()
// 录音
const audioPath = ref('')
const audioObj =  uni.createInnerAudioContext()
//#ifdef APP-PLUS
// app端
const recordObjCom = ref({})
const IsAndEnv = getPhoneEnvBool('AND')
const initRecord = () => {
	recordObjCom.value = uni.getRecorderManager()
	// startRecord()
	// stopRecord()
	unref(recordObjCom)?.onStop((res, duration)=>{
		audioPath.value = res.tempFilePath
		showTalkingModel.value = false
		if(!isOut.value){
			emit('uploadVoice', audioPath.value)
		}
	})
	unref(recordObjCom).onStart(() => {
		console.log('开始录音了');
		let _recordPerm = uni.getAppAuthorizeSetting()
		let _state = _recordPerm.microphoneAuthorized
		if(_state === 'authorized'){
			showTalkingModel.value = true
		}
	})
}
const startRecord = () => {
	unref(recordObjCom).start({format:'mp3'})
}

const stopRecord = () => {
	if(unref(recordObjCom).stop){
		unref(recordObjCom)?.stop?.()
	}
}
// #endif
//#ifndef APP-PLUS
const recordObjCom = ref({})
const initRecord = () => {}
// #endif
onMounted(async ()=>{
	initRecord?.()
	//#ifdef APP-PLUS
		// 安卓端
		if(IsAndEnv){
			let _recordPerm = await permission.requestAndroidPermission('android.permission.RECORD_AUDIO')
			if(_recordPerm !== 1){
				common.show('提示信息', '当前页面需要使用的录音权限，是否前往开启？',true, '取消','确定').then((res) => {
					if(res) {
						// 去开启权限
						permission.gotoAppPermissionSetting()
					}else{
						// 取消
						common.navigateBack()
					}
				})
			}
		}else{
			let _recordPerm = uni.getAppAuthorizeSetting()
			let _state = _recordPerm.microphoneAuthorized
			if(_state === 'denied'){
				common.show('提示信息', '当前页面需要使用的录音权限，是否前往开启？',true, '取消','确定').then((res) => {
					if(res) {
						// 去开启权限
						permission.gotoAppPermissionSetting()
						uni.openAppAuthorizeSetting({
							
						})
					}else{
						// 取消
						common.navigateBack()
					}
				})
			}else if(_state === 'not determined'){
				// startRecord()
			}
		}
	// #endif
})
// 录音结束

// 记录 按下移动位置
const touchX = ref(0)
const touchY = ref(0)
const baseY = ref(0)
const windowInfo  =  uni.getWindowInfo()
// 计算是否超出按下盒子位置
const isOut = computed(() => {
	let _btnHeight = windowInfo.screenWidth/750 * 234
	let moveVal = (windowInfo.screenHeight - touchY.value) > _btnHeight
	return moveVal
})
const outScreen = computed(()=>{
	(windowInfo.screenHeight - touchY.value) <= 0
})
const recNum = ref(1)
const activeNum = ref(1)

const getRecordPermission = async (obj) => {
	
	//#ifdef APP-PLUS
		// 安卓端
		// let _recordPerm = await permission.requestAndroidPermission('android.permission.RECORD_AUDIO')
		// if(_recordPerm !== 1){
		// 	permission.gotoAppPermissionSetting()
		// 	return
		// }
		showOverlayTalking(obj)
	// #endif
	//#ifndef APP-PLUS
		// pc端
		showOverlayTalking(obj)
	// #endif
}
const showOverlayTalking = (obj) => {
	if(isLoadingState.value){
		uni.showToast({
			title: props.loadingText,
			icon: "none",
			duration:1000
		})
		return
	}
	emit('startRecord')
	recNum.value += 1
	if(!isDisabled.value){
		touchX.value = obj.changedTouches[0].pageX
		touchY.value = obj.changedTouches[0].pageY
		baseY.value = obj.currentTarget.offsetTop
		//#ifdef APP-PLUS
		startRecord()
		// #endif
		setTimeout(() => {
			hideOverlayTalking()
		},59 * 1010)
	}else{
		showTalkingModel.value = false
		uni.showToast({
			title: '暂无问题需要回答！',
			icon: "none",
			duration:1000
		})
	}
}
const hideOverlayTalking = (obj) => {
	if(!showTalkingModel.value) return
	//#ifdef APP-PLUS
	stopRecord()
	// #endif
}
	
const handleMove = (obj) => {
	touchX.value = obj.changedTouches[0].pageX
	touchY.value = obj.changedTouches[0].pageY
	if(outScreen.value){
		hideOverlayTalking(obj)
	}
}
// 发送文本
const showKeyboard = () => {
	if(isLoadingState.value){
		uni.showToast({
			title: props.loadingText,
			icon: "none",
			duration:1000
		})
		return
	}
	if(!isDisabled.value){
		if(keyboardIsShow.value){
			if(answerValue.value){
				emit(
					'submitAnswer',
					answerValue.value,
					() => { 
						keyboardIsShow.value = !keyboardIsShow.value
						answerValue.value = ''
					}
				)
			}else{
				keyboardIsShow.value = !keyboardIsShow.value
			}
		}else{
			keyboardIsShow.value = !keyboardIsShow.value
		}
	}else{
		uni.showToast({
		  title: '暂无问题需要回答！',
		  icon: "none",
		  duration:1000
		})
	}
}
</script>

<style lang="scss" scoped>
	.talk-btns{
		height: 150rpx;
		background-color: #fff;
		padding: 25rpx 30rpx 0;
		position: relative;
		.touch-btn{
			height: 92rpx;
			box-shadow: 0 8rpx 20rpx 0 rgba(0,0,0,.06);
			text-align: center;
			line-height: 92rpx;
			color: #000;
			font-weight: 400;
			position: relative;
			.input-box{
				width: 100%;
				height: 92rpx;
				line-height: 92rpx;
				text-align: left;
				box-sizing: border-box;
				padding:0 40rpx 0 40rpx;
			}
		}
		.talk-btn-box{
			position: absolute;
			height: 100%;
			width: 120rpx;
			right: 0;
			top:0;
			.talk-btn-icon{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 60rpx;
				top: 50%;
				margin-top: -20rpx;
			}
		}
	}
	
	.overlay-box{
		display: flex;
		flex-direction: column-reverse;
		// justify-content: flex-end;
		width: 100%;
		height: 100%;
		.circle-bg-box{
			height: 234rpx;
			background: url(@/static/images/course/talking.png) no-repeat;
			background-size: cover;
			position: relative;
			.icon-box{
				position: absolute;
				left:50%;
				top: 50%;
				margin-left: -17rpx;
				margin-top: -24rpx;
				width: 34rpx;
				height: 48rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.tips-box{
			height: 40rpx;
			line-height: 40rpx;
			color:#c0c0c0;
			text-align: center;
			margin: 12rpx 0 24rpx;
		}
		.btns-box{
			height: 270rpx;
			// padding: 0 120rpx;
			width: 154rpx;
			margin: 0 auto 100rpx;
			overflow: hidden;
			font-size: 28rpx;
			text-align: center;
			line-height: 116rpx;
			.close-btn{
				float: left;
				height: 100%;
				width: 154rpx;
				overflow: hidden;
				color:#999;
				&.is-out{
					color:#fff;
				}
			}
			.translate-btn{
				float: right;
				height: 100%;
				width: 154rpx;
				overflow: hidden;
				color:#999;
			}
			.btn-box{
				width: 100%;
				height: 154rpx;
			}
		}
		.talk-dialog{
			width: 506rpx;
			height: 234rpx;
			margin: 0 auto;
			background-color: #06f;
		}
		.white-bg-box{
			height: 365rpx;
			background-color: #fff;
			overflow: hidden;
			border-radius: 32rpx 32rpx 0 0;
			padding: 58rpx 36rpx;
			.box-title{
				font-size: 32rpx;
				font-weight: bold;
				line-height: 46rpx;
				margin-bottom: 46rpx;
			}
			.box-btns{
				height: 46rpx;
				line-height: 46rpx;
				display: flex;
				justify-content: space-between;
				color: #999;
				.is-active{
					color: #06f;
				}
			}
		}
	}
	
</style>
