<template>
	<view class="course-study max_page">
		<view class="top-bg"></view>
		<view class="bot-bg"></view>
		<view class="course-study-body" v-show="step === 1">
			<view class="seek-setting">
				<view class="inline-block" @click="showChangeSeekModelNow">{{chooseRate}}倍</view>
				<!-- <image src="@/static/images/course/setting.png" alt="" class="image-icon" @click.stop="showChangeBgModelNow"></image> -->
			</view>
			<view class="body-title">
				<uv-icon class="arrow-icon" name="arrow-left" @click="backRouter()"/>
				语言选择，开启学习之旅
			</view>
			<view class="voice-list">
				<uv-radio-group v-model="choiceTeacher">
					<view class="voice-item" v-for="item in teacherList" :key="item.teacherNo" @click="choiceTeacher = item.teacherNo">
						<view class="avatar-box">
							<ImagePreview class="img-box" :src="item.imgAddr" :isCache="true" :width="120" :height="160"></ImagePreview>
						</view>
						<view class="right-cont">
							<view class="right-name">{{item.teacherName}}</view>
							<view class="right-desc">描述：{{item.voiceDesc || '--'}}</view>
							<view class="audio-box">
								<view :class="['talking-gif', activeVoiceTeachNo === item.teacherNo && !loadingTeacherVoice ? 'is-play':'']"></view>
								<CommonLoading color="#06f" v-show="activeVoiceTeachNo === item.teacherNo && loadingTeacherVoice" style="float: left;"/>
								<view class="play-btn" @click="playTeacherVoice(item)">
									<image class="icon" v-if="activeVoiceTeachNo !== item.teacherNo" src="@/static/images/course/play-blue.png" style="width: 100%;height: 100%;"></image>
									<image class="icon" v-else src="@/static/images/course/stop-blue.png" style="width: 100%;height: 100%;"></image>
								</view>
							</view>
						</view>
						<uv-radio :name="item.teacherNo" class="radio-box" @click.stop/>
					</view>
				</uv-radio-group>
				<view class="start-btns" @click="nextStep">
					开启学习之旅
				</view>
			</view>
		</view>
		<view class="course-study-body" v-show="step === 2">
			<view class="seek-setting">
				<view class="inline-block" @click="showChangeSeekModelNow">{{chooseRate}}倍</view>
				<image src="@/static/images/course/setting.png" alt="" class="image-icon" @click.stop="showChangeBgModelNow"></image>
			</view>
			<view class="body-title" @click="scrollToBottomNow">
				<uv-icon class="arrow-icon" name="arrow-left" @click="backRouter()"/>
				课程学习
			</view>
				<view class="study-num">
					<view class="color-blue">{{ showOrder }}</view> / {{ pgrphNum }}
				</view>
			<scroll-view 
				class="talking-list" 
				:scroll-y="true" 
				:scroll-top="scrollTop"
				:show-scrollbar="false"
				:scroll-with-animation="true"
			>
			<!-- <view class="talking-list-cont" id="scroll-box" ref="scrollBoxRef"> -->
				<TalkingItem 
					class="talking-item" 
					v-for="item,index in talkingList" 
					:key="'item' + item.id"
					:type="item.type" 
					:dataInfo="item"
					:activeVoiceId="activeVoiceTalkingItemId"
					:isPlaying="activeVoiceTalkingItemId === item.id"
					:voiceRate="chooseRate"
					:lastQuestionInfo="lastTalkingInfo"
					:teacherInfo="choiceTeacherInfo"
					@changePlay="changePlayItemId"
					@nextQuestion="nextQuestionSuccess"
					@withdraw="withdrawNow"
					@finishQuestion="finishQuestionNow"
					:id="'item' + item.id"
					:isLast="talkingList.length === (index+1)"
				></TalkingItem>
			<!-- <video v-if="videoUrlShow" :src="videoUrlShow" controls></video> -->
			<!-- </view> -->
			</scroll-view>
			<TouchBtn  
				class="talk-btns" 
				@uploadVoice="uploadRecordNow" 
				@submitAnswer="submitAnswerNow"
				@startRecord="changePlayItemId('')"
				:isLoading="isUploadingVoice"
				:onlyVoice="answerOnlyVoice"
				:canAnswer="testAnswer"
				:canAnswerText="'每个问题最多连续发送五次答案！'"
				:isDisabled="((lastTalkingInfo.type||0) !== 4)"
			/>
		</view>
		<uv-overlay :show="showSeekModel" opacity=".6" @click="showSeekModel = false">
			<view class="overlay-box">
				<view class="white-bg-box">
					<view class="box-title">倍速
					</view>
					<view class="box-btns">
						<view
							v-for="item in rateList"
							:class="{'is-active':item === chooseRate}" 
							@click="chooseRateNow(item)"
						>{{item}}</view>
					</view>
				</view>
			</view>
		</uv-overlay>
		<uv-overlay :show="showBgModel" opacity=".6" @click="showBgModel = false">
			<view class="overlay-box">
				<view class="white-bg-box-setting white-bg-box">
					<view class="box-title">设置
					</view>
					<view class="box-items" @click.stop>
						<view class="box-item">
							<view class="box-item-title">音色</view>
							<uv-radio-group v-model="choiceTeacher" class="box-item-cont">
								<view class="overlay-voice-item" v-for="item in teacherList" :key="item.teacherNo" @click="changeTeacherVoiceNow(item)">
									<view class="overlay-avatar-box">
										<ImagePreview class="overlay-img-box" :src="item.imgAddr" :isCache="true" :width="120" :height="160"></ImagePreview>
									</view>
									<view class="overlay-teacher-name">{{item.teacherName}}</view>
									<uv-radio :name="item.teacherNo" class="overlay-radio-box" @click.stop/>
								</view>
							</uv-radio-group>
						</view>
					</view>
				</view>
			</view>
		</uv-overlay>
	</view>
</template>

<script setup>
import { reactive, ref, computed, unref, onMounted, onUnmounted, getCurrentInstance, nextTick } from 'vue';
import { onLoad,onShow, onUnload,onHide } from '@dcloudio/uni-app';
import { 
	previewFile, 
	downloadFile, 
	commonUploadVoiceFile,
	downloadVoiceFile, 
	uploadVoiceFile,
} from "@/api/common.js"
import { getToken } from '@/common/common.js'
import { get_base_url, goto_login_fun } from '@/api/request'
import { 
	getCourseStudyInfoApi, 
	afreshStudyCourseApi,
	queryQuestionEvalateApi,
	textChartApi,
	setStudyTeacherApi
} from "@/api/study.js"
import common from '@/common/common';
import TalkingItem from '@/pages/course/components/talkingItem.vue'
import ImagePreview from '@/components/image-preview/image-preview.vue'
import TouchBtn from '@/pages/course/components/touchBtn.vue'

import { useSocketStore } from "@/store/socket.js"
import { useStorageStore } from "@/store/storage.js"
import { storeToRefs } from 'pinia'

const socketStore = useSocketStore()
const storageStore = useStorageStore()
const { SocketObj } = storeToRefs(socketStore)
const audioCacheObj = computed(() => storageStore.audioObj)

const { proxy } = getCurrentInstance()
const crsNum = ref('');
const crsId = ref('');
const step = ref(0)
const teacherList = ref([])
const choiceTeacher = ref('')
const videoUrlShow = ref('')
const talkingList = ref([])
const activeVoiceTalkingItemId = ref('')
const answerValue = ref('')
const inputRef = ref('')
const flagVal = ref('1')
const isUploadingVoice = ref(false)
// 初始化数据
const getData = async (flag) => {
	try{
		const { body } = await getCourseStudyInfoApi({crsId: crsId.value})
		teacherList.value = body.teacheList.map(t=>({
			...t,
			voicePath: '',
			voiceObj: null
		}))
		if(body.stdyProgressFlag === 'N'){
			step.value = 1
		}else{
			choiceTeacher.value = body.choiceTeacher
			if(startPgrphId.value){
				sendMessage({
					"commond" : 'STDY',
					"body" : {
						crsId: crsId.value,
						teacherNo: choiceTeacher.value
					}
				})
				return
			}
			common.show('提示', '系统检测到您已存在学习记录，要继续学习吗？',true, '重新学习','继续学习').then((res) => {
				if(res) {
					// 继续学习 ， 获取学习历史接口
					// 滚动到最下面
					scrollToBottomNow()
					sendMessage({
						"commond" : 'STDY',
						"body" : {
							crsId: crsId.value,
							teacherNo: choiceTeacher.value
						}
					})
					step.value = 2
				}else{
					// 重新学习
					afreshStudyCourseApi({
						crsId: crsId.value,
					}).then(res=>{
						step.value = 1
						teacherList.value = body.teacheList.map(t=>({
							...t,
							voicePath: '',
							voiceObj: null
						}))
					}).catch(t=>{
						step.value = 1
						teacherList.value = body.teacheList.map(t=>({
							...t,
							voicePath: '',
							voiceObj: null
						}))
					})
				}
			}).finally(() => {})	
		}
	}catch{
		
	}finally{
		watchFlag.value +=1
	}
};

const showChangeSeekModelNow = () => {
	// changePlayItemId()
	showSeekModel.value = true
}
const showBgModel = ref(false)
const showChangeBgModelNow = () => {
	changePlayItemId()
	showBgModel.value = true
}
// 关闭播放状态
const changePlayItemId = (id = '') => {
	activeVoiceTalkingItemId.value = id
	// if(activeVoiceTalkingItemId.value === id){
	// 	activeVoiceTalkingItemId.value = ''
	// }else{
	// 	activeVoiceTalkingItemId.value = id
	// }
}
// 选择的教师对象信息
const choiceTeacherInfo = computed(()=>{
	return teacherList.value.find(t=> t.teacherNo === choiceTeacher.value)
}) 

const changeTeacherVoiceNow = async (item) => {
	if(item.teacherNo === choiceTeacher.value) return
	try{
		const res = await setStudyTeacherApi({
			stdyId: stdyId.value,
			teacherNo: item.teacherNo
		})
		console.log(res)
		if(res.rtnCode === '0000'){
			choiceTeacher.value = item.teacherNo
			showBgModel.value = false
		}
	}catch{} finally{}
}

// 选择教师语音对象
const activeVoiceTeachNo = ref('')
let teacherVoiceObj = uni.createInnerAudioContext()

teacherVoiceObj.onEnded(()=>{
	activeVoiceTeachNo.value = ''
	teacherVoiceObj.src = ''
})
const loadingTeacherVoice = ref(false)
const playTeacherVoice = (item) =>{
	teacherVoiceObj.stop()
	teacherVoiceObj.src = ''
	let _isStop = item.teacherNo === activeVoiceTeachNo.value
	activeVoiceTeachNo.value = _isStop ? '' : item.teacherNo
	if(_isStop) return
	if(item.voicePath){
		teacherVoiceObj.src = item.voicePath
		teacherVoiceObj.play()
	}else{
		loadingTeacherVoice.value = true
		storageStore.getStorageById('audio', item.teacherNo, (url)=>{
			if(url){
				teacherVoiceObj.src = url
				teacherVoiceObj.play()
				loadingTeacherVoice.value = false
			}else{
				downloadVoiceFile('/trastudy/traStdyInfo/trialListening?teachNo='+item.teacherNo).then(res=>{
					loadingTeacherVoice.value = false
					item.voicePath = res.tempFilePath
					teacherVoiceObj.src = item.voicePath
					teacherVoiceObj.play()
					storageStore.setStorage('audio', item.teacherNo, item.voicePath)
				})
			}
		})
	}
}
var socketTask = null
const nextStep = () => {
	if(choiceTeacher.value){
		teacherVoiceObj.destroy()
		sendMessage({
			"commond" : 'STDY',
			"body" : {
				crsId: crsId.value,
				teacherNo: choiceTeacher.value
			}
		})
		step.value = 2
	}else{
		uni.showToast({
		  title: '请选择一位教师！',
		  icon: "none",
		  duration:1000
		});
	}
}

const pgrphNum = ref(1)
const showOrder = ref(0)
const isLastPgrph = ref(false)
const backRouter = ()=>{
	// common.redirectTo(`/pages/courseDetail/index?crsId=${crsId.value}&crsNum=${crsNum.value}&from=study`)
	common.navigateBack()
}

const answerOnlyVoice = computed(()=>{
	return lastTalkingInfo.value.answerWay === 'V'
})

// 获取段落
const getGraphInfoUnStudy = (flag = 0) => {
	console.log(isLastPgrph.value)
	let _id = new Date().getTime() + 'id'
	let _data = {
			crsId: crsId.value,
			stdyId: unref(stdyId),
			stdyBatch: unref(stdyBatch)
		}
	if(flag === 1 && !!startPgrphId.value){
		_data.pgrphId = startPgrphId.value
	}
	textChartApi({
		processType: 'PRGH-STDY',
		requestBody: JSON.stringify(_data)
	}).then(res=>{
		let _body = res.body|| {}
		if(!_body.chatBody) {
			return
		}
		if(Number(_body.bodyTyp) === 7){
			common.show('恭喜你已学完全部知识点', '有什么心得跟我们分享吗？',true, '取消','去评论').then((res) => {
				if(res) {
					// 去评论
					common.redirectTo(`/pages/courseDetail/submit?crsId=${crsId.value}&crsNum=${crsNum.value}&from=study&imgId=${imageId.value}`)
				}else{
					// 取消
					common.redirectTo(`/pages/courseDetail/index?crsId=${crsId.value}&crsNum=${crsNum.value}&from=study`)
				}
			}).finally(() => {})	
			return
		}
		lastTalkingInfo.value =  {
			crsId: crsId.value,
			qstLogId: _body.chatBody,
			pgrphId: _body.pgrphId,
			logId:_body.chatBody.logId || '',
			chatContent: _body.chatContent,
			userInfo: {...choiceTeacherInfo.value},
			..._body.chatBody,
			type: Number(_body.bodyTyp) || 0,
			id: _id
		}
		isLastPgrph.value = _body.chatBody.haveNext !== 'Y'
		talkingList.value.push(lastTalkingInfo.value)
		pgrphNum.value = _body.chatBody.pgrphNum
		showOrder.value = _body.chatBody.showOrder
		logId.value = _body.chatBody.logId || ''
		scrollToBottomNow()
	})
	// common.msg('您已学完当前课程的全部内容！')
}
const lastTalkingInfo = ref({})
const qstLogId = ref('')
// 获取问题
const getQuestionInfoUnStudy = (pgrphId) => {
	textChartApi({
		processType: 'QSN-ANSER',
		requestBody: JSON.stringify({
			crsId: crsId.value,
			stdyId: unref(stdyId),
			stdyBatch: unref(stdyBatch),
			logId: unref(logId),
			pgrphId
		})
	})
	.then(res=>{
		let _id = new Date().getTime() + 'id'
		let _body = res.body || {}
		console.log(_body)
		if(Number(_body.bodyTyp) === 7){
			common.show('恭喜你已学完全部知识点', '有什么心得跟我们分享吗？',true, '取消','去评论').then((res) => {
				if(res) {
					// 去评论
					common.redirectTo(`/pages/courseDetail/submit?crsId=${crsId.value}&crsNum=${crsNum.value}&from=study&imgId=${imageId.value}`)
				}else{
					// 取消
					common.redirectTo(`/pages/courseDetail/index?crsId=${crsId.value}&crsNum=${crsNum.value}&from=study`)
				}
			}).finally(() => {})	
			return
		}
		if(_body.chatBody && _body.chatBody?.stdyStat !== 'N'){
			let _id = new Date().getTime() + 'id'
			lastTalkingInfo.value = {
				crsId: crsId.value,
				stdyId: unref(stdyId),
				stdyBatch: unref(stdyBatch),
				logId: unref(logId),
				pgrphId,
				chatContent: _body.chatContent||'',
				userInfo: {...choiceTeacherInfo.value},
				...(_body.chatBody||{}),
				type: 4,
				userInfo: {...choiceTeacherInfo.value},
				id: _id,
				isQuestion: true
			}
			talkingList.value.push(JSON.parse(JSON.stringify(lastTalkingInfo.value)))
			qstLogId.value = _body.chatBody?.qstLogId
			scrollToBottomNow()
		}else{
			getGraphInfoUnStudy()
		}
	})
}

// 继续 执行方法
const nextQuestionSuccess = (info, type='next') => {
	let _id = new Date().getTime() + 'id'
	if(type === 'next'){
		talkingList.value.push({
			crsId: info.crsId,
			pgrphId: info.pgrphId,
			talkingContent: '继续',
			type: 0,
			id: _id
		})
		scrollToBottomNow(0)
		getQuestionInfoUnStudy(info.pgrphId)
	}else if( type === 'overGraph'){
		textChartApi({
			processType: 'PRGH-OVER',
			requestBody: JSON.stringify({
				pgrphId: info?.pgrphId,
				logId: info?.logId,
			})
		}).then(res=>{
			talkingList.value.push({
				crsId: info.crsId,
				pgrphId: info.pgrphId,
				talkingContent: '继续',
				type: 0,
				id: _id
			})
			scrollToBottomNow(0)
			getQuestionInfoUnStudy(info.pgrphId)
		})
	}else if(type === 'reStart'){
		talkingList.value.push({
			crsId: info.crsId,
			pgrphId: info.pgrphId,
			talkingContent: '重新答',
			type: 0,
			id: _id
		})
		// 重新回答
		textChartApi({
			processType: 'NEW-ANSER',//NEW-KNOW 
			requestBody: info.qstLogId
		}).then(res=>{
			let _body = res.body|| {}
			if(!_body.chatBody) {
				return
			}
			lastTalkingInfo.value = {
				crsId: info.crsId,
				qstLogId: _body.chatBody,
				pgrphId: info.pgrphId,
				chatContent: _body.chatContent,
				userInfo: {...choiceTeacherInfo.value},
				..._body.chatBody,
				type: Number(_body.bodyTyp) || 0,
				id: _id,
				isQuestion: true
			}
			talkingList.value.push(lastTalkingInfo.value)
			qstLogId.value = _body.chatBody.qstLogId
			scrollToBottomNow()
		})
	}else if (type === 'reStartPrgh'){
		talkingList.value.push({
			crsId: info.crsId,
			pgrphId: info.pgrphId,
			talkingContent: '重新学',
			type: 0,
			id: _id
		})
		textChartApi({
			processType: 'NEW-KNOW',
			requestBody: JSON.stringify({
				logId: info.logId,
				pgrphId: info.pgrphId
			})
		}).then(res=>{
			let _body = res.body|| {}
			if(!_body.chatBody) {
				return
			}
			lastTalkingInfo.value = {
				crsId: info.crsId,
				qstLogId: _body.chatBody,
				pgrphId: info.pgrphId,
				chatContent: _body.chatContent,
				userInfo: {...choiceTeacherInfo.value},
				..._body.chatBody,
				type: Number(_body.bodyTyp) || 0,
				id: _id,
				isQuestion: true
			}
			talkingList.value.push(lastTalkingInfo.value)
			logId.value = _body.chatBody.logId
			qstLogId.value = _body.chatBody.qstLogId || qstLogId.value
			scrollToBottomNow()
		})
	}
}
const scrollBoxRef = ref()
const scrollTop = ref(99999)
const scrollToBottomNow = (time = 500) => {
	nextTick(()=>{
		setTimeout(() => {
			scrollTop.value += 1
			scrollTop.value += 1
			let _arr =  talkingList.value || []
			if(_arr.length && _arr.length > 0){
				let _last = talkingList.value[talkingList.value.length - 1]
				uni.pageScrollTo({
					selector: '#item' + _last.id,
					duration: 300
				})
			}
		},time)
	})
} 

const reconnectTimer = null // 重连timer
const isManualClose = ref(false) // 是否手动关闭

const stdyId = ref('')
const stdyBatch = ref('')
const logId = ref('')
// ws 初始化逻辑
const initsocketTask = () => {
	socketStore.creatSocket()
	// unref(SocketObj).on('open', (res)=>{
	// 	if(startPgrphId.value){
	// 		sendMessage({
	// 			"commond" : 'STDY',
	// 			"body" : {
	// 				crsId: crsId.value,
	// 				teacherNo: choiceTeacher.value
	// 			}
	// 		})
	// 		step.value = 2
	// 	}
 // 	})
	unref(SocketObj).on('message', (res)=>{
		const { rtnCode, body, commond } = JSON.parse(res.data) 
		if(rtnCode === '0000'){
			if(commond === 'STDYBTH' && !stdyId.value){
				stdyId.value = body.stdyId || ''
				stdyBatch.value = body.stdyBatch || ''
				logId.value = body.logId || ''
				getGraphInfoUnStudy(1)
				step.value = 2
			}
		}else{
			// if(['0005', 'QQ0005'].includes(res.rtnCode)) {
			//   goto_login_fun();
			// }
		}
 	})
}
const reconnect = ()=> {
	initsocketTask()
}
const sendMessage = (data) => { 
	unref(SocketObj).send(data)
}
// ws 结束
const startPgrphId = ref('')
const imageId = ref('')
onLoad((params) => {
	watchFlag.value = 1
	crsId.value = params.crsId||'';
	crsNum.value = params.crsNum||'';
	imageId.value = params.imgId || ''
	startPgrphId.value = params.pgrphId||'';
	console.log('onLoad')
});
const showTalkingModel = ref(false)
// 录音
onMounted(()=>{
	initsocketTask()
	getData('1');
})
onHide(()=>{
	if(watchFlag.value === 1) return
	changePlayItemId('')
	socketStore.closeSocket()
	// common.show('提示信息', '检测到您已离开，即将退出学习页面。',false, '','确认').then((res) => {
	// 	common.redirectTo(`/pages/courseDetail/index?crsId=${crsId.value}&crsNum=${crsNum.value}&from=study`)
	// }).finally(() => {})	
})
onShow(()=>{
	if(watchFlag.value === 1) return
	// getData('2');
	initsocketTask()
})
const watchFlag = ref(1)
onUnload(()=>{
	changePlayItemId()
	teacherVoiceObj?.stop?.()
	teacherVoiceObj.src = ''
})
const testAnswer = computed(()=>{
	if(talkingList.value.length < 5) return true
	let _arr = talkingList.value.slice(-5)
	let _num = _arr.map(t=>[1,2,6].indexOf(Number(t.type))>=0).filter(t => !!t)
	return _num.length < 5
})
const uploadRecordNow = (voicePath) => {
		if(!testAnswer.value){
			common.msg('每个问题最多连续发送五次答案！')
			return
		}
		isUploadingVoice.value = true
		let _data = {
			qnsId: unref(lastTalkingInfo).qnsId,// 问题ID 必输项:true  类型:String
			pgrphId: unref(lastTalkingInfo).pgrphId,// 段落ID 必输项:true  类型:String
			qstLogId: unref(qstLogId),// 段落ID 必输项:true  类型:String
			crsId: crsId.value,// 课程ID 必输项:true  类型:String
			stdyBatch: stdyBatch.value,// 学习批次 必输项:true  类型:String
			ansterContent: '',// 回答文本内容 必输项:false  类型:String
		}
		let _id = new Date().getTime() + 'id'
		//#ifndef APP-PLUS
			// h5 假数据
			talkingList.value.push({
				crsId: crsId.value,
				pgrphId: unref(lastTalkingInfo).pgrphId,
				qnsId: unref(lastTalkingInfo).qnsId,
				talkingContent: '',
				talkingVoice: voicePath,
				type: 1,
				userInfo: {...choiceTeacherInfo.value},
				id: _id
			})
			setIsUploadingVoice()
			scrollToBottomNow()
		// #endif
		//#ifdef APP-PLUS
		talkingList.value.push({
			crsId: crsId.value,
			pgrphId: unref(lastTalkingInfo).pgrphId,
			qnsId: unref(lastTalkingInfo).qnsId,
			talkingContent: '',
			talkingVoice: voicePath,
			intrctId: '',
			isLoading: true,
			type: 1,
			userInfo: {...choiceTeacherInfo.value},
			id: _id
		})
		scrollToBottomNow()
		commonUploadVoiceFile(voicePath, '/trastudy/traStdychat/voiceChart', {
			processType: 'ANSER-VOICE',
			requestBody: JSON.stringify(_data)
		}).then(res=>{
			let _res = JSON.parse(res.data)
			if(_res.rtnCode === '0000'){
				talkingList.value = talkingList.value.map(t=>{
					if(t.id === _id){
						return {
							crsId: crsId.value,
							pgrphId: _data.pgrphId,
							qstLogId: _data.qstLogId,
							qnsId: _data.qnsId,
							talkingContent: '',
							talkingVoice: voicePath,
							intrctId: _res.body.chatBody,
							type: 1,
							userInfo: {...choiceTeacherInfo.value},
							id: _id
						}
					}else{
						return t
					}
				})
				scrollToBottomNow()
			}else{}
			setIsUploadingVoice()
		}).catch(err=>{
			setIsUploadingVoice()
			talkingList.value = talkingList.value.filter(t=>t.id !== _id)
			uni.showToast({
				title: '系统异常，请联系管理员',
				icon: "none",
				duration:1000
			});
		})
		// #endif
}
const setIsUploadingVoice = (flag = false) => {
	if(flag){
		isUploadingVoice.value = true
	}else{
		setTimeout(()=>{
			isUploadingVoice.value = false
		},100)
	}
}
// 发送文本
const submitAnswerNow = (val, cb) => {
	if(!testAnswer.value){
		common.msg('每个问题最多连续发送五次答案！')
		return
	}
	isUploadingVoice.value = true
	let _data = {
		qnsId: unref(lastTalkingInfo).qnsId,// 问题ID 必输项:true  类型:String
		pgrphId: unref(lastTalkingInfo).pgrphId,// 段落ID 必输项:true  类型:String
		qstLogId: unref(qstLogId),// 段落ID 必输项:true  类型:String
		crsId: crsId.value,// 课程ID 必输项:true  类型:String
		stdyBatch: stdyBatch.value,// 学习批次 必输项:true  类型:String
		ansterContent: val // 回答文本内容 必输项:false  类型:String
	}
	textChartApi({
		processType: 'ANSER-TEXT',
		requestBody: JSON.stringify(_data)
	})
	.then(res=>{
		setIsUploadingVoice()
		let _id = new Date().getTime() + 'id'
		let _body = res.body|| {}
		if(!_body.chatBody) {
			return
		}
		talkingList.value.push({
			..._data,
			chatContent: _body.chatContent,
			userInfo: {...choiceTeacherInfo.value},
			intrctId: _body.chatBody ||'',
			talkingContent: val,
			talkingVoice: '',
			type: 2,
			userInfo: {...choiceTeacherInfo.value},
			qstLogId: qstLogId.value,
			id: _id
		})
		scrollToBottomNow()
		cb && cb()
	}).catch(()=>{
		setIsUploadingVoice()
	})
}
// 撤回 
const withdrawNow = (data) => {
	textChartApi({
		processType: 'ANSER-WITHDRAW',
		requestBody: JSON.stringify({
			intrctId: data.intrctId
		})
	})
	.then(res=> {
		// 删除撤回的数据item
		common.msg('撤回成功！')
		talkingList.value = talkingList.value.filter(t => t.intrctId !== data.intrctId)
	})
}
const loadingQstLogId = ref('')
// 完成 
const finishQuestionNow = (data) => {
	textChartApi({
		processType: 'ANSER-OVER',
		requestBody: JSON.stringify({
			qstLogId: data.qstLogId
		})
	})
	.then(res=> {
		// common.msg('完成成功，开始获取评分维度数据！')
		let _state = res.body.chatBody.processStat
		if(_state === 'ER'){
			common.msg('提交答案失败！')
			return
		}
		let _id1 = new Date().getTime() + '3d'
		talkingList.value.push({
			id: _id1,
			talkingContent: '完成',
			userInfo: {...choiceTeacherInfo.value},
			type: 0
		})
		loadingQstLogId.value = res.body.chatBody.qstLogId
		qstLogId.value = loadingQstLogId.value
		let _id = new Date().getTime() + 'id'
		lastTalkingInfo.value = {
			isLoading: true,
			id: _id,
			userInfo: {...choiceTeacherInfo.value},
			type: 5
		}
		talkingList.value.push(lastTalkingInfo.value)
		scrollToBottomNow(0)
		getQuestionEvalateRequest(_id, data, 1)
	})
}
// 查询问题回答评分
const getQuestionEvalateRequest = (id, data, num) => {
	if(loadingQstLogId.value){
		textChartApi({
			processType: 'ANSER-RESULT',
			requestBody: JSON.stringify({
				qstLogId:loadingQstLogId.value
			})
		})
		.then(res=>{
			let _body = res.body|| {}
			if(!_body.chatBody) {
				return
			}
			if(_body.chatBody && _body.chatBody.evalOver === 'Y'){
				talkingList.value = talkingList.value.map(t=>{
					if(t.id === id){
						lastTalkingInfo.value = {
							..._body.chatBody,
							pgrphId: data.pgrphId,
							qstLogId: loadingQstLogId.value,
							id,
							userInfo: {...choiceTeacherInfo.value},
							type: 5
						}
						return lastTalkingInfo.value
					}else{
						return t
					}
				})
				scrollToBottomNow()
			}else{
				// 1分钟之后取消获取报错
				if(num === 30){
					common.msg('获取评分数据失败，请重新提交获取！')
					talkingList.value.pop()//删除loading会话
					talkingList.value.pop()//删除完成会话
					return
				}
				setTimeout(()=>{
					getQuestionEvalateRequest(id, data, num+1)
				}, 2 * 1000)
			}
		})
	}
}

const showSeekModel = ref(false)
const rateList = ref(['0.5', '0.8', '1.0', '1.5', '2.0'])
const chooseRate = ref('1.0')
const chooseRateNow = (item) => {
	chooseRate.value = item
	showSeekModel.value = false
	teacherVoiceObj.playbackRate = Number(item)
}
</script>

<style lang="scss">
	.course-study{
		position: relative;
		display: flex;
		flex-direction: column;
		.top-bg{
			background: linear-gradient(16deg,rgba(234,246,255,0) 0%,#c3e6ff 100%);
			height: 480rpx;
			width: 750rpx;
		}
		.bot-bg{
			// background-color: #F6F8FF;
			background: linear-gradient(136deg,rgba(234,246,255,0) 0%,#c3e6ff 100%);
			width: 750rpx;
			flex: 1;
		}
		.seek-setting{
			position: absolute;
			z-index: 3;
			right: 20rpx;
			top: 68rpx;
			font-size: 26rpx;
			width: 140rpx;
			height: 52rpx;
			padding: 10rpx 0;
			overflow: hidden;
			line-height: 32rpx;
			text-align: right;
			padding-right: 48rpx;
			
			.image-icon{
				width: 30rpx;
				height: 32rpx;
				position: absolute;
				right: 0;
				top: 10rpx;
			}
		}
		.course-study-body{
			position: absolute;
			overflow: hidden;
			left:0;
			top: 0;
			height: 100%;
			width: 100%;
			padding:0 0rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.body-title{
				
				height: 150rpx;
				text-align: center;
				font-size: 33rpx;
				padding-top: 70rpx;
				line-height: 46rpx;
				box-sizing: border-box;
				font-weight: 500;
				color:#000;
				position: relative;
				// margin-bottom: 23rpx;
				.arrow-icon{
					position: absolute;
					left:21rpx;
					top:65rpx;
					color: #000;
					padding: 15rpx;
					// background-color: red;
				}
			}
			.study-num{
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				padding-top: 30rpx;
				box-sizing: content-box;
				background: url(@/static/images/course/study-bg.png) no-repeat;
				border-radius: 30rpx 30rpx 0 0;
				.color-blue{
					color: #06f;
					display: inline;
				}
			}
			.talking-list{
				flex:1;
				overflow-y: auto;
				padding: 10rpx 30rpx;
				background: url(@/static/images/course/study-bg.png) no-repeat;
				background-size: cover;
				box-sizing: border-box;
				width: 100%;
				.talking-list-cont{
					padding: 0;
				}
				.talking-item{
					margin-bottom: 46rpx;
				}
			}
			.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;
						::v-deep .uv-input__content{
							padding-right: 50rpx;
						}
					}
				}
				.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;
					}
				}
			}
			.voice-list{
				flex:1;
				overflow-y: auto;
				padding: 10rpx 40rpx 30rpx;
				.voice-item{
					min-height: 246rpx;
					width: 100%;
					overflow: hidden;
					background-color: #fff;
					border-radius: 16rpx;
					display: flex;
					padding: 25rpx;
					position: relative;
					&:not(:last-child){
						margin-bottom: 30rpx;
					}
					.avatar-box{
						width: 160rpx;
						height: 207rpx;
						margin-right: 20rpx;
						border-radius: 16rpx;
						overflow: hidden;
						background-color: #ccc;
						.img-box{
							width: 100%;
							height: 100%;
						}
					}
					.right-cont{
						flex:1;
						.right-name{
							width: 380rpx;
							line-height: 40rpx;
							font-size: 28rpx;
							font-weight: 500;
							margin-bottom: 25rpx;
							word-break: break-all;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
						.right-desc{
							width: 380rpx;
							line-height: 38rpx;
							font-size: 25rpx;
							color: #999;
							margin-bottom: 12rpx;
							word-break: break-all;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
						.audio-box{
							width: 90%;
							height: 70rpx;
							line-height: 70rpx;
							background-color: #eaf2ff;
							padding: 15rpx 25rpx;
							overflow: hidden;
							.talking-gif{
								width: 140rpx;
								height: 40rpx;
								margin-right: 20rpx;
								// background-color: #ccc;
								background: url(@/static/images/course/voice-gray.png) no-repeat;
								background-size: 100%;
								box-sizing: border-box;
								float: left;
								&.is-play{
									background: url(@/static/images/course/voice-gif.gif) no-repeat;
									background-size: 100%;
								}
							}
							.talking-time{
								float: right;
								text-align: right;
								line-height: 40rpx;
								font-size: 23rpx;
								color: #b1bbd3;
							}
							.play-btn{
								float:right;
								width: 35rpx;
								height: 40rpx;
								padding-top:2rpx;
								line-height: 35rpx;
								margin-left: 20rpx;
							}
						}
					}
					.radio-box{
						position: absolute;
						right: 20rpx;
						top: 20rpx;
					}
				}
				.start-btns{
					margin-top:20rpx;
					height: 80rpx;
					width: 100%;
					background-color: #06f;
					color:#fff;
					text-align: center;
					line-height: 80rpx;
				}
			}
		}
	}
	.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;
			&.white-bg-box-setting{
				height: auto;
				min-height: 400rpx;
			}
			.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;
				}
			}
			.box-items{
				.box-item{
					margin-bottom: 20rpx;
					overflow: hidden;
					.box-item-title{
						width: 86rpx;
						height: 100%;
						float: left;
						overflow: hidden;
						color: #666;
						font-size: 28rpx;
					}
					.box-item-cont{
						display: block;
						float: left;
						width: calc(100% - 86rpx);
						overflow: hidden;
						.overlay-voice-item{
							width: 123rpx;
							float: left;
							position: relative;
							margin-bottom: 30rpx;
							&:not(:nth-child(3n)){
								margin-right: 100rpx;
							}
							.overlay-avatar-box{
								width: 123rpx;
								height: 123rpx;
								border-radius: 50%;
								overflow: hidden;
								box-shadow: 1rpx 0rpx 5rpx #ccc;
							}
							.overlay-teacher-name{
								width: 123rpx;
								text-align: center;
								height: 58rpx;
								line-height: 58rpx;
								font-size: 28rpx;
							}
							.overlay-radio-box{
								position: absolute;
								left: 100rpx;
								top: 5rpx;
								pointer-events: none;
							}
						}
					}
				}
			}
		}
	}
	
</style>
