<template>
	<view class="con_middle">
		<view class="con_middle_detail">
			<!-- 头部信息 -->
			<view class="con_middle_detail_top">
				<view class="con_middle_detail_top_title" @click="navTo">所有课件</view>
				<image mode="heightFix" src="@/static/images/right.png"></image>
				<view class="con_middle_detail_top_name" :title="info.caseName">{{info.caseName}}</view>
			</view>
			<view class="con_middle_detail_doctor">所属医生：
				<view class="con_middle_detail_doctor_text">
					{{info.userName || ''}}
				</view>
			</view>
			<view class="con_middle_detail_doctor">所属项目：
				<view class="con_middle_detail_doctor_text">
					{{info.projectName || ''}}
				</view>
			</view>
			<!-- 头部信息 -->

			<!-- 文件列表 -->
			<view class="con_middle_detail_middle" v-if="info.caseFileList&& info.caseFileList.length > 0">
				<view class="con_middle_detail_middle_item" v-for="(item,index) in info.caseFileList" :key="index">
					<view class="con_middle_detail_middle_item_left" @click="handleFileUrl(item)">
						<image mode="scaleToFill" v-if="item.type == 'ppt'" src="@/static/images/file/pptIcon.png">
						</image>
						<image mode="scaleToFill" v-if="item.type == 'png'" src="@/static/images/file/imgIcon.png">
						</image>
						<image mode="scaleToFill" v-if="item.type == 'doc'" src="@/static/images/file/docIcon.png">
						</image>
						<image mode="scaleToFill" v-if="item.type == 'mp3'" src="@/static/images/file/mp3Icon.png">
						</image>
						<image mode="scaleToFill" v-if="item.type == 'pdf'" src="@/static/images/file/pdfIcon.png">
						</image>
						<image mode="scaleToFill" v-if="item.type == 'txt'" src="@/static/images/file/txtIcon.png">
						</image>
						<image mode="scaleToFill" v-if="item.type == 'video'" src="@/static/images/file/videoIcon.png">
						</image>
						<view class="con_middle_detail_middle_item_left_name">{{item.name}}</view>
					</view>
					<view class="con_middle_detail_middle_item_right" @click="downloadFile(item)">
						<img src="@/static/images/download.svg" class="icons-custom" />
					</view>
				</view>
			</view>
			<!-- 文件列表 -->

			<!-- 专家点评 -->
			<view class="expert" v-if="info.commentAuditStatus == 2 && info.commentUseName && info.commentContent">
				<view class="expert_title">专家点评</view>
				<view class="flex" style="margin-top: 5.21rpx;">
					<image src="../../../static/images/profile.png" style="width: 20.83rpx;height: 20.83rpx;"></image>
					<view class="flex flex-direction justify-between" style="margin-left: 2.6rpx;padding: 2.6rpx;">
						<view class="flex align-center">
							<view style="font-size: 6.77rpx;font-weight: 600;">{{ info.commentUseName }}</view>
							<view style="margin: 0 2.6rpx;font-size: 6.25rpx;font-weight: 400;color: #9c9c9c;">|</view>
							<view style="font-size: 6.25rpx;font-weight: 500;">{{ info.commentUseTitle }}</view>
						</view>
						<view style="font-size: 6.25rpx;color: #9c9c9c;">{{ info.commentUseCompany }}</view>
					</view>
				</view>

				<view class="bubble top">
					<view class="expert_score flex align-center" v-if="info.commentScore">
						<image src="../../../static/images/score.png"></image>
						<view style="font-weight: 600;margin-left: 5.21rpx;">{{ info.commentScore }}</view>
					</view>
					<view style="margin-top: 5.21rpx;font-size: 7.81rpx;">{{ info.commentContent }}</view>
				</view>
			</view>
			<!-- 专家点评 -->

			<!-- 美化文件列表 -->
			<view class="con_middle_detail_middle con_middle_detail_middle2"
				v-if="info.caseBeautifyFileList&&info.caseBeautifyFileList.length>0">
				<view class="con_middle_detail_middle_title">美化课件</view>
				<view class="con_middle_detail_middle_item con_middle_detail_middle_item2"
					v-for="(item,index) in info.caseBeautifyFileList" :key="index">
					<view class="con_middle_detail_middle_item_left" @click="handleFileUrl(item)">
						<image mode="scaleToFill" v-if="item.type == 'ppt'" src="@/static/images/file/pptIcon.png">
						</image>
						<image mode="scaleToFill" v-if="item.type == 'png'" src="@/static/images/file/imgIcon.png">
						</image>
						<image mode="scaleToFill" v-if="item.type == 'doc'" src="@/static/images/file/docIcon.png">
						</image>
						<image mode="scaleToFill" v-if="item.type == 'mp3'" src="@/static/images/file/mp3Icon.png">
						</image>
						<image mode="scaleToFill" v-if="item.type == 'pdf'" src="@/static/images/file/pdfIcon.png">
						</image>
						<image mode="scaleToFill" v-if="item.type == 'txt'" src="@/static/images/file/txtIcon.png">
						</image>
						<image mode="scaleToFill" v-if="item.type == 'video'" src="@/static/images/file/videoIcon.png">
						</image>
						<view class="con_middle_detail_middle_item_left_name">{{item.name}}</view>
					</view>
					<view class="con_middle_detail_middle_item_right" @click="downloadFile(item)">
						<img src="@/static/images/download.svg" class="icons-custom" />
					</view>
				</view>
			</view>
			<!-- 美化文件列表 -->
		</view>
		<view class="con_middle_bottom" v-if="info.schedule">
			<!-- 审核状态 -->
			<view class="con_middle_bottom_steps stepsCon">
				<view class="stepsCon_item" v-for="(item,index) in stepsArr" :key="index">
					<view class="stepsCon_item_top">
						<view class="stepsCon_item_top_line" :class="{grayBg:item.type == 'none'}" v-if="index != 0">
						</view>
						<image mode="heightFix" v-if="item.type == 'pass'" src="@/static/images/status/pass.png">
						</image>
						<image mode="heightFix" v-if="item.type == 'in'" src="@/static/images/status/clock-circle.png">
						</image>
						<image mode="heightFix" v-if="item.type == 'fail'"
							src="@/static/images/status/exclamation-circle.png"></image>
						<image mode="heightFix" v-if="item.type == 'none'"
							src="@/static/images/status/uncheck-circle.png"></image>
						<image mode="heightFix" v-if="item.type == 'finish'"
							src="@/static/images/status/check-circle.png"></image>
					</view>
					<view class="stepsCon_item_title"
						:class="[item.type == 'in' ? 'orange' : item.type == 'fail' ? 'red' : item.type == 'none' ? 'gray' : item.type == 'finish' ? 'blueText' : '' ]">
						{{item.title}}
					</view>
				</view>
			</view>
			<!-- 审核状态 -->

			<!-- 审核提示信息 -->
			<view class="con_middle_bottom_text"
				v-if="info.schedule == 1 || info.schedule == 4 
			|| (info.schedule == 2 && (info.caseAnalysisStatus === null || info.caseAnalysisStatus == 1) && caseAnalysisTimes > 0)">{{msg.text}}</view>
			<!-- 审核提示信息 -->

			<!-- 审核通过 -->
			<view class="con_middle_bottom_con" v-if="(info.schedule == 4 || info.schedule == 2) && isDoctor">
				<template
					v-if="(info.caseAnalysisStatus === null || info.caseAnalysisStatus == 1) && caseAnalysisTimes > 0">
					<view class="con_middle_bottom_con_btn" @click="checkAnalysis(1)">查看示例</view>
					<view class="con_middle_bottom_con_btn blue bg-custom" @click="applyAnalysis">申请解读</view>
				</template>
				<template v-else-if="info.caseAnalysisStatus == 3">
					<view class="con_middle_bottom_con_check blue bg-custom" @click="checkAnalysis(0)">查看解读报告</view>
				</template>
			</view>
			<!-- 审核通过 -->

			<!-- 审核不通过 -->
			<view class="con_middle_bottom_con" v-if="info.schedule == 3">
				<view class="con_middle_bottom_con_left" @click="showRefuseReason(msg.des)">
					<view class="con_middle_bottom_con_left_text">{{msg.text}}</view>
					<view class="con_middle_bottom_con_left_text" :title="msg.des">原因：{{msg.des}}</view>
				</view>
				<view class="con_middle_bottom_con_btn con_middle_bottom_con_btn2 blue bg-custom" @click="reUpload">重新上传
				</view>
			</view>
			<!-- 审核不通过 -->

		</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		getCaseDetail,
		applyAnalysis,
		putBeautifyFileDownload,
		getDocUrl
	} from "@/api/case/case"
	import {
		getTypeName
	} from '@/utils/common'
	export default {
		props: {
			dataSource: {
				type: Object,
				default: {}
			},
			steps: {
				type: Array,
				default: []
			},
			isDoctor: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				msg: {}, // 审核状态信息
				msgArr: [{
						text: '课件上传成功，已通知工作人员审核，请耐心等待',
						value: 1
					},
					{
						text: '已审核通过，可申请解读，生成课件结构化解读结果',
						value: 2
					},
					{
						text: '审核未通过',
						des: '原因：上传文件有误',
						value: 3
					},
					{
						text: '课件已美化，请查看美化结果，可在线预览或下载美化课件PPT',
						value: 4
					}
				],
				stepsArr: [], // 审核状态
				info: {}, // 我的信息
				userName: '',
				id: '',
				name: '',
				caseAnalysisTimes: 0, //解析次数
			}
		},
		created() {
			this.$store.dispatch('GetInfo').then(res => {
				this.caseAnalysisTimes = res.data.user.caseAnalysisTimes || 0
				this.userName = res.data.user.nickName || ''
			})
		},
		watch: {
			dataSource: {
				handler(newVal, oldVal) {
					let data = this.dataSource
					this.name = data.name
					this.id = data.id
					this.getDetail()
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			// 获取详情
			getDetail() {
				if (!this.id) {
					return
				}
				getCaseDetail(this.id).then(res => {
					let data = res.data
					if (data.beautifyStatus == '1') {
						data.schedule = 4
					} else {
						switch (data.checkStatus) { // 0未审核 1通过 2拒绝
							case '0':
								data.schedule = 1
								break
							case '1':
								data.schedule = 2
								break
							case '2':
								data.schedule = 3
								break
						}
					}
					if (data.caseFileList) {
						data.caseFileList.forEach(item => {
							item.type = getTypeName(item.name)
						})
					}
					if (data.caseBeautifyFileList) {
						data.caseBeautifyFileList.forEach(item => {
							item.type = getTypeName(item.name)
						})
					}
					this.info = data
					this.getStatus(this.info.schedule)
				}).catch((err) => {
					let pages = getCurrentPages();
					let currentPage = pages[pages.length - 1];
					let tenantId = (currentPage.options.tenantId && currentPage.options.tenantId == "undefined") ?
						uni.getStorageSync("tenantId") : currentPage.options.tenantId
					this.$store.dispatch('LogOut').then(res => {
						uni.reLaunch({
							url: `/pages/index?tenantId=${tenantId}`
						})
					})
				})
			},
			// 获取状态
			getStatus(schedule) {
				if (schedule == 1) {
					// 审核中
					this.stepsArr = [{
							title: '上传成功',
							type: 'pass'
						},
						{
							title: '审核中',
							type: 'in'
						},
						{
							title: '审核通过',
							type: 'none'
						}
					]
				} else if (schedule == 2) {
					// 审核通过
					this.stepsArr = [{
							title: '上传成功',
							type: 'pass'
						},
						{
							title: '审核中',
							type: 'pass'
						},
						{
							title: '审核通过',
							type: 'pass'
						}
					]
					// 报告解析
					let step = this.getCaseAnalysisStatus(this.info, 1)
					if (step) {
						this.stepsArr.push(step)
					}
				} else if (schedule == 3) {
					// 审核不通过
					this.stepsArr = [{
							title: '上传成功',
							type: 'pass'
						},
						{
							title: '审核中',
							type: 'pass'
						},
						{
							title: '未通过',
							type: 'fail'
						}
					]
					this.msgArr[2].des = this.info.rejectReason
				} else if (schedule == 4) {
					// 已美化
					this.stepsArr = [{
							title: '上传成功',
							type: 'pass'
						},
						{
							title: '审核中',
							type: 'pass'
						},
						{
							title: '审核通过',
							type: 'pass'
						},
						{
							title: '已美化',
							type: 'finish'
						}
					]
					let step = this.getCaseAnalysisStatus(this.info, 3)
					if (step) {
						this.stepsArr.push(step)
					}
				}
				this.msg = this.msgArr.filter(item => item.value == this.info.schedule)[0]
			},
			/**
			 * 课件解读状态
			 * @param info {Object} 课件数据
			 * @param msgIdx {Number} 提交消息下标数组
			 * @return {null | Object}
			 */
			getCaseAnalysisStatus(info, msgIdx) {
				let analysisStatus = null
				if (info.caseAnalysisStatus !== null) {
					analysisStatus = {
						title: "解读审核中",
						type: 'in'
					}
					let analysMsg = "已申请解读，请耐心等待解读结果"
					if (info.caseAnalysisStatus == 1) {
						analysisStatus = {
							title: '无法解读',
							type: 'fail'
						}
						analysMsg = "课件未满足解读条件，无法解读"
					} else if (info.caseAnalysisStatus == 2) {
						analysisStatus = {
							title: '审核通过',
							type: 'pass'
						}
						analysMsg = "审核已通过，请耐心等待解读结果"
					} else if (info.caseAnalysisStatus == 3) {
						analysisStatus = {
							title: '解读完成',
							type: 'pass'
						}
						analysMsg = "课件已完成解读，可查看解读结果"
					}
					this.msgArr[msgIdx].text = analysMsg
					this.msgArr[msgIdx].desc = this.info.rejectReason
				}
				return analysisStatus
			},
			getDictValue(data, value) {
				let str = data.filter(item => item.key == value)[0]
				return str
			},
			// 文件下载
			downloadFile(item) {
				let url = item.url.replace('http', 'https')
				uni.request({
					url: url, //获取文件流的请求路径
					responseType: "arraybuffer",
					success: (response) => {
						uni.hideLoading();
						if (!response) {
							uni.showToast({
								title: "下载失败",
								duration: 2000
							});
							return
						}
						let blob = new Blob([response.data])
						let downloadElement = document.createElement("a")
						let href = window.URL.createObjectURL(blob) //创建下载的链接
						downloadElement.href = href
						downloadElement.download = item.name //下载后文件名
						document.body.appendChild(downloadElement)
						downloadElement.click() //点击下载
						// 美化文件下载状态
						this.beautifyFileDownload()
						// uni.showToast({
						// 	title: "下载成功",
						// 	duration: 2000
						// })
						document.body.removeChild(downloadElement) //下载完成移除元素
						window.URL.revokeObjectURL(href) //释放掉blob对象
					}
				})
			},

			// 通知下载数据
			beautifyFileDownload() {
				let data = {
					id: this.id,
					beautifyFileDownload: "1"
				}
				putBeautifyFileDownload(data)
				/*.then(res=>{
				  console.log(res,"请求成功")
				})*/
			},


			// 文件预览
			handleFileUrl(item) {
				let url = item.url
				let name = item.name
				let fileType = url.substring(url.lastIndexOf('.') + 1).toUpperCase();
				if (fileType == 'PDF') {
					let newurl = encodeURIComponent(url.replace('http','https'))
					let pdfUrl = '/static/html/web/viewer.html?file=' + newurl
					this.$tab.navigateTo(`/pages/phone/common/webview/index?title=${name}&url=${pdfUrl}&type=PDF`)
				} else if (fileType == 'DOC' || fileType == 'DOCX' || fileType == 'PPT' || fileType == 'PPTX' ||
					fileType == 'XLS' || fileType == 'XLSX') {
					// let newUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + url
					//XDOC文档预览服务地址
					// let newUrl = "https://view.xdocin.com/view?src=" + encodeURIComponent(url)
					// this.$tab.navigateTo(`/pages/phone/common/webview/index?title=${name}&url=${newUrl}`)
					
					// 新方式
					let that = this
					getDocUrl(item.ossId).then(res => {
						console.log('res==', res);
						if(res&&res.code == 200){
							let newUrl = res.data.url.replace('http','https')
							uni.setStorageSync('FileUrl', newUrl)
							that.$tab.navigateTo(`/pages/phone/common/webview/index?title=${name}&type=OSS`)
						}
					}).catch(err => {
					
					})
				} else if (fileType == 'JPG' || fileType == 'PNG' || fileType == 'MP4' || fileType == 'AVI' || fileType ==
					'TXT' || fileType == 'MP3') {
					this.$tab.navigateTo(`/pages/phone/common/webview/index?title=${name}&url=${url}&type=${fileType}`)
				} else {
					uni.$u.toast('暂不支持预览此类型文件')
				}
			},
			// 路由跳转
			navTo() {
				this.$emit('goHome', true)
				uni.setStorageSync('isDetail', false)
			},
			reUpload() {
				this.$emit('edit', this.info)
			},
			// 展示拒绝原因
			showRefuseReason(des) {
				if (des.trim()) {
					uni.showModal({
						title: "原因",
						content: des,
						showCancel: false,
					})
				}
			},
			applyAnalysis() {
				if (this.caseAnalysisTimes == 0) {
					uni.$u.toast('没有解析次数')
					return
				} else if (this.info.caseAnalysisStatus == 0 || this.info.caseAnalysisStatus == 2) {
					uni.$u.toast('已提交解读申请')
					return
				}
				let params = {
					id: this.info.id,
					caseAnalysisStatus: '0'
				}
				applyAnalysis(params).then(res => {
					console.log('res==', res);
					if (res.code == 200) {
						this.getDetail()
					} else {
						uni.$u.toast(res.msg)
					}
				}).catch(err => {

				})
			},
			// 查看报告解读
			// isExample是否查看示例：0：否；1：是
			checkAnalysis(isExample) {
				uni.navigateTo({
					url: `/pages/pc/index/report?id=${this.id}&name=${this.name}&isExample=${isExample}`
				})
			},
			download(item) {
				uni.request({
					url: item.url, //获取文件流的请求路径
					responseType: "arraybuffer",
					success: (response) => {
						uni.hideLoading();
						if (!response) {
							uni.showToast({
								title: "下载失败",
								duration: 2000
							});
							return
						}
						let blob = new Blob([response.data])
						let downloadElement = document.createElement("a")
						let href = window.URL.createObjectURL(blob) //创建下载的链接
						downloadElement.href = href
						downloadElement.download = item.name //下载后文件名
						document.body.appendChild(downloadElement)
						downloadElement.click() //点击下载
						// uni.showToast({
						// 	title: "下载成功",
						// 	duration: 2000
						// })
						document.body.removeChild(downloadElement) //下载完成移除元素
						window.URL.revokeObjectURL(href) //释放掉blob对象
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.con_middle {
		background-color: #fff;
		width: 100%;
		height: calc(100vh - 35.42rpx);
		overflow: auto;

		.con_middle_detail {
			width: 74%;
			margin-left: 13%;
			padding-top: 11.46rpx;
			padding-bottom: 89.58rpx;
			height: calc(100% - 101.04rpx);
			overflow: auto;
			background-color: #fff;
			position: relative;

			&_top {
				display: flex;
				align-items: center;
				height: 16.67rpx;

				&_title {
					color: #86909C;
					font-size: 12.5rpx;
					font-weight: 500;
					line-height: 16.67rpx;
					cursor: pointer;
					white-space: nowrap;
				}

				&_name {
					color: #1D2129;
					font-size: 12.5rpx;
					font-weight: 500;
					line-height: 16.67rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					/* 133.333% */
				}

				uni-image {
					width: 11.46rpx;
					height: 7.29rpx;
					margin-left: 2.08rpx;
					margin-right: 2.08rpx;
				}
			}

			&_doctor {
				color: #86909C;
				font-size: 7.29rpx;
				font-weight: 400;
				line-height: 11.46rpx;
				/* 157.143% */
				margin-top: 4.17rpx;
				display: flex;
				align-items: center;

				&_text {
					margin-left: 2.08rpx;
				}
			}

			&_middle {
				width: 100%;

				&_title {
					color: #1D2129;
					font-size: 10.42rpx;
					font-weight: 500;
					line-height: 14.58rpx;
					/* 140% */
					margin-bottom: 8.33rpx;
					margin-top: 8.33rpx;
				}

				&_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 4.17rpx 0;

					background: transparent;
					padding: 5.21rpx 8.33rpx;
					margin-left: -8.33rpx;
					width: calc(100% + 17.71rpx);
					border-radius: 2.08rpx;
					cursor: pointer;

					&_left {
						width: calc(100% - 15rpx);
						display: flex;
						align-items: center;

						&_name {
							width: calc(100% - 22rpx);
							margin-left: 2.08rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;

							color: #4E5969;
							font-size: 7.81rpx;
							font-weight: 400;
							line-height: 12.5rpx;
							/* 160% */
						}

						uni-image {
							width: 18.75rpx;
							height: 18.75rpx;
						}
					}

					&_right {
						width: 10.42rpx;
						height: 10.42rpx;
						cursor: pointer;
						display: flex;
						align-items: center;
						justify-content: center;
						overflow: hidden;
					}
				}

				&_item2 {
					background: linear-gradient(91deg, #EBF6FF 0%, #FFFDF2 99.85%);
					padding: 5.21rpx 8.33rpx;
					margin-left: -8.33rpx;
					width: calc(100% + 17.71rpx);
					border-radius: 2.08rpx;
				}
			}

			.expert {
				padding: 5.21rpx;

				&_title {
					font-size: 8.33rpx;
					font-weight: 600;
				}

				&_score {
					margin-top: 2.6rpx;
					font-size: 7.29rpx;

					image {
						width: 20.83rpx;
						height: 10.42rpx;
					}
				}
			}
		}

		&_bottom {
			// height: 89.58rpx;
			padding: 6.25rpx 0 18.75rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			border-top: 0.52rpx solid #E5E6EB;
			background-color: #fff;
			z-index: 5;

			.stepsCon {
				display: flex;
				align-items: center;
				margin-bottom: 17.71rpx;

				&_item {
					position: relative;

					&_top {
						display: flex;
						align-items: center;

						&_line {
							background: #00B42A;
							width: 51.04rpx;
							height: 0.52rpx;
							margin-left: 5.21rpx;
							margin-right: 5.21rpx;
						}

						uni-image {
							width: 8.33rpx;
							height: 8.33rpx;
						}
					}

					&_title {
						color: #00B42A;
						text-align: center;
						font-size: 6.25rpx;
						font-weight: 400;
						line-height: 10.42rpx;
						/* 166.667% */
						width: 35rpx;
						position: absolute;
						top: 8.33rpx;
						right: -13rpx;
					}
				}
			}

			&_text {
				color: #86909C;
				font-size: 6.25rpx;
				font-weight: 400;
				line-height: 10.42rpx;
				/* 166.667% */
			}

			&_con {
				margin-top: 7.29rpx;
				display: flex;
				align-items: center;
				width: 179.17rpx;
				justify-content: space-between;

				&_btn,
				&_check {
					display: flex;
					width: 87.5rpx;
					height: 20.83rpx;
					line-height: 20.83rpx;
					// padding: 0 8.33rpx;
					text-align: center;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					border-radius: 2.08rpx;
					background: #F2F3F5;

					font-size: 7.29rpx;
					font-weight: 400;
					line-height: 11.46rpx;
					/* 157.143% */
					color: #4E5969;
				}

				&_check {
					width: 100%;
				}

				&_btn2 {
					width: 52.08rpx;
				}

				.blue {
					color: #fff;
				}

				&_left {
					flex: 1;
					width: calc(100% - 90rpx);

					&_text {
						color: #86909C;
						font-size: 6.25rpx;
						font-weight: 400;
						line-height: 10.42rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						/* 166.667% */
					}
				}
			}
		}

	}

	.orange {
		color: #FF7D00 !important;
	}

	.gray {
		color: #86909C !important;
	}

	.red {
		color: #F53F3F !important;
	}

	.blueText {
		color: #165DFF !important;
	}

	.grayBg {
		background-color: #86909C !important;
	}

	.bubble {
		position: relative;
		background-color: #F7F8FA;
		margin-top: 10.42rpx;
		border-radius: 5.21rpx;
		padding: 2.6rpx;
	}

	.bubble:after {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border: 5.21rpx solid;
	}

	.top:after {
		color: white;
		border-bottom-color: #F7F8FA;
		left: 15px;
		bottom: 100%;

	}
</style>