heshanApp/pages/agent/doctorDetail.vue

<template>
	<view class="content es-pt-34">
		<view class="info">
			<view :style="{ height: statusBarHeight + 44 + 'px' }"></view>
			<view style="position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background-color: #fff">
				<view :style="{ height: statusBarHeight + 'px' }"></view>
				<view class="u-f-ajc u-f-jsb" style="height: 44px; padding: 0 24rpx">
					<view class="u-f-ajc">
						<view class="es-mr-14" @tap="goBack">
							<image class="es-icon-64" src="/static/image/agent/back_black_icon.png" mode=""></image>
						</view>
						<view class="es-mr-24 avatar es-br-ban u-f-ajc">
					<image class="es-icon-60 es-br-ban" :src="data.avatar || '/static/image/hall/my_heads_icon.png'" mode=""></image>
						</view>
						<view class="">
							<view class="u-f-ajc">
								<view class="es-fs-28 es-c-22 es-fw-600 es-mr-12 u-f-ajc">
									{{ data.doctorName || '' }}
								</view>
								<view class="u-f-ajc">
									<image class="es-icon-36" src="/static/image/agent/ai_icon.png" mode=""></image>
								</view>
							</view>
							<view class="es-c-99 es-fs-24">
								{{ data.deptName || '' }}
							</view>
						</view>
					</view>
					<view class="">
						<!-- <image class="es-icon-48 es-mr-32" src="/static/image/agent/dialogue_icom.png" mode=""> -->
						<!-- </image> -->
						<image @tap="doShare(data.doctorName || '')" class="es-icon-48" src="/static/image/agent/share_icom.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="es-fw es-c-22 es-fs-48 es-mt-44">{{ data.doctorName || '' }}</view>
			<view class="es-mt-8 es-c-75 es-fs-24" v-if="data.deptName">{{ data.deptName || '' }} · 主任{{ data.doctorType && data.doctorType == 2 ? '药师' : '医师' }}</view>

			<!-- 医生智能体 -->
			<view class="es-mt-26 agentBox">
				<view class="agentBox-avatar">
					<image class="es-icon-60" :src="data.sex == 2 ? '/static/image/agent/ai_doctor.png' : '/static/image/agent/ai_doctor2.png'" mode="top"></image>
				</view>
				<view class="es-fw es-c-33 es-fs-40">医生智能体</view>
				<view class="es-mt-40 es-c-22 es-fs-28 textTwo">
					{{ data.reminderWords || '' }}
				</view>
				<view class="es-mt-40 u-f-ajc u-f-jsb">
					<view class="u-f">
						<view class="u-f-ajc" @tap="copyContent(data.reminderWords)">
							<image class="es-icon-32 es-mr-28" src="/static/image/agent/copy_icon.png" mode=""></image>
						</view>
						<!-- <view class="u-f-ajc es-mr-28">
							<u-icon name="thumb-up" color="#222222" size="38rpx"></u-icon>
						</view>
						<view class="u-f-ajc es-mr-28">
							<u-icon name="thumb-down" color="#222222" size="38rpx"></u-icon>
						</view> -->
						<view
							class="u-f-ajc"
							@tap="
								doShare(
									`您好!我是${data.deptName || ''}${data.doctorName || ''}医生智能体，我的知识和经验都来自多年的临床实践。擅长${
										data.speciality || ''
									}。今天有什么可以帮您的吗?`
								)
							"
						>
							<image class="es-icon-32" src="/static/image/agent/share_icom.png" mode=""></image>
						</view>
					</view>
					<view class="es-c-99 es-fs-24">AI生成仅供参考</view>
				</view>
			</view>
		</view>
		<!-- 消息 -->
		<view class="msgBox">
			<template v-for="(item, index) in msgs">
				<!-- <view class="msgBox-item" v-if="item.type == 1">
					<view class="es-mt-40 es-fs-28 es-c-22 leftMsg es-bc-white">
						{{item.content}}
					</view>
				</view> -->
				<view class="answer es-mt-40 es-bg-white" v-if="item.type == 1">
					<view class="es-c-22 es-fs-32">
						{{ item.content }}
					</view>
					<view class="es-fs-24 es-mt-30 es-c-99">内容由AI生成，非诊疗意见，不适请及时就医</view>
					<view class="line"></view>
					<view class="es-mt-40 u-f-ajc u-f-jsb">
						<view class="u-f">
							<view class="u-f-ajc" @tap="copyContent(item.content)">
								<image class="es-icon-32 es-mr-28" src="/static/image/agent/copy_icon.png" mode=""></image>
							</view>
							<!-- <view class="u-f-ajc es-mr-28">
								<u-icon name="thumb-up" color="#222222" size="38rpx"></u-icon>
							</view>
							<view class="u-f-ajc es-mr-28">
								<u-icon name="thumb-down" color="#222222" size="38rpx"></u-icon>
							</view> -->
						</view>
						<view class="es-c-99 es-fs-24"></view>
					</view>
				</view>

				<view class="msgBox-item jcEnd" v-if="item.type == 2">
					<view class="es-fs-32 es-c-white rightMsg es-mt-40">
						{{ item.content }}
					</view>
				</view>
			</template>
			<!-- <view class="msgBox-item jcEnd" v-if="rewardDoctor==1">
				<view class="es-fs-32 es-c-white rightMsg es-mt-40">
					打赏医生
				</view>
			</view> -->
		</view>

		<view class="footerBox">
			<view class="u-f">
				<view class="u-f-ajc footerBox-tips es-mr-16" v-for="(item, index) in problemArr" :key="index" @tap="sendFixedTextFun(item)">
					<view class="u-f-ajc es-mr-12">
						<image class="es-icon-32" :src="item.imageUrl" mode=""></image>
					</view>
					<view class="es-c-22 es-fs-26">
						{{ item.title }}
					</view>
				</view>
			</view>
			<view class="es-mt-24 footerBox-btn u-f-ajc u-f-jsb">
				<view class="es-mr-16 u-f-ajc u-f-jsb footerBox-btnBox">
					<!-- 	<view class="footerBox-btnBox-recording u-f-ajc">
						<image class="es-icon-48" src="/static/image/agent/voice_icon.png" mode=""></image>
					</view> -->
					<view class="es-h-100 es-wp-100">
						<input class="es-fs-32 sendInput" type="text" placeholder="健康问题尽管问我" v-model="inputText" @confirm="handleInput" placeholder-style="color:#999999" />
					</view>
					<!-- <view class="es-mr-26" @click="handleInput()">
						<image class="es-icon-48" src="/static/image/agent/expand_function_icon.png" mode=""></image>
					</view> -->
				</view>
				<view class="" :style="{ whiteSpace: 'nowrap' }" @click="handleInput()">发送</view>
				<!-- <view class="u-f-ajc" @tap="navTo('/pages/agent/doctorCommunication')">
					<image class="es-icon-100" src="/static/image/agent/phone_icon50.png" mode=""></image>
				</view> -->
			</view>
			<!-- <view class="chat_action_bar">
				<u-row class="action_row">
					<u-col v-for="item in actionList" :key="item.idx" @click="actionClick(item)" span="3">
						<view class="action_item">
							<image :src="item.icon" alt="" srcset="" />
							<text class="action_item_title">{{ item.title }}</text>
						</view>
					</u-col>
				</u-row>
			</view> -->
		</view>

		<u-popup :show="rewardShow" mode="center" round="32rpx" @close="rewardShow = false" :customStyle="{ margin: '0 24rpx' }">
			<rewardDoctor ref="rewardDoctorRef" :rewardDoctor="rewardDoctor" :doctorId="doctorId" @close="rewardShow = false" />
		</u-popup>
		<!-- 分享弹窗 -->
		<u-popup :show="showShare" @close="showShare = false">
			<share-box :shareItem="shareItem" @closeShare="showShare = false"></share-box>
		</u-popup>
		<u-popup :show="showPatient" mode="center" round="32rpx" @close="showPatient = false">
			<view class="chose-patient">
				<view class="title-box" @click="navTo('/pages/user/patient')" v-if="patient == null">
					<view class="title">选择就诊人</view>
					<view class="right">
						<text class="value">请点击添加</text>
						<image src="/static/images/arrow_gray.png" mode=""></image>
					</view>
				</view>
				<view class="patient" @click="navTo('/pages/user/patient')" v-if="patient != null">
					<view class="left">
						<view class="name">{{ patient.patientName }}</view>
						<view class="info">
							<text class="text" v-if="patient.sex == 1">男</text>
							<text class="text" v-if="patient.sex == 2">女</text>
							<text class="text">{{ $getAge(patient.birthday) }}岁</text>
							<text class="text">{{ $parseIdCard(patient.idCard) }}</text>
						</view>
					</view>
					<view class="right">
						<image src="/static/images/arrow_gray.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- <chating-footer ref="chatingFooterRef" :footerOutsideFlag="footerOutsideFlag"
			@scrollToBottom="scrollToBottom" /> -->
	</view>
</template>
<script>
import { aiChatListByUser } from '@/api/index.js';
import rewardDoctor from '@/pages/agent/components/rewardDoctor.vue';
import { getUserInfo } from '@/api/user';
import { ChatingFooterActionTypes, ContactChooseTypes, PageEvents } from '@/pages_im/constant/index.js';
import { premissionCheck } from '@/js_sdk/wa-permission/permission.js';
import ChatingFooter from '@/pages_im/pages/conversation/chating/components/ChatingFooter/index.vue';
import { getAiDoctorForDetails, getDictByKey, rewardAiDoctor } from '@/api/agent.js';
export default {
	components: {
		ChatingFooter,
		rewardDoctor
	},
	data() {
		return {
			data: {},
			problemArr: [
				{
					imageUrl: '/static/image/agent/health_counseling_icon.png',
					title: '健康咨询',
					url: '/pages/doctor/doctorDetails'
				},
				{
					imageUrl: '/static/image/agent/course_study_icon.png',
					title: '课程学习',
					url: '/pages/course/index?activeTab=1'
				},
				{
					imageUrl: '/static/image/agent/fanghua_coin_icon.png',
					title: '打赏医生'
				}
			],

			readFilePermission: false,
			actionList: [
				{
					idx: 0,
					type: ChatingFooterActionTypes.takePhoto,
					title: '拍照',
					icon: require('@/pages_im/static/images/chating_action_camera.png')
				},
				{
					idx: 1,
					type: ChatingFooterActionTypes.Album,
					title: '相册',
					icon: require('@/pages_im/static/images/chating_action_image.png')
				},
				{
					idx: 2,
					type: ChatingFooterActionTypes.Camera,
					title: '视频',
					icon: require('@/pages_im/static/images/take-photo.svg')
				},
				{
					idx: 3,
					type: ChatingFooterActionTypes.pickCamera,
					title: '录像',
					icon: require('@/pages_im/static/images/take-video.svg')
				}
			],
			rewardDoctor: 0,
			showShare: false,
			shareItem: {
				imageUrl: '',
				title: '',
				path: '',
				isMini: true
			},
			content: '',

			msgEnd: false, //发送信息
			isSocketOpen: false,
			msgs: [],
			inputText: '',
			isSend: true,
			showPatient: false,
			patient: null,
			userInfo: null,
			statusBarHeight: '',
			doctorId: null,
			rewardShow: false
		};
	},
	onLoad(options) {
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;
		if (options.doctorId != null) {
			this.doctorId = options.doctorId;
			this.problemArr[0].url = `/pages/doctor/doctorDetails?doctorId=${this.doctorId}&isAidoctor=1`;
			this.getDetailFun(this.doctorId);
		}
		let info = uni.getStorageSync('userInfo');
		this.userInfo = info && JSON.parse(info);

		this.getMsgList();
		this.initSocket();
		if (!this.patient) this.showPatient = true;
		uni.$on('refreshOrderPatient', (res) => {
			if (this.patient && this.patient.patientId == res.patientId) {
				return;
			}
			this.showPatient = false;
			this.msgEnd = false;
			this.patient = res;
			this.getMsgList();
		});
	},
	onShow() {},
	methods: {
		handleInput() {
			if (this.patient && this.patient.patientId) {
				if (this.msgEnd || !this.isSocketOpen) {
					// 重新发起会话
					this.initSocket();
				} else {
					this.sendMsg();
				}
			} else {
				uni.showToast({
					title: '请选择就诊人',
					icon: 'none'
				});
				if (!this.patient) this.showPatient = true;
			}
		},
		initSocket() {
			//创建一个socket连接
			var userId = this.userInfo.userId;
			var that = this;
			if (this.socket) {
				this.socket.close();
				this.socket = null;
			}
			this.socket = uni.connectSocket({
				url: getApp().globalData.wsUrl + '/app/webSocket/' + userId,
				multiple: true,
				success: (res) => {
					console.log('WebSocket连接已打开1！');
					that.isSocketOpen = true;
				},
				error: (res) => {
					console.log(res);
				}
			});
			this.socket.onMessage((res) => {
				console.log('收到消息', res);
				that.isSend = true;
				that.addMsg(1, res.data, null, 2);
			});
			//监听socket打开
			this.socket.onOpen(() => {
				console.log('WebSocket连接已打开2！', that.msgEnd);
				that.isSocketOpen = true;
				if (that.msgEnd) {
					// 重新发起会话
					that.isSend = true;
					that.sendMsg();
				}
			});
			//监听socket关闭
			this.socket.onClose(() => {
				that.isSocketOpen = false;
				that.socket = null;
				console.log('WebSocket连接已关闭！');
				that.msgEnd = true;
				that.scrollToBottom();
				if (that.msgTimes) {
					clearInterval(that.msgTimes);
					that.msgTimes = null;
				}
			});
			//监听socket错误
			this.socket.onError(() => {
				that.isSocketOpen = false;
				that.socket = null;
				that.msgEnd = true;
				console.log('WebSocket连接打开失败');
				if (that.msgTimes) {
					clearInterval(that.msgTimes);
					that.msgTimes = null;
				}
			});
		},
		sendMsg() {
			if (this.inputText == '') {
				return;
			}
			if (!this.isSend) {
				return;
			}
			if (this.isSocketOpen) {
				var userId = this.userInfo.userId;
				var data = {
					userId: this.userInfo.userId,
					doctorId: this.doctorId,
					message: this.inputText,
					sessionId: this.sessionId,
					patientId: this.patient.patientId
				};
				this.socket.send({
					data: JSON.stringify(data),
					success: () => {
						console.log('发送成功');
						this.addMsg(2, this.inputText, null, 1);
						this.addMsg(1, '正在思考中...', null, 1);
						this.isSend = false;
					},
					fail: () => {
						console.log('发送失败');
					}
				});
			}
		},
		addMsg(type, content, msg, inputType) {
			this.msgEnd = false;
			var obj = {
				type: type,
				content: content,
				msg: msg
			};
			if (inputType == 2) {
				this.msgs.splice(-1);
				this.msgs.push(obj);
			} else if (inputType == 1) {
				this.msgs.push(obj);
			}
			this.inputText = '';
			var that = this;
			this.scrollToBottom();
			//先确保清除了之前的消息定时器
			if (that.msgTimes) {
				clearInterval(that.msgTimes);
				that.msgTimes = null;
			}
			// 5分钟无消息自动结束
			that.msgTimes = setInterval(() => {
				console.log('5分钟无消息自动结束');
				clearInterval(that.msgTimes);
				if (this.socket != null) {
					this.socket.close();
				}
				that.msgTimes = null;
			}, 300000);
		},
		scrollToBottom() {
			this.$nextTick(() => {
				uni.createSelectorQuery()
					.in(this)
					.select('.content')
					.boundingClientRect((res) => {
						if (res) {
							uni.pageScrollTo({
								scrollTop: res.height,
								duration: 100
							});
						}
					})
					.exec();
			});
		},
		getMsgList() {
			if (this.patient && this.patient.patientId) {
				const that = this;
				const userId = this.userInfo.userId;
				const param = {
					doctorId: this.doctorId,
					userId: this.userInfo.userId,
					patientId: this.patient.patientId
				};
				aiChatListByUser(param)
					.then((res) => {
						// setTimeout(() => {
						// 	this.getHeight()
						// }, 200)
						let list = [];
						if (res.data && res.data.length > 0) {
							list = list.concat(res.data);
							that.sessionId = res.data && res.data.length > 0 ? res.data[0].sessionId : undefined;
						}
						list.forEach(function (value, index, array) {
							that.addMsg(value.msgType == 1 ? 2 : 1, value.content, value, 1);
						});
					})
					.catch(() => {});
			}
		},
		async requestPressmition() {
			let result = await premissionCheck('EXTERNAL_STORAGE');
			console.log('premission result:' + result);
			if (result == 1) {
				this.readFilePermission = true;
			}
		},
		async actionClick(action) {
			switch (action.type) {
				case ChatingFooterActionTypes.takePhoto:
					if (uni.$u.os() != 'ios') {
						this.requestPressmition();
						if (!this.readFilePermission) {
							return;
						}
					}
					this.$emit('prepareMediaMessage', {
						type: ChatingFooterActionTypes.Camera,
						index: 0
					});
					break;
				case ChatingFooterActionTypes.Album:
					if (uni.$u.os() != 'ios') {
						this.requestPressmition();
						if (!this.readFilePermission) {
							return;
						}
					}
					this.$emit('prepareMediaMessage', {
						type: ChatingFooterActionTypes.Album,
						index: 0
					});
					break;
				case ChatingFooterActionTypes.Camera:
					if (uni.$u.os() != 'ios') {
						this.requestPressmition();
						if (!this.readFilePermission) {
							return;
						}
					}
					this.$emit('prepareMediaMessage', {
						type: ChatingFooterActionTypes.Album,
						index: 1
					});
					break;
				case ChatingFooterActionTypes.pickCamera:
					if (uni.$u.os() != 'ios') {
						this.requestPressmition();
						if (!this.readFilePermission) {
							return;
						}
					}
					this.$emit('prepareMediaMessage', {
						type: ChatingFooterActionTypes.Camera,
						index: 1
					});
					break;
				case ChatingFooterActionTypes.Call:
					if (!this.$store.getters.storeCurrentConversation.groupID) {
						uni.$emit(PageEvents.RtcCall, 'audio');
						return;
					}
					IMSDK.asyncApi('signalingGetRoomByGroupID', IMSDK.uuid(), this.$store.getters.storeCurrentConversation.groupID).then(({ data }) => {
						if (data.invitation) {
							uni.showModal({
								title: '提示',
								content: '群通话进行中，是否直接加入？',
								confirmText: '确认',
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										callingModule.joinRoomLiveChat(data);
									}
								}
							});
						} else {
							uni.$emit(PageEvents.RtcCall, 'audio');
						}
					});
					break;
				case ChatingFooterActionTypes.VideoCall:
					if (!this.$store.getters.storeCurrentConversation.groupID) {
						uni.$emit(PageEvents.RtcCall, 'video');
						return;
					}
					IMSDK.asyncApi('signalingGetRoomByGroupID', IMSDK.uuid(), this.$store.getters.storeCurrentConversation.groupID).then(({ data }) => {
						if (data.invitation) {
							uni.showModal({
								title: '提示',
								content: '群通话进行中，是否直接加入？',
								confirmText: '确认',
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										callingModule.joinRoomLiveChat(data);
									}
								}
							});
						} else {
							uni.$emit(PageEvents.RtcCall, 'video');
						}
					});
					break;

				case ChatingFooterActionTypes.Order:
					{
						if (this.$companyUserIsLogin()) {
							uni.navigateTo({
								url: '/pages/company/inquiryOrderIMList?userId=' + this.userID
							});
						} else {
							uni.navigateTo({
								url: '/pages/store/inquiryOrderDetails?orderId=' + this.timStore.orderId
							});
						}
					}
					break;
				case ChatingFooterActionTypes.Follow:
					uni.navigateTo({
						url: '/pages/user/followDetails?followId=' + this.timStore.followId
					});
					break;
				case ChatingFooterActionTypes.StoreOrder:
					{
						if (this.$companyUserIsLogin()) {
							uni.navigateTo({
								url: '/pages/company/storeOrderList?userId=' + this.userID
							});
						} else {
							uni.navigateTo({
								url: '/pages/store/storeOrderDetail?orderId=' + this.timStore.orderId
							});
						}
					}
					break;

				case ChatingFooterActionTypes.Package: //疗法
					{
						if (this.$companyUserIsLogin()) {
							uni.navigateTo({
								url: '/pages/company/packageList?isIM=1'
							});
						}
					}
					break;

				case ChatingFooterActionTypes.CouponPackage:
					{
						if (this.$companyUserIsLogin()) {
							uni.navigateTo({
								url: '/pages/company/couponList?couponType=5&isIM=1'
							});
						}
					}
					break;

				case ChatingFooterActionTypes.InquirySelect:
					{
						if (this.$companyUserIsLogin()) {
							let companyId = uni.getStorageSync('companyId');
							let companyUserId = uni.getStorageSync('companyUserId');
							uni.navigateTo({
								url: '/pages/store/inquirySelectType?companyId=' + companyId + '&companyUserId=' + companyUserId + '&isIM=1'
							});
						}
					}
					break;

				case ChatingFooterActionTypes.Card:
					uni.navigateTo({
						url: `/pages_im/pages/common/contactChoose/index?type=${ContactChooseTypes.Card}`
					});
					break;

				case ChatingFooterActionTypes.File:
					if (uni.$u.os() != 'ios') {
						this.requestPressmition();
						if (!this.readFilePermission) {
							return;
						}
					}
					IMSDK.pickFile().then(async (path) => {
						console.log(path);
						const idx = path.lastIndexOf('/');
						const fileName = path.slice(idx + 1);
						const message = await IMSDK.asyncApi(IMMethods.CreateFileMessageFromFullPath, IMSDK.uuid(), {
							filePath: getPurePath(path),
							fileName
						});
						this.$emit('sendMessage', message);
					});
					break;
				case ChatingFooterActionTypes.Location:
					uni.chooseLocation({
						success: async (res) => {
							if (res) {
								const options = {
									name: res.name,
									latng: `${res.latitude},${res.longitude}`,
									addr: res.address,
									city: res.address,
									module: 'locationPicker',
									latitude: res.latitude,
									longitude: res.longitude,
									url: `https://restapi.amap.com/v3/staticmap?size=600*300&markers=-1,https://cache.amap.com/lbs/static/cuntom_marker1.png,0:${res.longitude},${res.latitude}&key=${AmapWebKey}`
								};
								const message = await IMSDK.asyncApi(IMMethods.CreateLocationMessage, IMSDK.uuid(), {
									description: JSON.stringify(options),
									longitude: res.longitude,
									latitude: res.latitude
								});
								this.$emit('sendMessage', message);
							} else {
								uni.$u.toast('获取位置失败');
							}
						},
						fail: ({ errMsg }) => {
							if (!errMsg.includes('cancel')) {
								uni.$u.toast('获取位置失败');
							}
						}
					});
					break;
				default:
					break;
			}
		},
		copyContent(content) {
			if (!content) return;
			uni.setClipboardData({
				data: content,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				},
				fail: () => {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		},
		sendFixedTextFun(e) {
			if (e.title == '健康咨询') {
				return uni.navigateTo({
					url: e.url
				});
			}
			if (e.title == '课程学习') {
				uni.setStorageSync('activeTabCourse', true);
				return uni.switchTab({
					url: e.url
				});
			}
			if (e.title == '打赏医生') {
				this.rewardDoctor = 1;
				this.rewardShow = true;
			}
		},
		async getDetailFun(doctorId) {
			const res = await getAiDoctorForDetails({
				doctorId
			});
			if (res.code == 200) {
				this.data = res.data;
			} else {
				uni.showToast({
					icon: 'none',
					title: res.msg
				});
			}
		},
		goBack() {
			uni.navigateBack();
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		doShare(title) {
			this.shareItem.title = title;
			this.shareItem.imageUrl = (this.doctor && this.doctor.avatar) || '';
			this.shareItem.compressImage = 1;
			this.shareItem.isMini = true;
			this.shareItem.path = '/pages_doctor/doctorDetails?doctorId=' + this.doctorId;
			let cdn = uni.getStorageSync('h5Path');
			this.shareItem.url = cdn + '/pages/doctor/doctorDetails?doctorId=' + this.doctorId;
			this.showShare = true;
		}
	}
};
</script>
<style scoped lang="scss">
.content {
	height: auto;
	min-height: 100vh;
	overflow-y: scroll;
	width: 100%;
	background: url('/static/image/agent/doctor-bg1.png') center top / 100% 50% no-repeat, url('/static/image/agent/doctor-bg2.png') center bottom / 100% 50% no-repeat;
	padding-bottom: 268rpx;
}

.info {
	margin: 0 24rpx;

	.avatar {
		padding: 4rpx;
		background: linear-gradient(180deg, #fff5eb 0%, #ffefdd 48.08%, #ffe9cd 100%);
	}

	.agentBox {
		background-image: url('/static/image/agent/znt_jj_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 314rpx;
		padding: 24rpx 32rpx;
		position: relative;
		z-index: 1000;

		.agentBox-avatar {
			position: absolute;
			top: -204rpx;
			right: 20rpx;
			z-index: -1;
			width: 268rpx;
			height: 332rpx;

			image {
				width: 268rpx;
				height: 270rpx;
			}
		}
	}
}

.msgBox {
	margin: 0 24rpx;

	.msgBox-item {
		display: flex;

		align-items: flex-start;
		width: 100%;
	}

	.leftMsg {
		display: inline-block;
		padding: 16rpx 32rpx;
		border-radius: 16rpx;
		max-width: 80%;
		word-wrap: break-word;
		word-break: break-all;
	}

	.rightMsg {
		display: inline-block;
		max-width: 80%;
		word-wrap: break-word;
		word-break: break-all;
		background: linear-gradient(89deg, #FF5030 0%, #ffab3b 100%);
		border-radius: 32rpx 8rpx 32rpx 32rpx;
		padding: 30rpx 24rpx;
	}

	.jcEnd {
		justify-content: flex-end;
	}

	.answer {
		border-radius: 32rpx;
		padding: 32rpx;
		background: #ffffff;

		.line {
			margin: 32rpx 0;
			background: #ececec;
			height: 2rpx;
		}
	}
}

.es-icon-36 {
	width: 36rpx;
	height: 36rpx;
}

.es-mt-60 {
	margin-top: 60rpx;
}

.footerBox {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 999;
	background-color: #ffffff;
	background-image: url('/static/image/agent/doctor-bg2.png');
	overflow: hidden;
	background-size: 100% 200%;
	background-position: bottom;
	background-repeat: no-repeat;
	box-sizing: border-box;
	padding: 32rpx 24rpx;

	.footerBox-tips {
		padding: 16rpx 24rpx;
		background: linear-gradient(180deg, #fff4ed 0%, #ffffff 17%, #ffffff 100%);
		box-shadow: inset 0rpx 16rpx 8rpx 0rpx rgba(230, 192, 172, 0.1);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		border: 2rpx solid #ffffff;
	}

	.footerBox-btn {
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;

		.footerBox-btnBox {
			width: calc(100% - 64rpx);
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			background: #ffffff;

			.footerBox-btnBox-recording {
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				width: 100rpx;
				height: 100rpx;
				box-sizing: border-box;
				background: #ffffff;
				box-shadow: 4rpx 0rpx 8rpx 0rpx rgba(159, 64, 11, 0.05);
			}
		}
	}
}

.chat_action_bar {
	position: relative;
	// background: #f0f2f6;
	padding: 24rpx 36rpx;

	.action_row {
		flex-wrap: wrap;
		margin-bottom: 24rpx;
	}

	.action_item {
		@include centerBox();
		flex-direction: column;
		margin-top: 24rpx;

		image {
			width: 96rpx;
			height: 96rpx;
		}

		&_title {
			font-size: 24rpx;
			color: #999;
			margin-top: 6rpx;
		}
	}
}

.sendInput {
	padding: 28rpx 20rpx;
	width: 90%;
}

.chose-patient {
	// margin: 15rpx 15rpx;
	margin-bottom: 15rpx;
	padding: 30rpx 40rpx;
	box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
	background-color: #fff;
	border-radius: 15rpx;
	width: 622rpx;
	height: 200rpx;

	.title-box {
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #111111;
		}

		.right {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.value {
				font-size: 28upx;
				font-family: PingFang SC;
				color: #999;
				margin-right: 10rpx;
			}

			image {
				width: 15upx;
				height: 30upx;
			}
		}
	}

	.patient {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 110upx;

		.left {
			.name {
				font-size: 30upx;
				line-height: 1;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
			}

			.info {
				margin-top: 30rpx;
				display: flex;
				align-items: center;

				.text {
					font-size: 26upx;
					font-family: PingFang SC;
					line-height: 1;
					font-weight: 500;
					color: #999;
					margin-right: 19upx;
				}
			}
		}

		.right {
			display: flex;
			align-items: center;

			image {
				width: 15upx;
				height: 30upx;
			}
		}
	}
}
</style>