<template>
	<view class="chat">
		<uni-popup ref="popup" type="center" :animation="false">
			<view class="wrapper_inputMoney">
				<view class="wrapper_inputMoney_item">
					<!-- <view>请输入金额</view> -->
					<input @input="handleInput" v-model.number="inputMoney" type="number" placeholder="请输入金额"/>
				</view>
				<button class="yty" @click="handleSendMoney">提交</button>
			</view>
		</uni-popup>
		<view v-if="ttf" class="reload_connect">
			<view style="text-align:center">已断开连接，是否重连！</view>
			<button class="connect_start" @click="handlConnects">连接</button>
		</view>

		<view v-if="loading" class="full-screen-mask"></view>
		<view v-if="loading2" class="full-screen-mask2"></view>
		<view v-if="loadingBG" class="full-screen-mask3" @click="handleBGHide"></view>
		<view v-if="ttf" class="full-screen-mask4"></view>
		<view class="images" :style="{
			backgroundImage: 'url(https://admin.mindepoch.com:8089/worlds/'+currentPageData.name+'.png)',

			}">
			<!-- <image class="images_image" :src="codeUrl" /> -->
			<!-- background:'url(../../static/UI/查看结局.png)', -->
		</view>
		<view
				v-if="showResult" 
				@click="getResults" 
				class="getResult"
				:style="{
					backgroundImage:'url(https://admin.mindepoch.com:8089/worlds/查看结局.png)',
					backgroundSize:'100% 100%',
					backgroundPosition:'center',
					backgroundRepeat:'no-repeat'
				}"
			>
			查看结局
		</view>

		<view class="menu">
			<view @click="handleShowBG" class="sendMoney plg1" ></view>
			<view @click="handleToggle" class="sendMoney plg2" ></view>
			<view @click="handleClearHistoryRecord" class="sendMoney plg3" ></view>
			<view  class="sendMoney plg4">
				<button open-type="share" @click="shareToTimeline" class="shareWord"></button>
			</view>
			<view @click="sendMoneyMethods" class="sendMoney plg5" ></view>
			<!-- v-if="JSON.parse(currentPageData.worldParameter).includes('物品')" -->
			<view class="sendMoney plg6" @click="handleMore"></view>
		</view>

		<!-- 提供一个弹窗 用于输入昵称 -->
		<view v-if="false" class="dialog">
			<view class="dialogHeader">请输入您的昵称</view>
			<view class="dialogContent">
				<input
					class="inputU"
					ref="inputU"
					v-model="userInputName"
					placeholder="请输入..."
				/>
			</view>
			<view class="dialogFooter">
				<button @click="submitUserName">提交</button>
			</view>
		</view>
		
		<!-- 遮罩层 以及弹窗 -->
		<view v-if="board" class="shadow" @click="handleHiddenShadow"></view>
		<view v-if="board" class="board">
			<view class="jk">
				<!-- <image class="bk" :src="base64Img" /> -->
				<view  class="imageH" :style="{backgroundImage:'url(' + base64Img + ')',backgroundSize:'contain',backgroundRepeat:'no-repeat'}"></view>
				<!-- 内容区域 -->
				<!-- background: 'url(../../static/UI/结局框.png)', -->
				<view class="jklock"> </view>
				<view>
					<view class="contentHeader">{{storyContent[0]}}</view>
					<view class="contentMain">
						<text>{{storyContent[1]}}</text>
					</view>
				</view>
			</view>
			<view class="footer">
				<button @click="backHome" class="home">返回首页</button>
				<button @click="handleClearHistoryRecord" class="reload">重新来过</button>
			</view>
		</view>
		<!-- 背景信息介绍 -->
		<view v-if="BG" class="boardBG">
			<view class="jk2">
				<!-- <view class="jklock"></view> -->
				<view class="contentHeader2">故事背景</view>
				<view class="HHH">
					<view class="wiik">
						<text>{{historyRecord[0].Message}}</text>
					</view>
				</view>
				<view class="confirm" @click="glb">确认</view>
			</view>
		</view>
		<!-- 功能区 -->
		<!-- <view v-show="false" class="topBox">
			<image @click="backHome" class="backHome" src="../../static/photo/back.png"/>
			<view class="money" v-show="currentPageData.id==1">
				<image src="../../static/photo/money_bag.png" />
				<view class="monney">余额：{{ monney }}</view>
			</view>
			<image class="more" src="../../static/photo/other.png" />
		</view> -->
		<view class="goods" v-if="show">
			<!-- 物品栏 -->
			<!-- <view style="text-align: center;padding:20px;font-size:18px;color:#ffffff">
				<text style="text-shadow:0 0 5px #ffffff">--- 物品栏 ---</text>
			</view> -->
			<view class="containerL">
				<view class="hisd">
					<image 
						@click="handleCloseDialog"
						src="../../static/UI/退出.png" 
						mode="scaleToFill" 
						:style="{
							height:'40rpx',
							width:'40rpx',
							position:'absolute',
							right:'0',
							top:'0'
						}"
						/>
				</view>
				<view class="grid-container">
					<view class="grid-item" v-for="(item, index) in imageList" :key="index">
						<view class="grid_item_box">
							<image class="grid_item_box_image" :src="item.imgSrc" />
							<br/>
							<text class="grid_item_box_image_text">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shadow" v-if="show" @click="handleShow"></view>
		<view class="shadows"></view>
		<!-- 聊天记录 回显到页面 -->
		<view class="outside" v-if="historyRecord.length>0">
			<scroll-view
				v-if="normal"
				class="container data-list-scroll"
				:scroll-y="true"
				:scroll-top="scrollTop"
				:scroll-with-animation="true"
				:style="{height: scrollViewHeight}"
				:scroll-into-view="bottomElement"
				>
				<view id="scroll-view-content">
					<view class="historyListData " v-for="(item, index) in historyRecord" :key="index">
						<view class="historyListData_item parent-element">
							<view v-if="Object.keys(item.WObj).length!==0" class="left distence leftPhoto">
								<!-- 思考中的提示 -->
								<view v-if="item.WObj.animaite" class="fuck">
									<view class="photo" :style="{
										backgroundImage: 'url('+ dpPhoto + ')',
										backgroundSize: 'cover', // 背景图片铺满
										backgroundRepeat: 'no-repeat', // 不重复
										backgroundPosition: 'center center', // 背景图片居中显示
									}">
									</view>
									<!-- <image :src="dpPhoto" class="photo"></image> -->

									<view class="allbody dealFloat li_left">
										<view class="heartActive">
											<view class="textStyle">正在思考中{{dots}}</view>
										</view>
									</view>
								</view>
								<!-- 数字人直接发来的消息 -->
								<view v-else>
									<view class="photo" :style="{
										backgroundImage: 'url('+ dpPhoto + ')',
										backgroundSize: 'cover', // 背景图片铺满
										backgroundRepeat: 'no-repeat', // 不重复
										backgroundPosition: 'center center', // 背景图片居中显示
									}">
									</view>
									<!-- <image :src="dpPhoto" class="photo"></image> -->
									
									<view class="allbody dealFloat li_left">
										<view class="heartActive doubleStatus">
											【时间】: {{ item.WObj["时间"] }}
										</view>
										<br />
										<view class="heartActive doubleStatus">
											【地点】: {{ item.WObj["地点"] }}
										</view>
										<view class="heartActive">
											<view class="textStyle" v-html="handleText(item.Message)"></view>
										</view>
									</view>
								</view>
							</view>

							<view v-else class="right distence rightPhoto">
								<image :src="userPhoto" class="photo"></image>
								<view class="li_right allbody dealFloat">
									<view class="heartActive">
										{{ item.Message }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 最后一个元素，用于滚动定位 -->
					<view id="bottomElement"></view>
				</view>
				
			</scroll-view >
		</view>

		<view v-if="false" class='formContainer'>
			<view class='itemContainer'>
				<view class="chat-window">
					<view id="MyIn" class='tongyi'></view>
					<input
						v-model="inputVal"
						@focus="handleFocus"
						@blur="hadnleBlur"
						:class="boxClass"
						class="activeAnimaite"
						placeholder="请输入..."
					/>
					<image id="Send" :class="showSend" @click="handleSendMessage" src="../../static/photo/Send.png" />
					<image
						id="SendSound"
						:class="[activeState,focus]"
						class="activeAnimaite"
						src="../../static/photo/sound.png"
						@touchstart.prevent="startRecord"
						@mousedown.prevent="startRecord"
						@touchend.prevent="endRecord"
						@mouseup.prevent="endRecord"
					/>
				</view>
			</view>
		</view>

		<!-- UI层 -->
		<view v-if="UI_show" class="UI">
			<view class="UI_wrapper">
				<view class="UI_head">
					<view class="UI_head_title">{{UITitle}}</view>
					<view class="UI_head_timer">{{UITimer}}</view>
				</view>

				<view class="UI_states">
					<view class="UI_states_photo">
						<view class="UI_states_photo_wrapper">
							<view :style="{
								width:'80%',
								height:'80%',
								borderRadius:'50%',
								background:'url('+userPhoto+')',
								backgroundSize:'100% 100%',
								backgroundPosition:'center',
								backgroundRepeat:'no-repeat',
								position:'absolute',
								top:'10%',
								left:'10%'}">
							</view>
						</view>
					</view>
					<view class="icon_log"></view>
					<view class="UI_states_value">
						<view class="processLine" v-for="(item,index) in worldParameter" :key="index">
							<view>
								
								<view v-if="index==0" class="processLine_item jiegan">
									<view class="no1 ksp" :style="{ width:UIStatus_jiegan+'%',backgroundSize: UIStatus_jiegan<=93?'auto 100%':'contain'}">
									</view>
									<view class="sameFonts" :style="{zIndex:10}">
										{{item}}：{{UIStatus_jiegan}} / 100
									</view>
								</view>
							
								<view v-if="index==1" class="processLine_item kongjugan">
									<view class="no1 ogc" :style="{ width:UIStatus_kongjugan+'%',backgroundSize: UIStatus_kongjugan<=93?'auto 100%':'contain'}">
									</view>
									<view class="sameFonts" :style="{zIndex:10}">
										{{item}}：{{UIStatus_kongjugan}} / 100
									</view>
								</view>
								
							</view>
						</view>
					</view>
				</view>
				
				<view class="UI_body">
					<view class="UI_body_right">
						<!-- v-if="glod_user" -->
						<view class="UI_body_right_content" v-if="glod_user">
							<view class="UI_body_right_content_text">
								<view :style="{
									lineHeight:'100rpx',
									margin:'10rpx 40rpx 0 20rpx',
									height:'100rpx',
									overflowY:'scroll',
									textIndent:0
									}">{{inputVal_UI}}
								</view>
							</view>

							<view class="UI_body_right_content_photo">
								<view :style="{
									width:'80%',
									height:'80%',
									margin:'10% 0 0 10%',
									borderRadius:'50%',
									background:'url('+userPhoto+')',
									backgroundSize:'cover',
									backgroundPosition:'center',
									backgroundRepeat:'no-repeat'}">
								</view>
							</view>
						</view>

						<!-- v-if="glod_dp" -->
						<view class="UI_body_left">
							<view class="UI_body_left_content" v-if="glod_dp">
								<view class="UI_body_left_content_photo">
									<view :style="{
										width:'80%',
										height:'80%',
										borderRadius:'50%',
										background:'url('+dpPhoto+')',
										backgroundSize:'cover',
										backgroundPosition:'center',
										backgroundRepeat:'no-repeat',
										position:'absolute',
										top:'11%',
										left:'9.5%'
										}">
									</view>
								</view>

								<view class="UI_body_left_content_text">
									<view :style="{
										lineHeight:'100rpx',
										margin:'10rpx 10rpx 0 50rpx',
										height:'100rpx',
										overflowY:'scroll',
										textIndent:0
										}">
										{{yyds_dp}}
									</view>
								</view>
							</view>
						</view>

						<view class="UI_body_left_Pangbai_content">
							<view class="pangbai_title">
								<text>旁白</text>
							</view>
							<scroll-view
									:scroll-y="true"
									:scroll-top="scrollTop_pangbai"
                  :style="{height: boxHeight + 'rpx'}"
									:scroll-into-view="bottomElement_pangbai"
									class="pangbai_content"
								>
								<view id="scrollView">
									<view class="npc" :style="{fontSize: fontSize + 'rpx'}">
										{{yyds_pangbai}}
									</view>
									<!-- 最后一个元素，用于滚动定位 -->
									<view id="bottomElement_pangbai"></view>
								</view>
							</scroll-view>
              <image
                  @click="nextTips"
                  src="../../static/UI/继续.png"
                  class="tre"
                  mode="scaleToFill"
              />
            </view>
					</view>
				</view>

				<view v-if="foot" class="UI_footer">
					<view class="UI_footer_tool">
						<view class="UI_footer_tool_wrapper">
							<view @click="handlSay" class="say" :class="!userDoing?sayDoingClass:null"></view>
							<view @click="handlDoing" class="doing" :class="userDoing?sayDoingClass2:null"></view>
							<view class="input">
								<!-- <view class="low"></view> -->
								<input
									class="UI_input"
									v-model="inputVal"
								/>
								<view  id="Send2" @click="handleSendMessage2"></view>
								<!-- <image id="Send2" @click="handleSendMessage2" src="../../static/UI/发送icon.png" /> -->
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import FullScreenLoading from '../../components/FullScreenLoading.vue';
var recorderManager = uni.getRecorderManager();
// var innerAudioContext = uni.createInnerAudioContext();

// innerAudioContext.autoplay = true;

export default {
	data() {
		return {
			UI_show:true,
			normal:false,
			ttf:false,
			jumping:false,
			pangbai_stop:false, //当新的消息发来以后 停止当前旁白框的内容
			foot:true,
			loadingBG:false,
			BG:false,
			Strem:null,
			str:'',
			Nc:'',
			inputVal_UI:'',
			glod_user:false,
			glod_dp:false,
			header:null,
			UITitle:'',
			UITimer:'',
			UIStatus_kongjugan:0,
			UIStatus_jiegan:0,
			sayDoingClass:'sayDoingClass',
			sayDoingClass2:'sayDoingClass2',
			userDoing:true,
			yyds_pangbai:'',
			yyds_dp:'',
			userInputValue:'',
			reset:false,
			scrollTop:0,//滚动条位置
			scrollTop_pangbai:0,//滚动条位置
			scrollViewHeight:'100%',
			bottomElement:'bottomElement',
			bottomElement_pangbai:'bottomElement_pangbai',
			scrollInto:'',
			count: 0,
			inputMoney:0,
			loading2:false,
			userInputName:'',
			showDialog:true,
			userName:'',
			isHover: false,
			base64Img:'',
			showResult:false,
			showSend:'',
			activeState:'',
			focus:'',
			show: false,
			monney: 0,
			boxClass:'chat-window-message',
			items: [],
			historyRecord: [],
			socketTask: null,
			recive: null,
			codeUrl: '',
			dpPhoto: '',
			userPhoto: '',
			inputVal: '',
			loading: false,
			finalVal: '',
			EPlayer: null,
			innerAudioContext: null,
			board:false,
			storyContent:['头部内容','主体内容'],
			text: 'uni-app',
			voicePath: '',
			timer:null,
			timerConsider:null,
			imageList:[],
			tempFilePath:'',
			tempFilePath2:'',
			currentPageData:null,
			soundVoice : {
				'中国台湾播音男口音1': 'zh-TW-YunJheNeural',
				'中国香港播音男口音1': 'zh-HK-WanLungNeural',
				'中国大陆播音男口音1': 'zh-CN-YunjianNeural',
				'中国大陆播音男口音2': 'zh-CN-YunxiNeural',
				'中国大陆播音男口音3': 'zh-CN-YunyangNeural',
				'中国东北辽宁少女口音': 'zh-CN-liaoning-XiaobeiNeural',
				'中国台湾少女口音1': 'zh-TW-HsiaoChenNeural',
				'中国台湾少女口音2': 'zh-TW-HsiaoYuNeural',
				'中国香港少女口音1': 'zh-HK-HiuGaaiNeural',
				'中国香港少女口音2': 'zh-HK-HiuMaanNeural',
				'中国陕西少女口音1': 'zh-CN-shaanxi-XiaoniNeural',
				'中国大陆少女口音1': 'zh-CN-XiaoxiaoNeural',
				'中国大陆少女口音2': 'zh-CN-XiaoyiNeural',
				'中国大陆少女口音3': 'zh-CN-YunxiaNeural',
			},
			Allvoice:[],
			worldParameter:[],
			total_val:[],
      fontSize:0,
      boxHeight:210,
			quotedData:[]
		}
	},
	computed: {
		dots() {
			const numDots = this.count % 4;
      		return '.'.repeat(numDots) + ' '.repeat(3 - numDots);
		}
	},
	beforeDestroy (){
		clearInterval(this.timerConsider);
		if (this.socketTask) {
			this.socketTask.close(); // 关闭 WebSocket 连接
			this.socketTask = null; // 清空 WebSocket 对象
			console.log('socketTask 断开')
		}
		clearInterval(this.timer)
		if (this.EPlayer) {
			if(this.EPlayer.cb) this.EPlayer.cb = null
			this.EPlayer.stop();
			this.EPlayer.destroy();
			this.EPlayer = null;
		}

	},
	mounted() {
		// this.execFile([{text:'1233333333',quoted:false},{text:'1233333333',quoted:true},{text:'1233333333',quoted:false}])
		uni.authorize({
			scope: 'scope.record',
			success() {
				console.log('用户已授权使用麦克风')
			},
			fail() {
				console.log('用户拒绝授权使用麦克风')
				// 可以引导用户到设置页面开启权限
				uni.showModal({
					title: '提示',
					content: '需要您授权使用麦克风',
					success: function (res) {
						if (res.confirm) {
							uni.openSetting({
								success: function (data) {
									if (data.authSetting['scope.record']) {
										console.log('授权成功');
									} else {
										console.log('授权失败');
									}
								}
							});
						}
					}
				});
			}
		});

		console.log(uni.getStorageSync('userName'))
		this.userInputName = uni.getStorageSync('userName')
		// const obj = getApp().globalData.shareObject;
		// console.log('首页传来的数据',obj)
		//保存用户的余额显示 物品栏的道具显示

		//获取历史聊天记录  根据历史记录处理决定 websocket 的连接
		this.getHistory()
    this.calcFontSize(26)

		//讲完话以后 向服务器发送数据
		recorderManager.onStop( res=> {
			console.log('讲完话了',res)
			// self.voicePath = res.tempFilePath
			this.convertAudioToStream(res.tempFilePath)
		});

		// uni.setStorageSync('session_token', response[1].cookies[0].split(';')[0]);
		//1.获取心跳包
		uni.request({
			url: 'https://admin.mindepoch.com:8089/heartbeat',
			header: {
				'Cookie': `${uni.getStorageSync('session_token')}`
			}
		}).then(result => {
			// console.log(response[1])
		}).catch(errs => {
			console.log(errs)
		});

		//获取真声所以人物声线
		uni.request({
			url: 'https://admin.mindepoch.com:8089/VoiceMode/QueryAllModelPeopleNames',
			method: 'post',
			data: {},
			header: {
				'Cookie': `${uni.getStorageSync('session_token')}`,
				"Cache-Control": "no-cache",
				'Content-Type': 'application/x-www-form-urlencoded'
			}
		}).then(response => {
			console.log('response',response)
			const arrInput = response[1].data.names
			this.Allvoice = Object.fromEntries(
				Object.entries(arrInput).map(([key, value]) => [value, key])
			);
		}).catch(errs => {
			console.log('errs',errs)
		});


	},
	onLoad(options) {
		uni.setInnerAudioOption({
			obeyMuteSwitch:false
		})
		// 解码参数
		const params = options.params;
		try {
			// 将 JSON 字符串转换回对象
			this.currentPageData = JSON.parse(decodeURIComponent(params));
			this.UITitle = this.currentPageData.worldName //地点

			console.log('this.worldParameter',this.worldParameter)
			console.log('currentPageData',this.currentPageData)
			this.worldParameter = JSON.parse(this.currentPageData.worldParameter)
			this.worldParameter = this.worldParameter.filter(item=>{
				return item!='时间' && item!='地点' && item!='物品'
			})
			console.log('this.worldParameter',this.worldParameter)
			//获取图片资源
			this.getPhoto()
		} catch (e) {
			console.error('解析参数出错', e);
		}
	},
	methods: {
		shareToTimeline(){
			uni.share({
				provider: 'weixin', // 分享服务提供商，weixin表示微信
				title: '世界推演', // 分享的标题
				summary: '你爱我，我爱你，蜜雪冰城甜蜜蜜！', // 分享的摘要
				imageUrl: 'https://admin.mindepoch.com:8089/worlds/default.jpg', // 分享的图片链接，可选
				// query: '分享的查询参数', // 分享的查询参数，可选
				success: (res) => {
					// 分享成功的回调
					console.log('分享成功', res);
				},
				fail: (err) => {
					// 分享失败的回调
					console.error('分享失败', err);
				},
				complete: () => {
					// 分享结束的回调（成功、失败都会执行）
					console.log('分享结束');
				}
			});
		},
		handlConnects(){
			this.socketConnect()
			this.ttf = false
		},
		glb(){
			this.BG = false
			this.loadingBG = false
		},
		handleBGHide(){
			this.BG = false
			this.loadingBG = false
		},
		handleShowBG(){
			//显示背景
			this.BG = true
			this.loadingBG = true
		},
		nextTips(){
			//结算当前语音的递归 进行下一次语音
			// this.EPlayer.onEnded()
			this.jumping = true
			clearInterval(this.Strem)
			this.EPlayer.stop()
			if(!this.kill){
				this.yyds_pangbai += this.str
			}
			this.jumping = false
			this.EPlayer.onended()
		},
		handleCloseDialog(){
			this.show = false
		},
		handlSay(){
			this.userDoing = false
		},
		handlDoing(){
			this.userDoing = true
		},
		extractQuotedTexts(str){
			// 正则表达式匹配引号内的文本，包括转义引号
			const pattern = /(["'])(?:(?=(\\?))\2.)*?\1/g;
			let matches = [];
			let match;

			// 使用正则表达式的exec方法进行循环匹配
			while ((match = pattern.exec(str)) !== null) {
				// 获取引号内的文本（排除引号本身）
				let quotedText = match[0].slice(1, -1).replace(/\\(["'])/g, '$1'); // 去除引号并取消转义
				matches.push(quotedText);
			}

			return matches.length == 0 ? [str] : matches;
		},
		handleInputValue(){
			console.log(this.inputVal)
		},

		scrollToBottom(){
			uni.createSelectorQuery().in(this).select('#scroll-view-content').boundingClientRect((res)=>{
				// console.log('res',res,this.historyRecord.length)
				if(res){
					this.scrollTop=res.height;
				}else{
					this.scrollTop=this.historyRecord.length*1000;
				}
			}).exec()
		},
    scrollToBottom_pangbai() {
      this.$nextTick(() => {
        uni.createSelectorQuery().in(this).select('#scrollView').boundingClientRect((res) => {
          if (res) {
            this.scrollTop_pangbai=res.height*2;
          } else {
            //this.scrollTop_pangbai = this.historyRecord.length * 1000;
          }
        }).exec();
      });
    },

    calcFontSize(size) {
      let windowInfo = wx.getWindowInfo();
      let FontSizeRPX = size * (428/750);
      let FontSizePX = FontSizeRPX / (windowInfo.windowWidth/750);
      let pangbaiHeightRPX = 210 * (428/750);
      let pangbaiHeightPX = pangbaiHeightRPX / (windowInfo.windowWidth/750);
      this.fontSize = FontSizePX;
      this.height = 210;
    },

    splitString(str) {
			const result = [];
			let currentText = '';
			let quoted = false;
			for (let i = 0; i < str.length; i++) {
				const char = str[i];
				if (char === '"') {
					if (quoted) {
						result.push({ text: currentText, quoted: true });
						currentText = '';
						quoted = false;
					} else {
						if (currentText.trim() !== '') {
							result.push({ text: currentText, quoted: false });
							currentText = '';
						}
						quoted = true;
					}
				} else {
					currentText += char;
				}
			}
			if (currentText.trim() !== '') {
				result.push({ text: currentText, quoted: quoted });
			}
			return result;
		},

		handleSendMoney() {
			if(this.inputMoney==""&&this.inputMoney.trim()==""){
				uni.showToast({
					title: '金额不可为空！',
					icon:'none'
				})
			}else{
				this.inputVal = '我向她发送了红包'+this.inputMoney+'元'
				//向服务器发请求
				this.socketTask.send({
					data: JSON.stringify({
						type: 0,
						content: '我向她发送了红包'+this.inputMoney+'元'
					}),
					success: () => {
						console.log('消息发送成功')
						this.loading = true
						// uni.showLoading({
						// 	title: '思考中...',
						// 	mask: true // 是否显示透明蒙层，防止触摸穿透，默认为 false
						// });
						let str = '对方正在输入...'
						let i = 6
						this.timer = setInterval(() => {
							if(i<10){
								i += 1
							}else{
								i = 6
							}
							uni.setNavigationBarTitle({
								title: str.substr(0,i)
							});
						}, 400);
					}
				});
				this.$refs.popup.close()
			}
		},

		extractText(content) {
			const input = content.replaceAll("“", `"`).replaceAll("”", `"`)
			// 正则表达式，用于匹配双引号内的文字
			const insideQuotes = input.match(/"([^"]*)"/g);
			const insideQuotesText = insideQuotes ? insideQuotes.map(text => (" ' " + text.replace(/"/g, '')+ " ' ")) : [];

			// 去掉双引号和双引号内的文字，剩下的就是双引号外的文字
			const outsideQuotesText = input.split(/"([^"]*)"/).filter((text, index) => index % 2 === 0).join('');

			return {
				insideQuotesText,
				outsideQuotesText
			};
		},


		//websocket 连接
		socketConnect(){
			console.log(123,this.currentPageData.name)
			// console.log(this.userInputName,uni.getStorageSync('userName'))
			this.socketTask = uni.connectSocket({
				url: `wss://admin.mindepoch.com:8089/WorldChats/ws?id=${uni.getStorageSync('wxUid')}&world_name=${this.currentPageData.name}&BgInfo=${this.currentPageData.background}&userInfo={"name":"${uni.getStorageSync('userName')}","bk":""}`, // WebSocket 服务器的地址
				// 成功建立连接的回调
				success: () => console.log('WebSocket 连接成功'),
				// 失败的回调
				fail: () => console.log('WebSocket 连接失败')
			});
			// 监听 WebSocket 连接打开事件
			this.socketTask.onOpen(() => {
				console.log('WebSocket 连接已打开');
			});
			// 监听接收到服务器发送的消息事件
			this.socketTask.onMessage((message) => {
				// console.log('message--------',message)
				clearInterval(this.timerConsider);
				clearInterval(this.timer);
				this.jumping = false
				uni.setNavigationBarTitle({
					title: this.currentPageData.name
				});
				this.loading = false
				this.loading2 = false
				uni.hideLoading();
				//处理把数据添加至页面
				const backValue = JSON.parse(message.data)
				// console.log('----onMessage----',backValue)
				if(!this.header){
					this.glod_dp = false //先隐藏数字人对话框
				}
				

				if(backValue.code===0){
					this.badRequest()
				}else if(backValue.code===3){
					this.badRequest()
				}else if(backValue.code===4){
					this.badRequest()
				}else if(backValue.code===-1){
					this.badRequest()
				}else if(backValue.code===1){
					//非第一次连接
					if(!backValue.content) {
						if(backValue.WObj['地点']){
							this.UITitle = backValue.WObj['地点']
						}
						if(backValue.WObj['时间']){
							this.UITimer = backValue.WObj['时间']
						}
						if(backValue.WObj['恐惧感']){
							this.UIStatus_kongjugan = backValue.WObj['恐惧感']
						}
						if(backValue.WObj['饥饿感']){
							this.UIStatus_jiegan = backValue.WObj['饥饿感']
						}
						
						//物品栏WObjj 物品数组存在 且有余额和道具   物品中包含了 存款和道具
						//对物品和余额的处理
						if(backValue.WObj['物品']){
							if(backValue.WObj['物品'].length>0){
								//所有道具名
								this.items = backValue.WObj['物品'].filter(val=>{
									return !val.includes("存款:")
								})
								this.items = this.items.map(val=>{
									return val.split("(")[0]
								})
								console.log('所有道具有',this.items)
								//清空图片数组 根据历史记录 得到道具名称 根据道具名称请求图片资源
								this.imageList = []
								for(let i = 0;i<this.items.length;i++) {
									uni.request({
										url: 'https://admin.mindepoch.com:8089/AiDraw',
										method: 'post',
										data:{
											name:this.items[i]
										},
										header: {
											'Cookie': `${uni.getStorageSync('session_token')}`,
											'Content-Type': 'application/x-www-form-urlencoded'
										}
									}).then(res=>{
										// console.log('当前道具名称对应的图片资源',res[1].data)
										if(res[1].data.code===1){
											this.imageList.push({imgSrc:'https://admin.mindepoch.com:8089'+res[1].data.propImagePath,name:this.items[i]})
										}
									}).catch(err=>{
										console.log(err)
									})
								}
								//余额显示
								const monney = backValue.WObj['物品'].filter(val=>{
									return val.includes("存款:")
								})
								if(monney[0]){
									this.monney = monney[0].match(/\d+/)
								}else{
									this.monney = 0
								}

								//结局  有EndStr字段
								if(backValue.WObj.EndStr){
									if(backValue.WObj.EndStr!==""){
										this.storyContent = backValue.WObj.EndStr.split('@')
										//出现结局面板   请求背景图片
										uni.request({
											url: `https://admin.mindepoch.com:8089/worlds/${this.storyContent[0]}.png`,
											method: 'get',
											responseType: 'arraybuffer',
											header: {
												'Cookie': `${uni.getStorageSync('session_token')}`
											}
										}).then(res=>{
											// console.log('图片资源',res)
											this.base64Img = 'data:image/png;base64,' + uni.arrayBufferToBase64(res[1].data);
											this.loading = true
											this.foot = false //输入框区域隐藏
											this.showResult = true //展示查看结局按钮
										}).catch(err=>{
											console.log(err)
										})
									}
								}else{
									//未到达结局 因此不展示结局面板
									this.board = false //隐藏结局面板
									this.foot = true //输入框区域显示
									this.showResult = false  //隐藏查看结局按钮
									this.loading = false
								}
							}
						}
						//服务器传来的内容处理  包括发声
						let ISLIU_content = backValue.ISLIU ? backValue.ISLIU : '';
						console.log(ISLIU_content)
						if (ISLIU_content !== '') {
							uni.request({
								url: `https://admin.mindepoch.com:8089/ai/process`,
								method: 'post',
								data: {
									content:ISLIU_content
								},
								header: {
									'Cookie': `${uni.getStorageSync('session_token')}`,
									'Content-Type': 'application/json' // 指定请求头类型为 JSON
								}
							}).then(res=>{
								ISLIU_content = ISLIU_content.replaceAll("“", `"`).replaceAll("”", `"`)
								const finalVal = this.extractQuotedTexts(ISLIU_content).join(",")
								let text = this.splitString(ISLIU_content)
								this.total_val = res[1].data.results
								// this.total_val.unshift()
								this.total_val = this.total_val.splice(1,this.total_val.length)
								console.log(text,this.total_val)

								// console.log('finalVal',finalVal)
								// console.log('ISLIU_content',ISLIU_content,'text',text,'total_val',res[1].data.results)
								text = text.map((item)=>{
									if(!item.quoted){
										item.voicer = this.currentPageData.voiceGroups['2']
									}else{
										if(this.total_val.length!=0){
											
											const double = this.separateChineseAndNumbers(this.total_val[0])
											const voicer = this.currentPageData.voiceGroups[double[1]] ?
															this.currentPageData.voiceGroups[double[1]] :
															this.currentPageData.voiceGroups[double[0]];
											item.voicer = voicer
											this.total_val = this.total_val.splice(1,this.total_val.length)
										}
									}
									return item
								})
								this.execFile(text,ISLIU_content);

							}).catch(err=>{
								console.log(err)
							})
						}

						//把用户的聊天内容加入到页面中
						this.historyRecord.push({
							Message: backValue.ISLIU,
							WObj: backValue.WObj
						})
						//删除动画效果
						this.historyRecord = this.historyRecord.filter(item=>{
							return !item.Message.includes("正在思考中")
						})
						// console.log('historyRecord',this.historyRecord)
						// this.inputVal = '' //清空输入框

						this.yyds_pangbai = ''
						this.yyds_dp = ''
						this.inputVal = ''
						this.loading = false;  //隐藏蒙版
						uni.hideLoading();
						//滚动条触底
						this.scrollToBottom()
						//处理用户出现结局后 未清除意识流 再次进来 点击重新来过
						if(this.reset){
							this.reset = false
							this.clearISU()
						}
					}else{
						//表示跟服务器建立第一次连接
						
					}
				}
			});
			// 监听 WebSocket 错误事件
			this.socketTask.onError((error) => {
				console.error('WebSocket 错误：', error);
				this.socketTask = null
				this.badRequest()
				this.ttf = true
			});
			// 监听 WebSocket 连接关闭事件
			this.socketTask.onClose(() => {
				this.socketTask = null
				this.badRequest()
				console.log('WebSocket 连接已关闭');
				this.ttf = true
			});
		},

		getHistoryContentAndPhoto(){
			this.showResult = true //展示查看结局按钮
			this.foot = false //输入框区域显示
			this.loading = true
			this.storyContent = this.historyRecord[this.historyRecord.length-1].WObj.EndStr.split('@')
			uni.request({
				url: `https://admin.mindepoch.com:8089/worlds/${this.storyContent[0]}.png`,
				method: 'get',
				responseType: 'arraybuffer',
				header: {
					'Cookie': `${uni.getStorageSync('session_token')}`
				}
			}).then(res=>{
				console.log('图片资源',res)
				this.base64Img = 'data:image/png;base64,' + uni.arrayBufferToBase64(res[1].data);
			}).catch(err=>{
				console.log(err)
			})
		},

		//获取历史聊天记录
		getHistory(){
			uni.request({
				url: 'https://admin.mindepoch.com:8089/worldChat-history',
				method: 'post',
				data:{
					// id:this.$globalData.wxUid
					id:this.currentPageData.id
				},
				header: {
					'Cookie': `${uni.getStorageSync('session_token')}`,
					'Content-Type': 'application/x-www-form-urlencoded'
				}
			}).then(res => {
				// console.log('历史聊天记录',res[1])
				//需要根据历史纪录最后一条 来处理是否还需要往下面聊
				if (res[1].data.code===1) {
					if(res[1].data.chatRecordInfo){
						this.historyRecord = res[1].data.chatRecordInfo.Records
						if(this.historyRecord.length!==0){
							//回显的数据
							this.UITitle = this.historyRecord[this.historyRecord.length-1].WObj["地点"]
							this.UITimer = this.historyRecord[this.historyRecord.length-1].WObj["时间"]
							this.header = this.historyRecord[this.historyRecord.length-1]

							//展示旁白信息 数字人和用户对话信息
							if(this.header){
								
								const result = this.extractText(this.header.Message)
								const len = result.insideQuotesText.length
								// console.log('result',result)
								
								if(result.insideQuotesText.length==0){ //数字人对话框是否需要显示
									this.glod_dp = false
								}else{
									this.glod_dp = true
								}
								this.yyds_dp = result.insideQuotesText[len-1]
								//筛选出数字人发来的文字
								
								this.yyds_pangbai = result.outsideQuotesText
								//状态值
								this.UIStatus_jiegan = this.header.WObj["饥饿感"]?this.header.WObj["饥饿感"]:0;
								this.UIStatus_kongjugan = this.header.WObj["恐惧感"]?this.header.WObj["恐惧感"]:0;
							}

							if(this.historyRecord[this.historyRecord.length-1].WObj.EndStr){
								if(this.historyRecord[this.historyRecord.length-1].WObj.EndStr!==""){
									if(this.historyRecord[this.historyRecord.length-1].WObj.EndStr.includes("怒删微信")||this.historyRecord[this.historyRecord.length-1].WObj.EndStr.includes("意识被吞噬")){
										//当前聊天不可继续 根据历史聊天记录的最后一条 用于 显示余额 显示道具 删除微信后的背景图片 以及不在进行websocket连接
										if(this.historyRecord[this.historyRecord.length-1].WObj['物品']){
											// 根据历史纪录来获取 结局以后的内容和图片
											this.getHistoryContentAndPhoto()

											const monneyAndTool = this.historyRecord.filter((item,index)=>{
												return (this.historyRecord.length-1 == index) && (Object.keys(this.historyRecord[index].WObj).length>0)
											})
											//拿到物品和余额的数组
											const tool = monneyAndTool[0].WObj['物品']
											//余额
											const monney = tool.filter((item,index)=>{
												return tool[index].includes("存款")
											})
											//道具
											const allTools = tool.filter((item,index)=>{
												return !tool[index].includes("存款")
											})
											if(monney[0]){
												this.monney = monney[0].match(/\d+/)
											}else{
												this.monney = 0
											}
											for(let i = 0;i<allTools.length;i++){
												this.imageList.push({imgSrc:'https://admin.mindepoch.com:8089/worlds/items/'+allTools[i].split("(")[0]+'.png',name:allTools[i].split("(")[0]})
											}
											//滚动条触底
											this.scrollToBottom()
											return
										}
									}
								}
							}

							//没有走到结局 根据最后两条两条对聊记录处理  物品的显示
							const monneyAndTool = this.historyRecord.filter((item,index)=>{
								return (this.historyRecord.length == index)&&Object.keys(this.historyRecord[index].WObj).length>0 || ((this.historyRecord.length - 1) == index)&&(Object.keys(this.historyRecord[index].WObj).length>0)
							})
							console.log('monneyAndTool',monneyAndTool)
							//余额 道具 的展示
							if(monneyAndTool.length==0){
								//当道具不存在时
							}else{
								if(monneyAndTool[0].WObj['物品']) {
									const tool = monneyAndTool[0].WObj['物品']
									const monney = tool.filter((item,index)=>{
										return tool[index].includes("存款")
									})
									const allTools = tool.filter((item,index)=>{
										return !tool[index].includes("存款")
									})
									if(monney[0]){
										this.monney = monney[0].match(/\d+/)
									}else{
										this.monney = 0
									}
									for(let i = 0;i<allTools.length;i++){
										this.imageList.push({imgSrc:'https://admin.mindepoch.com:8089/worlds/items/'+allTools[i].split("(")[0]+'.png',name:allTools[i].split("(")[0]})
									}
								}
							}
							//滚动条触底
							this.scrollToBottom()
							//启动 webscoket 连接
						}else{
							// 没有历史记录 
						}
						this.socketConnect()
					}
				}else{
					// uni.showToast({
					// 	title: res[1].data.message,
					// 	icon: 'none'
					// })
					this.socketConnect()
				}
			}).catch(err => {
				console.log(err)
			})
		},

		getPhoto(){
			//获取背景图 
			uni.request(
				{
					url:`https://admin.mindepoch.com:8089/worlds/${this.currentPageData.worldName}.png` ?
						`https://admin.mindepoch.com:8089/worlds/${this.currentPageData.worldName}.png` :
						`https://admin.mindepoch.com:8089/worlds/${this.currentPageData.worldName}.jpg` ?
						`https://admin.mindepoch.com:8089/worlds/${this.currentPageData.worldName}.jpg` :
						`https://admin.mindepoch.com:8089/worlds/${this.currentPageData.worldName}.gif` ?
						`https://admin.mindepoch.com:8089/worlds/${this.currentPageData.worldName}.gif` :
						`/images/ai1.png`,
					method: 'GET',
					data: {
						id: this.currentPageData.worldName,
					},
					responseType: 'arraybuffer',
					header: {
						'Cookie': `${uni.getStorageSync('session_token')}`,
						"Cache-Control": "no-cache"
					}
				}).then(res => {
					const arrayBuffer = res[1].data
					this.codeUrl = 'data:image/png;base64,' + uni.arrayBufferToBase64(arrayBuffer);
				}).catch(err => console.log(err))

			//获取数字人头像
			uni.request(
				{
					url:`https://admin.mindepoch.com:8089/worlds/${this.currentPageData.worldName}.png` ?
						`https://admin.mindepoch.com:8089/worlds/${this.currentPageData.worldName}.png` :
						`https://admin.mindepoch.com:8089/worlds/${this.currentPageData.worldName}.jpg` ?
						`https://admin.mindepoch.com:8089/worlds/${this.currentPageData.worldName}.jpg` :
						`https://admin.mindepoch.com:8089/worlds/${this.currentPageData.worldName}.gif` ?
						`https://admin.mindepoch.com:8089/worlds/${this.currentPageData.worldName}.gif` :
						`/images/ai1.png`,
					method: 'GET',
					responseType: 'arraybuffer',
					data: {
						id: this.currentPageData.worldName,
					},
					responseType: 'arraybuffer',
					header: {
						'Cookie': `${uni.getStorageSync('session_token')}`,
						"Cache-Control": "no-cache"
					}
			}).then(res => {
				const arrayBuffer = res[1].data
				this.dpPhoto = 'data:image/png;base64,' + uni.arrayBufferToBase64(arrayBuffer);
			}).catch(err => {
				console.log(err)
			})

			//获取用户头像
			uni.request({
				url:`https://admin.mindepoch.com:8089/userFile/avatar${uni.getStorageSync('wxUid')}.png` ?
					`https://admin.mindepoch.com:8089/userFile/avatar${uni.getStorageSync('wxUid')}.png` :
					`https://admin.mindepoch.com:8089/userFile/avatar${uni.getStorageSync('wxUid')}.jpg` ?
					`https://admin.mindepoch.com:8089/userFile/avatar${uni.getStorageSync('wxUid')}.jpg` :
					`https://admin.mindepoch.com:8089/userFile/avatar${uni.getStorageSync('wxUid')}.gif` ?
					`https://admin.mindepoch.com:8089/userFile/avatar${uni.getStorageSync('wxUid')}.gif` :
					`/images/ai1.png`,
				method: 'GET',
				responseType: 'arraybuffer',
				data: {
					// id: this.currentPageData.id,
				},
				responseType: 'arraybuffer',
				header: {
					'Cookie': `${uni.getStorageSync('session_token')}`,
					"Cache-Control": "no-cache"
				}
			}).then(res => {
				const arrayBuffer = res[1].data
				this.userPhoto = 'data:image/png;base64,' + uni.arrayBufferToBase64(arrayBuffer);
			}).catch(err => console.log(err))
		},

		badRequest(){
			uni.showToast({
				title: '连接异常',
				icon: 'none'
			});
			return
		},
		handleTouchStart() {
			this.isHover = true;
		},
		handleTouchEnd() {
			this.isHover = false;
		},
		handleText(text){
			return text.replace(/“([^”]*)”/g, '<strong style="color:#e4c7ffd9 ">"$1"</strong>')
		},
		handleHiddenShadow(){
			this.board = false
			this.foot = true //输入框区域显示
		},
		getResults(){
			this.board = true
			this.foot = false //输入框区域显示
		},
		handleInput(event){
			console.log(event.target.value)
			const val = event.target.value
			// this.inputMoney
			// if(typeof val === 'number' && !isNaN(val)){
			// 	//输入为数字
			// 	this.inputMoney = val
			// }else{
			// 	this.inputMoney = 0
			// }
		},
		open() {
			this.$refs.popup.open()
		},
		close() {
			// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
			// ...
			this.$refs.popup.close()
		},
		confirm(value) {
			console.log(value)
			this.$refs.popup.close()
		},

		backHome() {
			uni.navigateBack({
                // url: `/pages/homeCards/index`
            });
		},
		handleToggle(){
			this.normal = !this.normal;
			this.UI_show = !this.UI_show;
		},
		sendMoneyMethods(){
			//弹窗出现 输入金额 确认 提交 发送
			// this.showInputMoneyDialog = true
			this.$refs.popup.open('center')
		},

		clearISU() {
			this.historyRecord = [] //清除页面显示的聊天记录
			this.showResult = false //隐藏底部的查看结局按钮
			this.board = false //隐藏弹窗
			this.foot = true //输入框区域显示
			this.loading = true //显示遮挡层
			uni.showLoading({
				title: '请稍等...',
				mask: true // 是否显示透明蒙层，防止触摸穿透，默认为 false
			})
			uni.request({
				url: `https://admin.mindepoch.com:8089/SoulNeuralFileWorldReset`,
				method: 'post',
				data: {
					worldName: this.currentPageData.name,
					BgInfo:this.currentPageData.background,
					userInfo:`{"name":"${this.userInputName}","bk":"${this.currentPageData.background}"}`
				},
				header: {
					'Cookie': `${uni.getStorageSync('session_token')}`,
					"Cache-Control": "no-cache",
					'Content-Type': 'application/x-www-form-urlencoded'
				}
			}).then(res => {
				console.log('重置世界',res)
				if(res[1].data.code===1){
					this.loading = false //隐藏遮挡层
					uni.hideLoading();
					// location.reload() //页面刷新
				}
			}).catch(err => {
				this.loading = false  //隐藏遮挡层
				uni.hideLoading();
			})
		},

		handleClearHistoryRecord() {
			this.glod_dp = false
			this.glod_user = false
			this.inputVal = ''
			this.yyds_dp = ''
			this.yyds_pangbai = ''
			if(this.socketTask==null){
				this.reset = true
				//1.建立websocket连接 2.清除意识流
				this.socketConnect()
			}else{
				this.clearISU()
			}
			//关闭语音 防止多重语音
			if(this.EPlayer){
				this.EPlayer.stop()
			}
		},

		convertAudioToStream(filePath) {
			const that = this
			const fileSystemManager = uni.getFileSystemManager();
			fileSystemManager.readFile({
				filePath: filePath, // 音频文件路径
				success: function(res) {
					console.log('音频',res.data);
					// 这里的res.data就是音频文件的ArrayBuffer数据，根据需要对其进行操作。
					// 比如，你可以将这个数据上传到服务器。
					//语音接口
					uni.uploadFile({
						url: 'https://admin.mindepoch.com:8089/speechConvertor',
						filePath: filePath,
						name: 'file',
						header: {
							'Content-Type': 'multipart/form-data',
							'Cookie': `${uni.getStorageSync('session_token')}`,
						},
						success: uploadFileRes => {
							const vocieData = JSON.parse(uploadFileRes.data)
							console.log('uploadFile success, res is:', uploadFileRes);
							if(vocieData.code===1){
								if(vocieData.message.transcription.length==0){
										uni.showToast({
											title: '说话时长过短，请重新录制！',
											icon: 'none'
										});
									return
								}
								that.inputVal += vocieData.message.transcription[0].text
								//获取到用户说的话
								// that.socketTask.send({
								// 	data: JSON.stringify({
								// 		type: 0,
								// 		content: that.inputVal
								// 	}),
								// 	success: () => {
								// 		console.log('消息发送成功')
								// 		that.loading = true;
								// 		uni.showLoading({
								// 			title: vocieData.message,
								// 			mask: true, // 显示透明蒙层，防止触摸穿透
								// 		});
								// 		let str = '对方正在输入...'
								// 		let i = 6
								// 		that.timer = setInterval(() => {
								// 			if(i<10){
								// 				i += 1
								// 			}else{
								// 				i = 6
								// 			}
								// 			uni.setNavigationBarTitle({
								// 				title: str.substr(0,i)
								// 			});
								// 		}, 400);
								// 	}
								// });
							}else{
								that.loading = false;
								uni.showToast({
									title: vocieData.message,
									icon: 'none'
								});
							}
						},
						fail: uploadFileErr => {
							console.error('uploadFile error, err is:', uploadFileErr);
						}
					})
				},
				fail: function(err) {
					console.log(err);
				}
			});
		},
		startRecord() {
			console.log('开始录音');
			recorderManager.start();
			this.activeState = 'activeMicrophone'
			uni.setNavigationBarTitle({
				title: '语音输入中...'
			});
		},
		endRecord() {
			console.log('录音结束');
			recorderManager.stop();
			this.activeState = ''
			uni.setNavigationBarTitle({
				title: this.currentPageData.name
			});
		},

		handleShow() {
			this.show = false
		},
		handleMore() {
			//出现物品栏
			this.show = true
		},
		handleFocus(){
			this.focus = 'activeFocus'
			this.showSend = 'showSend'
			this.boxClass = 'chat-window-message2'
			// console.log('聚焦')
		},

		hadnleBlur(){
			console.log('blur')
			this.focus = ''
			// console.log('失焦')
			this.showSend = ''
			this.boxClass = 'chat-window-message'
			uni.setNavigationBarTitle({
				title: this.currentPageData.name
			});
		},
		handleSendMessage() {
			// console.log('click')
			if(this.inputVal.trim()===''){
				uni.showToast({
					title: '输入框值不可为空',
					icon: 'none'
				});
				// this.inputVal = ''
				return
			}
			// 用户的每个输入需要立即回显，并回复一个[思考中...]的动画
			this.timerConsider = setInterval(() => {
				this.count++;
			}, 1000);
			this.historyRecord.push({
				Message: this.inputVal,
				WObj:{}
			},{
				Message: '正在思考中...',
				WObj: {animaite:'hhh'}
			})
			var cont = this.inputVal
			// this.inputVal = ''
			//滚动条触底
			uni.createSelectorQuery().in(this).select('#scroll-view-content').boundingClientRect((res)=>{
				console.log('res',res,this.historyRecord.length)
				if(res){
					this.scrollTop=res.height;
				}else{
					this.scrollTop=this.historyRecord.length*1000;
				}
			}).exec()

			this.socketTask.send({
				data: JSON.stringify({
					type: 0,
					content: cont
				}),
				success: () => {
					console.log('消息发送成功')
					this.loading = true;
					// uni.showLoading({
					// 	title: '思考中...',
					// 	mask: true // 是否显示透明蒙层，防止触摸穿透，默认为 false
					// });

					let str = '对方正在输入...'
					let i = 6
					this.timer = setInterval(() => {
						if(i<10){
							i += 1
						}else{
							i = 6
						}
						uni.setNavigationBarTitle({
							title: str.substr(0,i)
						});
					}, 400);
				}
			});
		},
		handleSendMessage2() {
			if(this.socketTask==null){
				this.socketConnect()
			}

			// console.log('click')
			if(this.inputVal.trim()===''){
				uni.showToast({
					title: '输入框值不可为空',
					icon: 'none'
				});
				this.inputVal = ''
				return
			}
			this.glod_user = true
			this.inputVal = this.userDoing ?('我'+ this.inputVal):( " “ " + this.inputVal + " ” ")

			
			// 用户的每个输入需要立即回显，并回复一个[思考中...]的动画
			this.timerConsider = setInterval(() => {
				this.count++;
			}, 1000);
			this.historyRecord.push({
				Message: this.inputVal,
				WObj:{}
			},{
				Message: '正在思考中...',
				WObj: {animaite:'hhh'}
			})
			var cont = this.inputVal
			// this.inputVal = ''
			//滚动条触底
			uni.createSelectorQuery().in(this).select('#scroll-view-content').boundingClientRect((res)=>{
				console.log('res',res,this.historyRecord.length)
				if(res){
					this.scrollTop=res.height;
				}else{
					this.scrollTop=this.historyRecord.length*1000;
				}
			}).exec()

			//关闭语音 防止多重语音
			if(this.EPlayer){
				this.EPlayer.stop()
				clearInterval(this.Strem)
				this.jumping = true
			}
			console.log('socketTask',this.socketTask)
			this.socketTask.send({
				data: JSON.stringify({
					type: 0,
					content: this.inputVal
				}),
				success: () => {
					console.log('消息发送成功')
					this.loading = true;
					this.inputVal_UI = this.inputVal
					this.inputVal = ''
					this.glod_dp = false
					// this.glod_user = true

					let str = '对方正在输入...'
					let i = 6
					this.timer = setInterval(() => {
						if(i<10){
							i += 1
						}else{
							i = 6
						}
						uni.setNavigationBarTitle({
							title: str.substr(0,i)
						});
						this.yyds_pangbai = str.substr(0,i)
					}, 400);
				}
			});
		},
		computeLen(OBJ) {
			console.log(OBJ)
			// OBJ.content = OBJ.content.replace("\n","")
			let Sr = "", cp = OBJ.content
			while (1) {
				let sAim = cp.match(/,|，|。|\!|！|？|\?|\n/)
				if (Sr.length < 20 && sAim) {
					Sr += cp.substring(0, sAim.index + 1)
					cp = cp.substring(sAim.index + 1)
				} else {
					if ((Sr.length + cp.length) < 20 || Sr.length < 15) {
						Sr += cp
					}
					break;
				}
			}
			let obj = {}
			obj.Sr = Sr
			obj.content = OBJ.content.replace(Sr, "")
			return obj
		},

		//假人音线
		FetchAbuffer(OriginObj, voicer, Sarry, CB) {
			let Cobj2 = this.computeLen(OriginObj);
			// console.log('llllllllll',Cobj2)
			let Asr = Cobj2.Sr;
			uni.request({
				url: 'https://admin.mindepoch.com:8089/say/api/ra',
				method: 'post',
				responseType: 'arraybuffer', // 设置响应类型为 'arraybuffer'
				header: {
					'Content-Type': 'text/plain',
					'Format': 'audio-24khz-96kbitrate-mono-mp3',
				},
				data:this.createSSML(Cobj2.Sr, voicer)
			}).then(arrayBuffer => {
				console.log('假人arrayBuffer',arrayBuffer)
				Sarry.push({ A: arrayBuffer[1].data, S: Asr });
				// OriginObj = Cobj2
				this.Cobj2.content = Cobj2.content
				this.Cobj2.Sr = Cobj2.Sr
				// console.log('OriginObj',OriginObj)
				if (Cobj2.content != "") {
					setTimeout(() => {
						this.FetchAbuffer(Cobj2, voicer, Sarry)
					}, 1000)
				}
			}).catch(err=>{
				console.log(1223,err)
			})
		},

		//真人音线
		FetchAbuffer_real(OriginObj, voicer, Sarry, CB) {
			let Cobj = this.computeLen(OriginObj);
			let Asr = Cobj.Sr;
			uni.request({
				url: 'https://admin.mindepoch.com:8089/VoiceMode/GetVoiceEcho',
				method: 'post',
				responseType: 'arraybuffer', // 设置响应类型为 'arraybuffer'
				header: {
					'Content-Type': 'text/plain',
					'Format': 'audio-24khz-96kbitrate-mono-mp3',
				},
				data:this.createSSML(Cobj.Sr, voicer)
			}).then(arrayBuffer => {
				// console.log('[真人buffer[[[[')
				Sarry.push({ A: arrayBuffer[1].data, S: Asr });
				// OriginObj = Cobj
				this.Cobj.content = Cobj.content
				this.Cobj.Sr = Cobj.Sr
				if (Cobj.content != "") {
					setTimeout(() => {
						this.FetchAbuffer_real(Cobj, voicer, Sarry)
					}, 1000)
				}
			})
		},

		execFile(data,ISLIU_content){
			// let arrObj = data;
			// const content = arrObj[0].text;
			// //quoted为真 或为假 表示 真假音线
			// const voicer = arrObj[0].quoted ? 
			// this.currentPageData.voiceGroups[1] : 
			// this.currentPageData.voiceGroups[0]
			// const voicer = arrObj[0].quoted ? this.currentPageData.voiceGroups[1] : this.currentPageData.voiceGroups[0];
			
			let arrObj = data;
			const content = arrObj[0].text;
			const voicer = arrObj[0].voicer;

			this.GoSay(content,voicer,(text, falg)=>{
				if(arrObj[0].quoted){
					if(text!==""&&!falg){
						this.glod_dp = true
						// this.glod_user = false
						this.yyds_dp = text
						this.yyds_pangbai += " “ "+text+ " ” "
					}
					if (falg) {
						console.log('GoSound讲话完毕！')
						arrObj.shift()
						console.log('arrObj',arrObj)
						if(arrObj.length!==0){
							this.execFile(arrObj)
						}
					}
				}else{
					if(text!==""&&!falg){
						this.kill = false
						this.delayText(text)
					}
					if (falg) {
						console.log('GoSay讲话完毕！')
						this.kill = true
						arrObj.shift()
						console.log('arrObj',arrObj)
						if(arrObj.length!==0){
							this.execFile(arrObj)
						}
					}
				}
			})

			// if(this.soundVoice[voicer]){
			// 	//假人音线
			// 	this.GoSay(content,voicer,(text, falg)=>{
			// 		if(text!==""&&!falg){
			// 			this.kill = false
			// 			this.delayText(text)
			// 		}
			// 		if (falg) {
			// 			console.log('GoSay讲话完毕！')
			// 			this.kill = true
			// 			arrObj.shift()
			// 			console.log('arrObj',arrObj)
			// 			if(arrObj.length!==0){
			// 				this.execFile(arrObj)
			// 			}
			// 		}
			// 	})
			// }else{
			// 	this.GoSound(content,voicer,(text, falg)=>{
			// 		if(text!==""&&!falg){
			// 			this.glod_dp = true
			// 			// this.glod_user = false
			// 			this.yyds_dp = text
			// 			this.yyds_pangbai += " “ "+text+ " ” "
			// 		}
			// 		if (falg) {
			// 			console.log('GoSound讲话完毕！')
			// 			arrObj.shift()
			// 			console.log('arrObj',arrObj)
			// 			if(arrObj.length!==0){
			// 				this.execFile(arrObj)
			// 			}
			// 		}
			// 	})
			// }
		},

		separateChineseAndNumbers(str) {
			console.log(str)
			// 使用正则表达式匹配数字和中文字符
			const matches = str.match(/[\u4e00-\u9fa5]+|[0-9]+/g);
			return matches || [];
		},

		delayText(text){
			let count = text.split("")
			clearInterval(this.Strem)
			this.Strem = setInterval(() => {
				// let Nc = count.shift()
				this.Nc = count.shift()
				// console.log('this.Nc text',count,this.Nc)
				this.yyds_pangbai += this.Nc
				this.str = count.join("")
				this.scrollToBottom_pangbai() //滚动条到底部
				if(count.length==0){
					clearInterval(this.Strem)
				}
			}, 100);
		},

		createSSML(text, voiceName) {
			return '\
				<speak xmlns="http://www.w3.org/2001/10/synthesis" xmlns:mstts="http://www.w3.org/2001/mstts" xmlns:emo="http://www.w3.org/2009/10/emotionml" version="1.0" xml:lang="en-US">\
					<voice name="' + this.soundVoice[voiceName] + '">\
						<prosody rate="10%" pitch="0%">\
							' + text + '\
						</prosody >\
					</voice >\
				</speak > ';
		},

		// GoSound  真人音线
		GoSound(content, voicer, CB) {
			
			// 要读的文字 声线 回调
			const that = this
			let Sarry = [];
			this.Cobj = this.computeLen({ content });
			uni.request({
				url: 'https://admin.mindepoch.com:8089/VoiceMode/GetVoiceEcho',
				method: 'post',
				responseType: 'arraybuffer', // 设置响应类型为 'arraybuffer'
				header: {
					'Content-Type': 'application/x-www-form-urlencoded',
					'Cookie': `${uni.getStorageSync('session_token')}`
				},
				data: {
					name: this.Allvoice[voicer],
					voice_text: this.Cobj.Sr,
					text_language: 'zh'
				}
			}).then(arrayBuffer => {
				console.log('arrayBuffer---GoSound真人音线',arrayBuffer)
				const FileSystemManager = wx.getFileSystemManager();
				that.tempFilePath = wx.env.USER_DATA_PATH + `/tempAudio_${new Date().getTime()}.mp3`; // 或者其他音频格式，根据实际情况而定

				FileSystemManager.writeFile({
					filePath: that.tempFilePath,
					data: arrayBuffer[1].data,
					encoding: 'binary',
					success: function() {
						// 写入成功，使用小程序的背景音频播放器播放音频
						if (that.EPlayer) {
							// that.EPlayer.onended=null
							// that.EPlayer.onEnded()
							that.EPlayer.stop()
							// that.EPlayer.cb && that.EPlayer.cb(that.Cobj.Sr, true)
						}
						if (CB) CB(that.Cobj.Sr)
						that.EPlayer = wx.createInnerAudioContext();
						that.EPlayer.src = that.tempFilePath;
						that.EPlayer.play();
						console.log('GoSound----------oooooo')
						that.EPlayer.cb = CB
						var Rfunc = () => {
							if(that.jumping){
								return
							}
							that.jumping = true
							console.log('GoSoundrfun')
							//移除旧文件
							console.log(1123,that.tempFilePath)
							FileSystemManager.unlink({
								filePath:that.tempFilePath,
								success (res) {
									console.log('删除成功',res)
								},
								fail (err) {
									console.error('删除失败', err);
								}
							})

							if (Sarry.length == 0) {
								console.log('读完了 真人音线')
								if (that.Cobj.content != '') {
									setTimeout(() => {
										// that.EPlayer.onEnded(Rfunc)
										that.EPlayer.onended()
									}, 1000);
									that.jumping = false
									return
								}
								if (CB) CB(that.Cobj.Sr, true)
								that.jumping = false
								return
							}
							let Sobj = Sarry.shift()
							console.log('Sobj',Sobj)
							if(Sobj.S==null){
								CB(Sobj.S)
								that.jumping = false
								Rfunc()
							}else{
								that.tempFilePath2 = wx.env.USER_DATA_PATH + `/tempAudio_${new Date().getTime()}.mp3`;
								FileSystemManager.writeFile({
									filePath: that.tempFilePath2,
									data: Sobj.A,
									encoding: 'binary',
									success: function() {
										// console.log('1144',that.tempFilePath2)
										that.tempFilePath = that.tempFilePath2
										if (CB) CB(Sobj.S)
										that.EPlayer = wx.createInnerAudioContext();
										that.EPlayer.src = that.tempFilePath;
										that.EPlayer.play();
										
										that.EPlayer.onEnded(Rfunc)
										that.EPlayer.onended = Rfunc
									},
									fail: console.error,
								});
							}
							that.jumping = false
						}
						that.EPlayer.onEnded(Rfunc)
						that.EPlayer.onended = Rfunc
						if (that.Cobj.content != "") {
							setTimeout(() => {
								that.FetchAbuffer_real(that.Cobj, voicer, Sarry, CB)
							}, 5000)
						}
					},
					fail:(err)=>{
						console.log('GoSound---------uuu',err)
					}
				});
			}).catch(reason => {
				console.log('reason',reason);
			})
		},

		//假人音线
		GoSay(content, voicer, CB) {
			if(!this.soundVoice[voicer]){
				//真人音线
				this.GoSound(content, voicer, CB)
				return
			}
			// 要读的文字 声线 回调
			var that = this;
			let Sarry = [] ;
			this.Cobj2 = this.computeLen({ content });
			uni.request({
				url: 'https://admin.mindepoch.com:8089/say/api/ra',
				method: 'post',
				responseType: 'arraybuffer', // 设置响应类型为 'arraybuffer'
				header: {
					'Content-Type': 'text/plain',
					'Format': 'audio-24khz-96kbitrate-mono-mp3',
				},
				data:this.createSSML(this.Cobj2.Sr, voicer)
			}).then(arrayBuffer => {
				// console.log('arrayBuffer',arrayBuffer)
				const FileSystemManager = wx.getFileSystemManager();
				this.tempFilePath = wx.env.USER_DATA_PATH + `/tempAudio_${new Date().getTime()}.mp3`; // 或者其他音频格式，根据实际情况而定
				// console.log('tempFilePath:',this.tempFilePath);
				FileSystemManager.writeFile({
					filePath: this.tempFilePath,
					data: arrayBuffer[1].data,
					encoding: 'binary',
					success: () => {
						// 写入成功，使用小程序的背景音频播放器播放音频
						if (this.EPlayer) {
							// this.EPlayer.onended=null
							// this.EPlayer.onEnded()
							this.EPlayer.stop()
							// that.EPlayer.cb && that.EPlayer.cb(that.Cobj2.Sr, true, true)
						}
						if (CB) CB(this.Cobj2.Sr)
						this.EPlayer = wx.createInnerAudioContext();
						this.EPlayer.src = this.tempFilePath;
						this.EPlayer.play();
						console.log('oooGoSayooo')
						this.EPlayer.cb = CB
						var Rfunc = () => {
							if(this.jumping){
								return
							}
							this.jumping = true
							FileSystemManager.unlink({
								filePath:that.tempFilePath,
								success (res) {
									// console.log('删除成功',res)
								},
								fail (err) {
									// console.error('删除失败', err);
								}
							})

							if (Sarry.length == 0) {
								this.kill = true
								if (this.Cobj2.content != '') {
									setTimeout(() => {
										// this.EPlayer.onEnded(Rfunc)
										this.EPlayer.onended()
									}, 1000);
									this.jumping = false
									return
								}
								if (CB){
									CB(this.Cobj2.Sr, true)
								}
								this.jumping = false
								return
							}
							let Sobj = Sarry.shift()

							if(Sobj.A==null){
								CB(Sobj.S)
								this.jumping = false
								Rfunc()
							}else{
								this.tempFilePath2 = wx.env.USER_DATA_PATH + `/tempAudio_${new Date().getTime()}.mp3`;
								// const mark = that.Cobj2.Sr
								FileSystemManager.writeFile({
									filePath: this.tempFilePath2,
									data: Sobj.A,
									encoding: 'binary',
									success: ()=> {
										this.tempFilePath = this.tempFilePath2
										if (CB) CB(Sobj.S)
										this.EPlayer = wx.createInnerAudioContext();
										this.EPlayer.src = this.tempFilePath;
										this.EPlayer.play();
										this.EPlayer.onEnded(Rfunc)
										this.EPlayer.onended = Rfunc
									},
									fail: console.error,
								});
							}
							this.jumping = false
						}
						this.EPlayer.onEnded(Rfunc)
						this.EPlayer.onended = Rfunc
						if (this.Cobj2.content != "") {
							setTimeout(() => {
								this.FetchAbuffer(this.Cobj2, voicer, Sarry, CB)
							}, 5000)
						}

					},
					fail:(err)=>{
						console.log('GoSayuuu',err)
					}
				});
			}).catch(reason => {
				console.log('reason',reason);
			})
		},

		extractQuotedTexts(str) {
			// 正则表达式匹配引号内的文本，包括转义引号
			const pattern = /(["'])(?:(?=(\\?))\2.)*?\1/g;
			let matches = [];
			let match;
			// 使用正则表达式的exec方法进行循环匹配
			while ((match = pattern.exec(str)) !== null) {
				// 获取引号内的文本（排除引号本身）
				let quotedText = match[0].slice(1, -1).replace(/\\(["'])/g, '$1'); // 去除引号并取消转义
				matches.push(quotedText);
			}
			return matches.length == 0 ? [str] : matches;
		}
	}
}
</script>


<style scoped>

.chat {
	background-color: #293339a2;
}

.formContainer {
    height: 10vh;
    width: 100vw;
    background-color: #000000c7;
    position: fixed;
    bottom: 0;
    left: 0;
	z-index: 99;
}
.outside{
	height: 80vh !important;
    width: 96%;
    padding: 1.5vh 0;
    overflow: scroll;
    position: absolute;
    top: 7vh;
    left: 0;
    margin: auto 2%;
}
/**
.container {
    margin: auto 2%;
    height: 80vh !important;
    padding: 1.5vh 0;
    overflow: scroll;
}
**/
/**
.scroll{
	margin: auto 2%;
    height: 80vh !important;
    padding: 1.5vh 0;
    overflow: scroll;
}
**/
.chat-window {
	width: 100vw;
	height: 100rpx;
	position: fixed;
	bottom: 15rpx;
	left: 0;
}

.chat-window-message {
	font-size: 26rpx;
	margin-left: 2vw;
    margin-bottom: 6vh;
    width: 70vw;
    height: 6vh;
    border-radius: 10rpx;
    border: 1px solid #ffffff9c;
    color: white;
    text-indent: 10rpx;
	padding-left: 10rpx;
}
.chat-window-message3 {
    font-size: 26rpx;
	margin-left: 2vw;
	margin-bottom: 2vh;
    width: 25vw;
    height: 6vh;
    border-radius: 10rpx;
    border: 1px solid #ffffff9c;
    color: white;
    text-indent: 10rpx;
	padding-left: 10rpx;
}

.activeAnimaite{
	transition: all .1s;
}


.chat-window-message2 {
	font-size: 26rpx;
	margin-left: 2vw;
    margin-bottom: 6vh;
    width: 70vw;
    height: 6vh;
    border-radius: 10rpx;
    border: 1px solid #ffffff9c;
    color: white;
    text-indent: 10rpx;
	padding-left: 10rpx;
}

#Send {
    width: 7vh;
    height: 7vh;
	position: fixed;
	bottom: 1.2vh;
	right: 25rpx;
	border: 1px solid rgba(154, 150, 211, 0.788);
	border-radius: 50%;
	display: none;
}

#Send2 {
    width: 50rpx;
    height: 50rpx;
	position: absolute;
	z-index:9;
	right:20rpx;
	top: 50%;
	transform: translateY(-50%);

	background:url(../../static/UI/发送icon.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

#SendSound {
    width: 90rpx;
    height: 90rpx;
    position: absolute;
    bottom: 12rpx;
    left: 89%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%;
    transition: all .5s;
	border: 1px solid rgba(255, 255, 255, 0.578);
}

.historyListData {
	font-size: 26rpx;
}
.historyListData:last-child{
	margin-bottom: 30rpx;
}

.historyListData_item {
	color: white;
}

.heartActive {}

.dealFloat {}

.li_left {
	margin-left: 40rpx;
}

.li_left::after {
	border-top: 10px solid #ddd5ff33;
	content: "";
	height: 0;
	position: absolute;
	top: 15rpx;
	width: 0;
	border-left: 15px solid #0000;
	left: 90rpx;
}

.li_right {
	margin-right: 120rpx;
}

.li_right::before {
	border-top: 10px solid #ddd5ff33;
	content: "";
	height: 0;
	position: absolute;
	top: 15rpx;
	width: 0;
	border-right: 15px solid #0000;
	right: 90rpx;
}

.doubleStatus {
	background-color: #adb6ff66;
	border-radius: 5px;
	display: inline-block;
	margin-bottom: 6px;
	padding: 3px 9px 3px 3px;
}

.allbody {
	background-color: #ddd5ff33;
	padding: 12rpx 15rpx;
	border-radius: 6px;
	display: inline-block;
	word-break: break-all;
	max-width: 60vw;
}

.left {
	float: left;
}

.right {
	float: right;
}

.distence {
	margin-bottom: 20rpx;

}

.leftPhoto {
	position: relative;
}

.leftPhoto image {
	position: absolute;
	top: 0;
	left: 0;
}

.rightPhoto {
	position: relative;
}

.rightPhoto image {
	position: absolute;
	top: 0;
	right: 0;
}

.images {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: -99;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.images_image{

}

.photo {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	float: left;
}
.inline{
}

.full-screen-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* 半透明遮罩层 */
	z-index: 999;
}
.full-screen-mask2 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 998;
	/* 半透明遮罩层 */
}
.full-screen-mask3 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	/* 半透明遮罩层 */
}
.full-screen-mask4{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	/* 半透明遮罩层 */
}

.current {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: 998;
}

.current2 {
	position: fixed;
	top: 50px;
	left: 0;
	width: 100vw;
	z-index: 999;
}

.more {
	width: 60rpx;
	height: 60rpx;
	margin-right: 10rpx;
}

.money {
	text-align: center;
}

.money>image {
	width: 40rpx;
	height: 40rpx;
}

.monney {
	font-size: 20rpx;
	color: #ffffff;
}

.shadow {
	z-index: 99 !important;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #0000007b;
}

.goods {
	z-index: 999 !important;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80vw;
	overflow-y: scroll;
	box-sizing: border-box;

	background: url(../../static/UI/背包框.png);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.containerL {
	height: 50vh;
	overflow-y: scroll;
}

.hisd{
	height:70rpx;
	width: 100%;
	position:relative;
}
/* 栅格容器样式 */
.grid-container {
	display: flex;
	flex-wrap: wrap;
	/* 允许元素换行 */
	justify-content: flex-start;
	/* 元素间距设置为平均分布 */
	overflow-y: scroll;
	padding-top:10rpx;
	padding-bottom:10rpx;
}

/* 单个格子样式 */
.grid-item {
	width: 30%;
	margin-left: 5%;
	/* 一行三个物品，每个物品占据宽度的30% */
	background-color: #e1ebf170;
	/* 背景颜色 */
	margin-bottom: 20px;
	/* 格子间底部外边距 */
	text-align: center;
	/* 内容居中显示 */
	border-radius: 5rpx;
	box-shadow:0 0 0 2rpx #ffffff;
}

.grid_item_box {
	width: 100%;
	height: 170rpx;
	background-color: #342e2e6e;
	/* 背景颜色 */
}
.grid_item_box_image{
	width: 100%;
	height: 100%;
}
.grid_item_box_image_text{
	color:#ffffff;
	font-size:28rpx;
	font-weight:blod;
}
.topBox {
	background-color: #00000091;
	height: 7vh;
	width: 100vw;
	display: flex;
    justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}
.activeMicrophone{
	width: 150rpx !important;
	height: 150rpx !important;
	left:90vw;
	z-index: 999;
    border-radius: 50%;
    border: 1px solid #ffffff2e;
    padding: 2rpx;
    box-shadow: 0 0 14rpx #fff;
	
}
/* 定义进入和离开时的过渡状态 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}

/* 定义进入开始和离开结束时的状态 */
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.activeFocus{
	left: 90vw !important;
	transition: all .5s;
	opacity: 0;
	z-index: -1 !important;
}
.showSend{
	display: block !important;
}
.menu{
	position: fixed;
	right: 5px;
	bottom: 100px;
	z-index:2;
}
.ClearHistoryRecord{
	/***
	position: fixed;
    bottom: 18vh;
    right: 2vw;
	***/
	font-size: 20rpx;
	color: #fff;
	font-size: 24rpx;
	z-index: 99;
	margin-bottom: 10px;
}
.ClearHistoryRecord>image{
	width: 100rpx;
	height: 100rpx;
	display: block;
	margin: 0 auto 10rpx;
}
.ClearHistoryRecord>image:active{
	scale: 1.9;
}
.plg1{
	background-image: url(../../static/UI/故事1.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.plg1:active{
	background-image: url(../../static/UI/故事2.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.plg2{
	background-image: url(../../static/UI/历史推演1.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.plg2:active{
	background-image: url(../../static/UI/历史推演2.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.plg3{
	background-image: url(../../static/UI/重新载入1.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.plg3:active{
	background-image: url(../../static/UI/重新载入2.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.plg4{
	background-image: url(../../static/UI/推演分享1.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.plg4:active{
	background-image: url(../../static/UI/推演分享2.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.shareWord{
	width: 100%;
	height: 100%;
	opacity: 0;
}
.plg5{
	background-image: url(../../static/UI/发送红包1.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.plg5:active{
	background-image: url(../../static/UI/发送红包2.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.plg6{
	background-image: url(../../static/UI/我的道具1.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.plg6:active{
	background-image: url(../../static/UI/我的道具2.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.sendMoney{
	width: 110rpx;
	height: 90rpx;
	font-size: 20rpx;
	color: #fff;
	font-size: 24rpx;
	z-index: 99;
	margin-bottom: 10px;
}
.sendMoney>image{
	width: 110rpx;
	height: 90rpx;
	display: block;
	margin: 0 auto 10rpx;
}

.wrapper_inputMoney{
	width: 65vw;
	height: 200rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	background-color: rgba(180, 142, 148, 0.34);
	padding: 40rpx;
	z-index: 999;
}
.wrapper_inputMoney_item{
	
}
.wrapper_inputMoney_item>input{
	width: 80%;
	border: 1px solid #ffffff;
	border-radius: 10rpx;
	height: 70rpx;
	text-indent: 10rpx;
	margin: 30rpx auto;
	font-size: 34rpx;
	color: #ffffff;
}
.yty{
	margin: auto;
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: rgb(158, 166, 184);
	font-size: 40rpx;
	border-radius: 15rpx;
	color: #ffffff;
	margin-top: 20rpx;
}
.board{
	width: 80vw;
	height: 85vh;
	border-radius: 10rpx;
	position: fixed;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	z-index: 999999;
	padding: 12rpx;
	overflow-y:scroll;
}
.boardBG{
	width: 80vw;
	height: 80vh;
	border-radius: 10rpx;
	position: fixed;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	z-index: 999;
}
.contentHeader{
	text-align: center;
	font-size: 40rpx;
    font-family: "隶书";
	padding: 20rpx;
}
.contentHeader2{
	text-align: center;
	font-size: 50rpx;
    font-family: "隶书";
	padding: 30rpx;
}
.wiik{
	padding: 10rpx 30rpx;
	font-size:26rpx;
	min-height: 300rpx;
	max-height: 700rpx;
	line-height: 38rpx;
	overflow-y: scroll;
}
.contentMain{
	font-size: 30rpx;
    padding: 0rpx 30rpx;
    line-height: 45rpx;
    overflow-y: scroll;
    height: 350rpx;
}
.imageH{
	height: 340rpx;
	width: 80%;
	margin:auto;
	z-index: -1;
}
.jklock{
	position:absolute;
	top:0;
	left:0;
	background-image: url(https://admin.mindepoch.com:8089/worlds/结局框.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 80vw;
	height: 80vh;
	z-index:-2;
}
.HHH{
	position: relative;
}
.getResult{
	height: 100rpx;
	width:500rpx;
	line-height:100rpx;
	position: fixed;
	bottom: 30rpx;
	left:50%;
	transform:translateX(-50%);
	font-size: 40rpx;
	z-index: 1000;
	text-align:center;
}
.shadow{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top:0;
	left:0;
	z-index: 999998;
}
.shadows{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top:0;
	left:0;
	z-index: -1;
	background-color: #0000007b;
}
.backHome{
	width: 70rpx;
	height: 60rpx;
	margin-left: 10rpx;
}
.footer{
	height: 60rpx;
	width:100%;
	display: flex;
	position:absolute;
	bottom:60rpx;
	left:0;
}
.home{
    width: 200rpx;
    height: 50rpx;
    font-size: 26rpx;
    line-height: 50rpx;
}
.reload{
    width: 200rpx;
    height: 50rpx;
    font-size: 26rpx;
    line-height: 50rpx;
}
.bk{
	width: 100%;
	height: 100%;
	position: absolute;
    top: 0;
    left: 0;
    opacity: 0.25;
}
.jk{
	position: relative;
	padding-top:30rpx;
	padding-bottom:30rpx;
}
.jk2{
	height: 100%;
	position: relative;
	background-image: url(https://admin.mindepoch.com:8089/worlds/结局框.png);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.fuck{
	display:flex;
}
.parent-element::after {
    content: "";
    display: table;
    clear: both;
}
.dialog{
	width: 80vw;
	height: 400rpx;
	position: fixed;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	border-radius: 10rpx;
	background-color: rgba(180, 142, 148, 0.34);
	z-index: 999;
}
.dialogHeader{
	text-align: center;
	font-size: 40rpx;
	color: #ffffff;
	padding: 20rpx;
}
.dialogContent{
	
}
.dialogFooter > button{
	margin: auto;
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: rgb(158, 166, 184);
	font-size: 40rpx;
	border-radius: 15rpx;
	color: #ffffff;
	margin-top: 80rpx;
}
.inputU{
	border: 1px solid #ffffff;
	border-radius: 10rpx;
	width: 400rpx;
	height: 70rpx;
	text-indent: 10rpx;
	margin: 30rpx auto;
	font-size: 34rpx;
	color: #ffffff;
}
.textStyle{
	font-size: 30rpx;
}
@keyframes scroll-to-bottom {
	from {
	  transform: translateY(0);
	}
	to {
	  transform: translateY(100%);
	}
  }
  
  .scroll-to-bottom {
	animation: scroll-to-bottom 0.5s;
  }
</style>

<style scoped>

	.UI{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
	}
	.UI_wrapper{
		
	}
	.UI_head{
		text-align: center;
		color: aliceblue;
		/***background: url(../../static/UI/地点和时间框.png);***/
		background: url(https://admin.mindepoch.com:8089/worlds/地点和时间框.png);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		height: 120rpx;
		width: 100vw;
		margin-top: 10px;
	}
	.UI_head_title{
		font-family: "title";
		color: black;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-weight: 700;
	}
	.UI_head_timer{
		height: 40rpx;
		line-height: 40rpx;
		color: #000;
		font-size: 26rpx;
		font-weight: 700;
	}
	.UI_states{
		height: 110rpx;
		padding: 20rpx;
		display: flex;
	}
	.UI_states_photo{
		width: 120rpx;
		height:120rpx;
		transform:translateX(15rpx);
	}
	.UI_states_photo_wrapper{
		/**background: url(../../static/UI/角色头像框.png);**/
		background: url(https://admin.mindepoch.com:8089/worlds/角色头像框.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		position:relative;
	}
	.UI_states_photo_item{
		width: 80rpx;
		height: 80rpx;
		margin-top: 15rpx;
		margin-left: 15rpx;
		border-radius: 50%;
	}
	.UI_states_photo_item_same{
		width: 80rpx;
		height: 80rpx;
		margin-top: 15rpx;
		margin-left: 15rpx;
		border-radius: 50%;
	}
	.icon_log{
		transform:translateX(10rpx);
		width: 45rpx;
		height: 50rpx;
		margin-top:30rpx;
		background: url(../../static/UI/三角形.png);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}
	.UI_states_value{
		width: 90vw;
		transform:translateX(-15rpx);
	}
	.UI_states_value_top{
		height: 40rpx;
		margin-top: 10rpx;
		display:flex;
	}
	.UI_states_value_bottom{
		height: 40rpx;
		margin-top: 10rpx;
		display:flex;
	}

	.process{
		line-height:40rpx;
		width:50%;
		color:#ffffff;
		font-size:22rpx;
	}
	.UI_body{
		height: 50vh;
		margin: 20% 10% 0;
		position: relative;
	}
	.UI_body_left{
		width: 100%;
		display:flex;
		position:absolute;
		top:130rpx;
	}
	.UI_body_left_content{
		width:100%;
		display:flex;
	}
	.UI_body_left_content_photo{
		border-radius: 50%;
		width: 110rpx;
		height: 110rpx;
		position:relative;
		margin-top:5rpx;
		
		background: url(https://admin.mindepoch.com:8089/worlds/角色头像框.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.UI_body_left_content_text{
		transform:translateX(-30rpx);
		color: #fff;
		width: 88%;
		height: 120rpx;
		line-height:120rpx;
		text-indent:60rpx;

		background: url(../../static/UI/对话框2.png);
		background-size: 99% 99%;
		background-position: center;
		background-repeat: no-repeat;
		overflow:scroll;
	}

	.UI_body_right_content_text{
		transform:translateX(30rpx);
		color:#fff;
		width: 88%;
		height: 120rpx;
		line-height:120rpx;
		text-indent:30rpx;

		background: url(../../static/UI/对话框1.png);
		background-size: 99% 99%;
		background-position: center;
		background-repeat: no-repeat;
		overflow:scroll;
	}
	.UI_body_left_Pangbai_content{
		background: url(../../static/UI/旁白框.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		width: 79%;
		border-radius: 6rpx;
		position:absolute;
		bottom:0;
		left:50%;
		transform:translateX(-50%);
		padding-bottom: 30rpx;
	}
	.pangbai_title{
		height: 76rpx;
		color: #fff;
		padding: 0 20rpx;
		position:relative;
	}
	.pangbai_content{
		height: 250rpx;
		overflow: scroll;
		color: #fff;
		padding: 12rpx;
	}
	.UI_body_right{
		height:100rpx;
		width: 100%;
	}
	.UI_body_right_content{
		display:flex;
	}
	.clearfix:after {
		content: "";
		display: table;
		clear: both;
	}
	.UI_body_right_content_photo{
		border-radius: 50%;
		width: 110rpx;
		height: 110rpx;
		margin-top:5rpx;

		background: url(https://admin.mindepoch.com:8089/worlds/角色头像框.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.UI_footer{
		position: fixed;
		bottom: 30rpx;
		margin: auto 3vw;
		left: 0;
		width: 94vw;
		height: 100rpx;
	}
	.UI_footer_tool{

	}
	.UI_footer_tool_wrapper{
		display: flex;
		position: relative;
	}
	.say{
		height: 100rpx;
		width: 120rpx;
		
		background: url(../../static/UI/说1.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.doing{
		height: 100rpx;
		width: 120rpx;
		margin: 0 22rpx;

		background: url(../../static/UI/做1.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.sayDoingClass{
		border-radius:10rpx;
		background-color: #758ead8a;

		height: 100rpx;
		width: 120rpx;
		
		background: url(../../static/UI/说2.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.sayDoingClass2{
		border-radius:10rpx;
		background-color: #758ead8a;

		height: 100rpx;
		width: 120rpx;
		
		background: url(../../static/UI/做2.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.input{
		height: 84rpx;
		width: 80vw;
		margin-top: 8rpx;
		border: 1px solid #ffffff45;
		border-radius: 10rpx;
		position: relative;
	}
	.low{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.UI_input{
		height: 76rpx;
		width: 78%;
		margin-left: 1%;
		margin-top: 4rpx;
		border-radius: 10rpx;
		z-index: 9;
		color:#ffffff;
	}
	.processLine{
	}
	.processLine_item{
		height:50rpx;
		line-height:50rpx;
		color:#ffffff;
		font-size:23rpx;
		text-align:center;
		z-index:-1;
	}
	.sameFonts{
	}
	.no1{
		position:absolute;
		height:100%;
		z-index:-1;
		transition: all .7s;
	}
	.ksp{
		background-image: url(../../static/UI/绿2.png);
		
		background-repeat: no-repeat;
	}
	.ogc{
		background-image: url(../../static/UI/红2.png);
		background-repeat: no-repeat;
	}
	.jiegan{
		margin-top:5rpx;
		background: url(../../static/UI/绿.png);
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		position:relative;
	}
	.kongjugan{
		background: url(../../static/UI/红.png);
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		position:relative;
	}
	.fade-enter-active, .fade-leave-active {
		transition: opacity 1s;
	}
	.fade-enter, .fade-leave-to {
		opacity: 0;
	}
	.tre{
		position:absolute;
		right:30rpx;
		bottom:-250rpx;
		width:36rpx;
		height:27rpx;
		z-index:99;
	}
	#scrollView{
		z-index:1002;
	}
	.npc{
		word-break:break-all;
		white-space:pre-wrap;
		font-size: 25rpx;
		padding-right: 16rpx;
	}
	.confirm{
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 48rpx;
		font-family: '隶书';
		text-align: center;
		border-radius: 14rpx;
		color: #000000;
		position: absolute;
		bottom: 30rpx;
		right: 10rpx;
	}
	.reload_connect{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width:400rpx;
		background-color: aliceblue;
		font-size: 34rpx;
		border-radius: 6rpx;
		padding: 20rpx;
		background-color: rgb(222, 223, 227);
		z-index: 9999;
	}
	.connect_start{
		margin-top: 40rpx;
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #8fb4be;
		color: #fff;
	}
</style>
