<template>
	<view class="talking-item">
		<questionVue v-if="talkingType === 'question'" @changePlay="changePlay" :dataInfo="talkingInfo" :isLast="isLast"
			:activeVoiceId="activeVoiceId"></questionVue>
		<answerVue v-else-if="talkingType === 'answer'" :dataInfo="props.talkingInfo" :isLast="isLast"
			:isLoading="!!props.talkingInfo.isLoading" :isAnswering="props.isAnswering" @handleEvents="handleEvents">
		</answerVue>
		<view v-else></view>
	</view>
</template>

<script setup>
	import {
		toRefs,
		watch
	} from 'vue'
	import questionVue from './question.vue';
	import answerVue from './answer.vue';

	const emit = defineEmits(['handleEvents'])
	const props = defineProps({
		talkingType: {
			default: 'question',
			type: String
		},
		talkingInfo: {
			default: () => ({}),
			type: Object
		},
		activeVoiceId: {
			default: '',
			type: String
		},
		isAnswering: {
			default: false,
			type: Boolean
		},
		isLast: {
			default: false,
			type: Boolean
		},
	})
	watch(() => props.activeVoiceId, () => {}, {
		deep: true,
		immediate: true
	})
	watch(() => props.talkingInfo, () => {}, {
		deep: true,
		immediate: true
	})
	const {
		talkingType
	} = toRefs(props)
	const handleEvents = (type, info = {}) => {
		emit('handleEvents', {
			type,
			data: props.talkingInfo,
			id: "",
			info
		})
	}
	const changePlay = (id) => {
		emit('handleEvents', {
			type: 'changePlay',
			data: props.talkingInfo,
			id,
			info: {}
		})
	}
</script>

<style scoped lang="scss">
	.talking-item {
		overflow: hidden;
		margin-top: 0rpx;

		&+.talking-item {
			margin-top: 30rpx;
		}
	}
</style>