rtim/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" :class="{'openTop':isOpen}">
					<image class="es-icon-60" :src="data.avatar || '/static/image/agent/ai_doctor2.png'" mode="">
					</image>
				</view>
				<view class="es-fw es-c-33 es-fs-40">医生智能体</view>
				<view class="intro-content es-mt-40 es-c-22 es-fs-28"
					:class="{ 'is-collapsed': !isOpen, 'is-expanded': isOpen }" ref="introRef">
					{{reminderWords || '' }}
					<text class="toggle-btn" v-if="showToggle" @click="isOpen = !isOpen">
						{{ isOpen ? '收起' : '展开' }}
					</text>
				</view>
				<view class="es-mt-40 u-f-ajc u-f-jsb" v-if="false">
					<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()">
							<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,
				isOpen: false,
				showToggle: false,
				reminderWords: '',
				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() {},
		watch: {
			reminderWords: {
				handler(newVal, oldVal) {
					this.getContentHeight();
				},
				immediate: true,
				deep: false
			}
		},
		onReady() {
			this.getContentHeight();
		},
		methods: {
			getContentHeight() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select('.intro-content')
						.boundingClientRect((rect) => {
							if (!rect || rect.height === 0) {
								setTimeout(() => {
									this.getContentHeight();
								}, 100);
								return;
							}
							console.log('获取到的数据', rect);
							this.showToggle = rect.height >= 34;
						})
						.exec();
				});
			},
			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;
					this.reminderWords = this.data.reminderWords || ''
				} 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%;
			min-height: 230rpx;
			padding: 24rpx 32rpx;
			position: relative;
			z-index: 1000;

			.agentBox-avatar {
				position: absolute;
				top: -224rpx;
				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, #ff5c03 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;
				}
			}
		}
	}


	.openTop {
		top: -180rpx !important;
	}

	.intro-content {
		font-size: 28rpx;
		word-break: break-all;
		position: relative;

		&.is-expanded {
			overflow: visible;
			display: block;
		}

		&.is-collapsed {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
	}

	.toggle-btn {
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: 30rpx;
		color: #ff5c03;
		background: #fff;
		padding-left: 8rpx;
		z-index: 10;
	}
</style>