<template>
	<view class="course-record-page">
		<view class="top-bg"></view>
		<view class="bot-bg"></view>
		<view class="course-study-body">
			<view class="body-title">
				<uv-icon class="arrow-icon" name="arrow-left" @click="backRouter()" />
				{{ recordTitle }}
			</view>
			<scroll-view class="talking-list" :scroll-y="true" :scroll-top="scrollTop" :show-scrollbar="false"
				:scroll-with-animation="true">
				<talkingItem v-for="item in talkingList" :type="item.type"
					:dataInfo="item" :activeVoiceId="activeVoiceTalkingItemId" :isPlaying="activeVoiceTalkingItemId === item.id"
					:voiceRate="chooseRate" />
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		unref,
		computed,
		watch
	} from 'vue'
	import {
		queryTraStudyExecuteRecord
	} from '@/api/courseRecord.js'
	import common from '@/common/common';
	import talkingItem from './components/talkingItem.vue'
	
	const stdyId = ref('')
	const scrollTop = ref(0)
	const showOrder = ref(1)
	const pgrphNum = ref(1)
	
	const activeVoiceTalkingItemId = ref('')
	const chooseRate = ref('1.0')
	const recordTitle = ref('')
	onLoad((params) => {
		stdyId.value = params.stdyId
		recordTitle.value = params.crsName || '课程学习记录'
		getRecordInfo()
	})
	const talkingRecord = ref([])
	const talkingList = computed(()=>{
		let _arr = []
		talkingRecord.value.forEach((t,index)=> {
			_arr.push({
				...t,
				id: 'prgh-'+index,
				chatContent:( t.pgrphContent || ''),
				titleNum: '知识点'+(index+1)+'：',
				type: 3
			})
			if(t.qnsInfoVos && t.qnsInfoVos.length>0){
				t.qnsInfoVos.forEach((k,indexk)=>{
					if(k.qnsTyp === 'ES'){
						_arr.push({
							...k,
							chatContent: (k.qnsContent || ''),
							titleNum: '问题'+(indexk+1)+'：',
							type: 8,
							id: 'qns-'+index+'-'+indexk,
						})
					}else{
						_arr.push({
							...k,
							chatContent:(k.qnsContent || ''),
							titleNum: '问题'+(indexk+1)+'：',
							type: 8,
							id: 'qns-'+index+'-'+indexk,
							isQuestion: true,
							my_answer: [],
							backend_answer: [],
						})
					}
				})
			}
		})
		return _arr
	})
	const getRecordInfo = () => {
		queryTraStudyExecuteRecord({
			stdyId: stdyId.value
		}).then(res => {
			talkingRecord.value = res.body
		})
	}
	const backRouter = () => {
		common.navigateBack()
	}
	
</script>

<style scoped lang="scss">
	
	.course-record-page {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100vh;
		.top-bg {
			background: linear-gradient(16deg, rgba(234, 246, 255, 0) 0%, #e6eafd 100%);
			height: 480rpx;
			width: 750rpx;
		}

		.bot-bg {
			background: linear-gradient(136deg, rgba(234, 246, 255, 0) 0%, #e6eafd 100%);
			width: 750rpx;
			flex: 1;
		}

		.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;
			
			padding-top: var(--status-bar-height);

			.body-title {
				height: 90rpx;
				text-align: center;
				font-size: 33rpx;
				padding-top: 10rpx;
				line-height: 46rpx;
				box-sizing: border-box;
				font-weight: 500;
				color: #000;
				position: relative;

				.arrow-icon {
					position: absolute;
					left: 21rpx;
					top: 5rpx;
					color: #000;
					padding: 15rpx;
				}
			}

			.talking-list {
				flex: 1;
				overflow-y: auto;
				padding: 10rpx 30rpx;
				background: url(@/static/images/course/study-bg.png) no-repeat;
				background-size: cover;
				background-position: center bottom;
				box-sizing: border-box;
				width: 100%;

				.talking-list-cont {
					padding: 0;
				}

				.talking-item {
					margin-bottom: 46rpx;
				}
			}

		}
	}
</style>