<template>
	<view class="answerDetails">
		<view class="answerDetails-c">
			<view class="myQuestion-2-i-1">
				<view class="myQuestion-2-i-1-l">
					<view class="myQuestion-2-i-1-l-i">
						<image :src="info.img || '/static/images/tx.png'" mode="widthFix"></image>
					</view>
				</view>
				<view class="myQuestion-2-i-1-r">
					<view class="myQuestion-2-i-1-r-1">{{info.name}}</view>
					<view class="myQuestion-2-i-1-r-2">{{info.create_time}}发布</view>
				</view>
			</view>
			<view class="myQuestion-2-i-2">
				{{info.question}}
			</view>
			
			<view class="myQuestion-2-i-4">
				<u--image
					v-for="(item, index) in info.imgs"
					:key="index"
					radius="15rpx"
					height="145rpx"
					width="145rpx"
					@click.native="seeImg(info.imgs,index)"
					:src="item"></u--image>
			</view>
			<view class="myQuestion-2-i-5"></view>
			<view class="myQuestion-2-i-3" v-if="isAnswered">
				<view class="myQuestion-2-i-3-c">
					<view class="myQuestion-2-i-3-c-1">
						<view class="myQuestion-2-i-3-c-1-l">
							<image class="myQuestion-2-i-3-c-1-l-i" src="@/static/images/tx.png" mode="widthFix"></image>
							<text class="myQuestion-2-i-3-c-1-l-t">{{info.lecturer.title}}老师回复</text>
						</view>
						<view class="myQuestion-2-i-3-c-1-r">{{info.answer_time}}</view>
					</view>
					<view class="myQuestion-2-i-3-c-2" v-if="isTextReply">
						{{info.answer}}
					</view>
					<view style="margin-top: 28rpx;" v-if="isVoiceReply">
						<VoicePlayback
							ref="voicePlayback"
						/>
					</view>
					
				</view>
			</view>
			
			<u-empty
				v-else
				mode="data"
				text="暂无回复"
				icon="/static/imagesV2/icon43.png"
			>
			</u-empty>
			
		</view>
		<view class="answerDetails-b" v-if="isAnswered && isUnRated">
			<view class="answerDetails-b-c">
				<view class="answerDetails-b-c-l">
					<view class="answerDetails-b-c-l-1">请对本次答复</view>
					<view class="answerDetails-b-c-l-2">评分</view>
				</view>
				<view class="answerDetails-b-c-r">
					<u-rate :count="5" v-model="score" size="20"></u-rate>
					<view class="answerDetails-b-c-r-c" @click="submit">提交</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import VoicePlayback from "@/components/VoicePlayback/index.vue"
	import { MESSAGETYPE, SCORESTATE } from "@/emit/index.js"
	export default {
		components: {
			VoicePlayback
		},
		data() {
			return {
				id: '',
				info: {},
				score: 5
			}
		},
		computed: {
			// 是否已解答
			isAnswered() {
				return this.isVoiceReply || this.isTextReply;
			},
			// 是否文字回复
			isTextReply() {
				const { answer_type } = this.info;
				return answer_type === MESSAGETYPE.TEXTANSWER
			},
			// 是否语音回复
			isVoiceReply() {
				const { answer_type } = this.info;
				return answer_type === MESSAGETYPE.VOICEANSWERS
			},
			//语音回复数据
			voiceReplyData() {
				let obj = null;
				if(this.isVoiceReply) {
					obj = JSON.parse(this.info.answer);
				}
				return obj
			},
			// 是否未评分
			isUnRated() {
				return this.info.is_score === SCORESTATE.UNRATED 
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getInfo();
		},
		methods: {
			getInfo() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$service.P_get('/question/info', {
					id: this.id
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.info = res.data;
						if(typeof res.data.imgs === 'string') {
							this.info.imgs = res.data.imgs.split(',');
						}
						
						
						this.$nextTick(() => {
							if(this.isVoiceReply) {
								this.$refs.voicePlayback.init(this.voiceReplyData)
							}
						})
						
					}else {
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取数据失败'
							})
						}
					}
					
					
				}).catch(e => {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '获取数据失败，请检查您的网络连接'
					})
				})
			},
			seeImg(urls, current = 0) {
				uni.previewImage({
				    current, // 当前显示图片的链接，不填则默认为 urls 的第一张图片
				    urls // 需要预览的图片链接列表
				})
			},
			// 提交评分
			submit() {
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.$service.P_get('/question/score', {
					id: this.id,
					score: this.score
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						
						uni.showToast({
							icon:'none',
							title:'保存成功'
						})
						this.info.is_score = SCORESTATE.RATED;
					}else {
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取数据失败'
							})
						}
					}
					
					
				}).catch(e => {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '获取数据失败，请检查您的网络连接'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.answerDetails{
	padding: 20rpx 25rpx 140rpx;
	.answerDetails-b{
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		width: 100%;
		padding-bottom: calc(env(safe-area-inset-bottom));
		background: #FFFFFF;
		.answerDetails-b-c{
			height: 120rpx;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			.answerDetails-b-c-l{
				text-align: center;
				position: relative;
				padding-right: 29rpx;
				flex-shrink: 0;
				&:before{
					content: '';
					position: absolute;
					height: 58rpx;
					border-left: #E6E6E6 solid 1rpx;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
				.answerDetails-b-c-l-1{
					font-size: 24rpx;
					color: #979797;
				}
				.answerDetails-b-c-l-2{
					font-size: 26rpx;
					color: #323232;
					margin-top: 5rpx;
				}
			}
			.answerDetails-b-c-r{
				flex-grow: 1;
				display: flex;
				justify-content: space-between;
				padding-left: 65rpx;
				.answerDetails-b-c-r-c{
					height: 88rpx;
					line-height: 88rpx;
					color: #FFFFFF;
					padding: 0 55rpx;
					background: #2D81FF;
					border-radius: 200rpx;
				}
			}
		}
	}
	.answerDetails-c{
		padding: 30rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		.myQuestion-2-i-1{
			display: flex;
			align-items: center;
			.myQuestion-2-i-1-l{
				.myQuestion-2-i-1-l-i{
					height: 60rpx;
					width: 60rpx;
					border-radius: 50%;
					overflow: hidden;
				}
			}
			.myQuestion-2-i-1-r{
				margin-left: 30rpx;
				.myQuestion-2-i-1-r-1{
					font-size: 26rpx;
					color: #323232;
					font-weight: bold;
				}
				.myQuestion-2-i-1-r-2{
					font-size: 24rpx;
					color: #979797;
					margin-top: 5rpx;
				}
			}
		}
		.myQuestion-2-i-2{
			line-height: 39rpx;
			color: #323232;
			font-size: 26rpx;
			margin: 30rpx 0;
		}
		.myQuestion-2-i-3{
			padding-top: 33rpx;
			.myQuestion-2-i-3-c{
				border-radius: 20rpx;
				background: #F5F6F8;
				padding: 30rpx;
				.myQuestion-2-i-3-c-1{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.myQuestion-2-i-3-c-1-l{
						display: flex;
						align-items: center;
						.myQuestion-2-i-3-c-1-l-i{
							height: 48rpx;
							width: 48rpx;
							border-radius: 200rpx;
						}
						.myQuestion-2-i-3-c-1-l-t{
							font-size: 26rpx;
							margin-left: 19rpx;
							color: #323232;
						}
					}
					.myQuestion-2-i-3-c-1-r{
						font-size: 24rpx;
						color: #979797;
					}
				}
				.myQuestion-2-i-3-c-2{
					line-height: 39rpx;
					font-size: 26rpx;
					color: #323232;
					margin-top: 28rpx;
				}
			}
		}
		.myQuestion-2-i-4{
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-row-gap: 20rpx;
			grid-column-gap: 20rpx;
			margin-top: 30rpx;
		}
		.myQuestion-2-i-5{
			border-top: 1rpx #F3F3F7 dashed;
			margin: 20rpx 0;
		}
	}
}
</style>