<template>
	<view class="container">
		<view class="top-header flex">
			<view class="icon" @click="ToPatient">
				<image src="/static/img/icon.png"></image>
			</view>
			<view class="name">{{ name || '暂无姓名' }}</view>
			<view @click="ToHome">返回首页</view>
		</view>
		<view class="uni-column">
			<view class="content" id="content" :style="{ height: style.contentViewHeight + 'px' }">
				<scroll-view id="scrollview" class="Meslist" :scroll-y="true" :style="{ height: style.contentViewHeight + 'px' }"
				 :scroll-with-animation="true" :scroll-top="scrollTop">
					<view id="listBox">
						<view v-for="(ls, index) in MsgList" :key="index">
							<view class="m-item" :id="'message' + index">
								<view class="m-left">
									<image class="head_icon" :src="ls.avatar" v-if="ls.uid != userInfo.uid"></image>
								</view>
								<view class="m-content">
									<view class="m-content-head" :class="{ 'm-content-head-right': ls.uid == userInfo.uid }">
										<view :class="'m-content-head-' + 'home'" v-if="ls.uid == userInfo.uid">
											<view v-if="ls.type == 1">
												<view v-if="ls.content.indexOf('http')>-1">
													<a :href="ls.content">{{ls.content}}</a>
												</view>
												<rich-text v-else :nodes="ls.content.replace(reg, emotion)"></rich-text>
											</view>
											<view v-if="ls.type == 2">
												<image @click.stop="imgInfo(ls.content)" mode="widthFix" class="mes-image" :src="ls.content"></image>
											</view>
											<view v-if="ls.type == 4" >
												<view v-if=" typesq(ls.content.split(',')[1])">
													<a :href="`http://dxhred.igxys.com/questionnaire/before.html?id=${order_id}&token=${token}&name=${name}&type=${userInfo.type}`">
														<view class="question-title">
															 {{ ls.content.split(',')[1] }} 
														</view>
														<view class="question-img">
															<image src="../../static/img/img99.jpg" mode=""></image>
														</view>
													</a>
												</view>
												<view v-if="typesh(ls.content.split(',')[1] )">
													<a :href="`http://dxhred.igxys.com/questionnaire/index.html?id=${order_id}&token=${token}&name=${name}&type=${userInfo.type}`">
														<view class="question-title">
															 {{ ls.content.split(',')[1] }}
														</view>
														<view class="question-img">
															<image src="../../static/img/img99.jpg" mode=""></image>
														</view>
													</a>
												</view>
												<!-- <a :href="`http://dxhred.igxys.com/questionnaire/before.html?id=${order_id}&token=${token}&name=${name}&type=${userInfo.type}`">
													<view class="question-title">
														 {{ ls.content.split(',')[1] }} 
													</view>
													<view class="question-img">
														<image src="../../static/img/img99.jpg" mode=""></image>
													</view>
												</a> -->
											</view>
											<view v-if="ls.type == 5">
												<view v-if=" typesq(ls.content.split(',')[1])">
													<a :href="`http://dxhred.igxys.com/questionnaire/before.html?id=${order_id}&inquireid=${ls.content.split(',')[0].split('/')[ls.content.split(',')[0].split('/').length-1]}&token=${token}&name=${name}&type=${userInfo.type}`">
														<view class="question-title">
															{{ ls.content.split(',')[1] }} 
														</view>
														<view class="question-img">
															<image src="../../static/img/img100.jpg" mode=""></image>
														</view>
													</a>
												</view>
												<view v-if="typesh(ls.content.split(',')[1] )">
														<a :href="`http://dxhred.igxys.com/questionnaire/index.html?id=${order_id}&inquireid=${ls.content.split(',')[0].split('/')[ls.content.split(',')[0].split('/').length-1]}&token=${token}&name=${name}&type=${userInfo.type}`">
															<view class="question-title">
																{{ ls.content.split(',')[1] }}
															</view>
															<view class="question-img">
																<image src="../../static/img/img100.jpg" mode=""></image>
															</view>
														</a>
													</a>
												</view>
											</view>
										</view>
										
										<view :class="'m-content-head-' + 'customer'" v-if="ls.uid != userInfo.uid">
											<view v-if="ls.type == 1">
												<!-- #ifdef H5 -->
												<view v-if="ls.content.indexOf('http')>-1">
													<a :href="ls.content">{{ls.content}}</a>
												</view>
												<!-- #endif -->
												
												<rich-text :nodes="ls.content.replace(reg, emotion)"></rich-text>
											</view>
											<view v-if="ls.type == 2">
												<image @click.stop="imgInfo(ls.content)" mode="widthFix" class="mes-image" :src="ls.content"></image>
											</view>
												<view v-if="ls.type == 4" >
													<view v-if=" typesq(ls.content.split(',')[1])">
														<a :href="`http://dxhred.igxys.com/questionnaire/before.html?id=${order_id}&token=${token}&name=${name}&type=${userInfo.type}`">
															<view class="question-title">
																 {{ ls.content.split(',')[1] }}
															</view>
															<view class="question-img">
																<image src="../../static/img/img99.jpg" mode=""></image>
															</view>
														</a>
													</view>
													<view v-if="typesh(ls.content.split(',')[1] )">
														<a :href="`http://dxhred.igxys.com/questionnaire/index.html?id=${order_id}&token=${token}&name=${name}&type=${userInfo.type}`">
															<view class="question-title">
																 {{ ls.content.split(',')[1] }}
															</view>
															<view class="question-img">
																<image src="../../static/img/img99.jpg" mode=""></image>
															</view>
														</a>
													</view>
												</view>
												<view v-if="ls.type == 5" >
													<view v-if=" typesq(ls.content.split(',')[1])">
														<a :href="`http://dxhred.igxys.com/questionnaire/before.html?id=${order_id}&inquireid=${ls.content.split(',')[0].split('/')[ls.content.split(',')[0].split('/').length-1]}&token=${token}&name=${name}&type=${userInfo.type}`">
															<view class="question-title">
																{{ ls.content.split(',')[1] }} 
															</view>
															<view class="question-img">
																<image src="../../static/img/img100.jpg" mode=""></image>
															</view>
														</a>
													</view>
													<view v-if="typesh(ls.content.split(',')[1] )">
															<a :href="`http://dxhred.igxys.com/questionnaire/index.html?id=${order_id}&inquireid=${ls.content.split(',')[0].split('/')[ls.content.split(',')[0].split('/').length-1]}&token=${token}&name=${name}&type=${userInfo.type}`">
																<view class="question-title">
																	{{ ls.content.split(',')[1] }}
																</view>
																<view class="question-img">
																	<image src="../../static/img/img100.jpg" mode=""></image>
																</view>
															</a>
														</a>
													</view>
												</view>
										</view>
									</view>
								</view>
								<view class="m-right" v-if="userInfo.type == 2">
									<image class="head_icon" :src="userInfo.ext_info.photo" v-if="ls.uid == userInfo.uid"></image>
								</view>
								<view class="m-right" v-if="userInfo.type != 2">
									<image class="head_icon" :src="userInfo.avatar" v-if="ls.uid == userInfo.uid"></image>
								</view>
							</view>
							<view class="time" v-if="ls.time == true">{{ls.add_time}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="foot">
				<view class="footheight">
					<view class="footer">
						<view class="footer-left" @click="scImg()">
							<image src="/static/img/upload.png"></image>
						</view>
						<view class="footer-left1" @click="open()" v-if="userInfo.type == 2">
						<!-- <view class="footer-left1" @click="open()" > -->
							<image src="/static/img/file.png"></image>
						</view>
						<view class="footer-emotion" @tap="show"><text class="icon iconfont icon-face"></text></view>
						<view class="footer-center"><input class="input-text" placeholder="清输入您的信息" type="text" v-model="inputValue"
							 @focus="foc" :focus="focus" /></view>
						<view class="footer-right" @tap="sendMessge">
							<view id="msg-type">发送</view>
						</view>
					</view>
					<emotion @emotion="handleEmotion" :height="200" v-if="showPannel"></emotion>
				</view>
			</view>
		</view>

		<view v-if="Maskshow" class="Info-image">
			<view class="mask">
				<image :src="image" mode="aspectFit"></image>
				<view class="foot-box flex">
					<view class="send-btn btn" @click="ToReturn">返回</view>
					<view class="send-btn" @click="send">发送</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="payment">
				<view class="first flex " @click="payclose()">
					<text class="word">选择调查文件</text>
					<image src="../../static/img/img25.png"></image>
				</view>
				<view class="pay-type-list">
					<!-- <view class="type-item b-b"> -->
						<!-- <view class="img"><image class="yue" src="../../static/img/img26.png"></image></view> -->
						<!-- <label class="radio"><radio value="" color="#6786fb;" @change="change"></radio></label> -->
						<radio-group @change="radioChange">
							<label class="type-item b-b" v-for="(item, index) in list" :key="item.value">
								<view class="con"><text class="tit">{{ item.name }}</text></view>
								<view>
									<radio :value="JSON.stringify(item)" :checked="index === current" />
								</view>
							</label>
						</radio-group>
					<!-- </view> -->
				</view>
				<view class="one"></view>
				<view class="Third flex">
					<!-- <a :href="que_url">
						<view class="two1" @click="choose()">
							查询
						</view>
					</a> -->
					
					<view class="two2" :class="{ clickbg: payLoding }" @click.stop="!payLoding ? confirm() : ''"><text>选择</text></view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import messageShow from '@/components/imchat-emoji/messageshow.vue';
	import Emotion from '@/components/imchat-emoji/Emotion/index.vue';
	import {
		chatList,
		setRead
	} from '@/api/chat.js';
	import LbPicker from '@/components/lb-picker/index.vue'
	import {
		upload,
		sendFile
	} from '@/api/index.js';
	import {
		getTime
	} from '@/utils/rocessor.js';
	// import zhilinPicker from "@/components/zhilin-picker/zhilin-picker.vue"
	export default {
		components: {
			uniPopup,
			messageShow,
			Emotion
		},
		data() {
			return {
				order_id: '',
				name: '',
				questions:false,
				que_url:'',
				ques_name:'',
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0
				},
				list: [{
					id:163,
					name: "术后麻醉回访单",
					url: "http://dxhred.igxys.com/questionnaire/index.html",
					report_url: "https://www.wjx.cn/resultquery.aspx?activity=100205894"
				},
				{
					id:164,
					name: "术前麻醉会诊单",
					url: "http://dxhred.igxys.com/questionnaire/before.html",
					report_url: "https://www.wjx.cn/resultquery.aspx?activity=100205894"
				}
				], // 调查问卷列表
				payLoding: false, //判断是否支付中
				current: '',
				checked: '',
				url:'',
				// show: false,
				scrollTop: 0,
				MsgList: [],
				messages: '', //消息内容
				inputValue: '', //输入框内容
				showPannel: false,
				focus: false,
				socketTask: null,
				socketOpen: false,
				uid: '',
				client_id: '',
				cid: '',
				reg: /\#[\S]{1,3}\;/gi,

				image: '',
				photo: false,
				Maskshow: false,
				iCount: '',
				demoObj:{},
				token: ''
			};
		},
		
		onLoad: function(option) {
			this.order_id = option.id;
			this.uid = option.uid;
			this.name = option.name;
			this.loadDate();
			const res = uni.getSystemInfoSync();
			this.style.pageHeight = res.windowHeight;
			this.style.contentViewHeight = res.windowHeight - (uni.getSystemInfoSync().screenWidth / 750) * 240; //像素
			this.connectSocketInit();
		},
		onShow() {
			this.setRead();
			this.token = uni.getStorageSync('token');
			console.log('嘻嘻嘻',this.token)
		},
		mounted() {
			let obj = this;
			obj.iCount = setInterval(function() {
				obj.setRead();
				console.log('setRead')
			}, 3000);
		},
		onUnload() {
			clearInterval(this.iCount);
			console.log(11)
		},
		computed: {
			...mapState(['userInfo','baseURL'])
		},
		methods: {
			typesq: function(value) {
				console.log(value);
				if(value=='术前麻醉会诊单'||value=='麻醉前访视单'){
					return true;
				}else{
					return false
				}
			},
			typesh: function(value) {
				if(value=='手术后回访单'||value=='术后麻醉回访单'){
					return true;
				}else{
					return false
				}
			},
			//单张上传图片
			scImg() {
				let obj = this;
				upload({
					file: ''
				}).then(e => {
					obj.image = e[0].url;
					obj.photo = true;
					obj.Maskshow = true;
				}).catch((e) => {

				});
			},
			// 选择调查问卷 弹窗
			open() {
				this.$refs.popup.open();
				sendFile({}).then(({
					data
				}) => {
					console.log('选择调查问卷 ',data)
					// this.list = data;
				
				})
			},
			// 关闭调查问卷 弹窗
			close() {
				this.$refs.popup.close();
			},
			payclose(){
				this.close()
			},
			radioChange(e) {
				console.log('当前e.detail.value:',JSON.parse(e.detail.value))
				this.demoObj = JSON.parse(e.detail.value)
				console.log(33,this.demoObj)
				this.ques_name = this.demoObj.name
				console.log('当前测试的名字',this.ques_name)
			},
			// 调查问卷 确认
			confirm: async function() {
				console.log('点击确认',this.token)
				console.log(111,this.demoObj)
				// this.inputValue = this.demoObj.url
				this.close()
				
				this.questions = true
				let ques_url = this.demoObj.url + ','+ this.demoObj.name
				console.log('ques_url',ques_url)
				
				this.getInputMessage(ques_url);
				
				this.showPannel = false;
				// this.sendMessage(this.demoObj.url);
			},
			// 调查问卷 选择
			choose: async function() {
				// let obj = this;
				console.log('点击选择')
				console.log(111,this.demoObj.report_url)
				this.que_url = this.demoObj.report_url
				// this.inputValue = this.demoObj.url
				this.close()

			},
			ToReturn() {
				let obj = this;
				obj.Maskshow = false;
			},
			send() {
				let obj = this;
				obj.Maskshow = false;
				console.log('发送图片',obj.image)
				obj.getInputMessage(obj.image);
			},
			//点击图片显示大图
			imgInfo(item) {
				//显示图片
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = item
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			setRead() {
				let obj = this;
				setRead({
						order_id: obj.order_id
					})
					.then(data => {})
					.catch(e => {
						console.log(e.message);
					});
			},
			ToPatient() {
				uni.switchTab({
					url: '/pages/patient/patient'
				});
			},
			ToHome() {
				uni.switchTab({
					url: '/pages/index/home'
				});
			},
			//创建一个 WebSocket 连接。
			//ws://doctortest.igxys.com:20014
			connectSocketInit() {
				this.socketTask = uni.connectSocket({
					url: 'ws://doctortest.igxys.com:20014',
					success(data) {
						console.log('websocket连接成功');
					}
				});
				this.socketTask.onOpen(res => {
					console.log('WebSocket连接正常打开中...！');
					this.socketOpen = true;
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage(res => {
						this.client_id = JSON.parse(res.data).client_id;
						console.log(JSON.parse(res.data));
						if (JSON.parse(res.data).code == 10501) {
							console.log('服务器问题');
							uni.showLoading({
								title: '断线重连'
							});
							// this.closeSocket();
						} else if (JSON.parse(res.data).code == 0) {
							this.$api.msg(JSON.parse(res.data).msg);
						} else {
							console.log('连接成功');
							// ls.content.indexOf('http')
							let newmessage = JSON.parse(res.data);
							let add_time = getTime(newmessage.timestamp)
							
							newmessage = {
								avatar: newmessage.avatar,
								content: newmessage.content,
								nickname: newmessage.nickname,
								order_id: newmessage.order_id,
								type: newmessage.m_type,
								uid: newmessage.uid,
								add_time: add_time
							}
							
							if(newmessage.type==5){
								newmessage.content = newmessage.content.split(',');
								newmessage.content[0].split('?')
							}
							
							
							if (newmessage.order_id == this.order_id) {
								// let ques_name = this.que_url
								this.MsgList = this.MsgList.concat(newmessage);
								this.MsgList = this.MsgList.map(e => {
									e.add_time = Date.parse(e.add_time).toString();
									e.add_time = e.add_time.substr(0, 10);
									return e;
								});
								for (let i = 0; i < this.MsgList.length; i++) {
									let length = this.MsgList.length;
									//当前记录时间
									let newTime = this.MsgList[i].add_time;
									//上一条记录时间
									if (i + 1 < length) {
										let lastTime = this.MsgList[i + 1].add_time;
										let time = (this.MsgList[i + 1].add_time) - (this.MsgList[i].add_time);
										if (time > 300) {
											this.MsgList[i].time = true;
										}
									}
								}
								this.MsgList = this.MsgList.map(e => {
									e.add_time = getTime(e.add_time);
									return e;
								});
								console.log(334,this.MsgList)
							}
							this.$nextTick(function() {
								this.scrollToBottom();
							});
						}
					});
					let join = '{"type":"handshake","role":"user","uid":' + this.userInfo.uid + '}';
					console.log(join);
					this.socketTask.send({
						data: join,
						success: res => {
							console.log('消息发送成功');
						}
					});
				});
			},
			sendMessge: function() {
				var obj = this;
				if (obj.inputValue.trim() == '') {
					obj.inputValue = '';
				} else {
					//点击发送按钮
					this.getInputMessage(obj.inputValue);
					obj.inputValue = '';
					this.showPannel = false;
				}
			},
			// 不经过输入框 直接发送数据
			// sendMessage: function (msg) {
			// 	console.log('不经过输入框 直接发送数据',msg)
			// },
			//获取输入框数据
			getInputMessage: function(message) {
				let obj = this;
				console.log('选择',message)
				console.log('obj.socketOpen',obj.socketOpen)
				if (obj.socketOpen) {
					let msg = '';
					if (obj.photo == true) {
						msg = '{"content":"' + message + '","m_type":2,"order_id":"' + this.order_id + '","type":"send","uid":"' + this.uid +
							'"}';
							console.log('obj.photo:',msg)
					} 
					 else if( obj.questions == true)	{
						msg = '{"content":"' + message + '","m_type":4,"order_id":"' + this.order_id + '","type":"send","uid":"' + this.uid +
							'"}';
							console.log('显示msg',msg)
					}		
					else {
						msg = '{"content":"' + message + '","m_type":1,"order_id":"' + this.order_id + '","type":"send","uid":"' + this.uid +
							'"}';
							console.log('文字',msg)
					}
					obj.socketTask.send({
						data: msg,
						success: res => {
							console.log(msg);
							let newmessage = JSON.parse(msg);
							console.log(newmessage)
							let mes = {
								content: newmessage.content,
								m_type: newmessage.m_type,
								order_id: newmessage.order_id,
								type: newmessage.type,
								uid: obj.userInfo.uid
							};
							// console.log('消息发送成功');
							if (mes.order_id == obj.order_id) {
								var tmp = Date.parse(new Date()).toString();
								tmp = tmp.substr(0, 10);
								tmp = getTime(tmp);
								mes = {
									content: newmessage.content,
									type: newmessage.m_type,
									order_id: newmessage.order_id,
									uid: obj.userInfo.uid,
									add_time: tmp
								}
								obj.photo = false;
								obj.questions = false
								obj.MsgList = obj.MsgList.concat(mes);
								obj.MsgList = obj.MsgList.map(e => {
									e.add_time = Date.parse(e.add_time).toString();
									e.add_time = e.add_time.substr(0, 10);
									return e;
								});
								for (let i = 0; i < obj.MsgList.length; i++) {
									let length = obj.MsgList.length;
									//当前记录时间
									let newTime = obj.MsgList[i].add_time;
									//上一条记录时间
									if (i + 1 < length) {
										let lastTime = obj.MsgList[i + 1].add_time;
										let time = (obj.MsgList[i + 1].add_time) - (obj.MsgList[i].add_time);
										if (time > 300) {
											obj.MsgList[i].time = true;
										}
									}
								}
								obj.MsgList = obj.MsgList.map(e => {
									e.add_time = getTime(e.add_time);
									return e;
								});
								console.log(obj.MsgList)
								obj.$nextTick(function() {
									obj.scrollToBottom();
								});
							}
						},
						fail: err => {
							console.log(err);
						}
					});
				} else {
					obj.messages = message;
				}
				obj.setScrollH();
			},
			scrollToBottom: function() {
				//哪里需要用到就在哪里使用
				let obj = this;
				let query = uni.createSelectorQuery().in(this);
				query
					.select('#listBox')
					.fields({
							dataset: true,
							size: true,
							scrollOffset: true,
							rect: true
						},
						function(res) {
							obj.scrollTop = res.height;
						}
					)
					.exec();
			},
			// 设置高度 用emit辅助
			setScrollH: function() {
				let screenHeight = uni.getSystemInfoSync().windowHeight; //获取屏幕高度
				// 通过query 获取其余盒子的高度
				let query = uni.createSelectorQuery().in(this);
				query.select('.foot').boundingClientRect();
				// 通过query.exec返回的数组 进行减法 同时 去除margin 和border的
				query.exec(res => {
					let foot = res[0].height;
					screenHeight = screenHeight - foot;
				});
			},
			// 关闭websocket【离开这个页面的时候执行关闭】
			closeSocket() {
				let obj = this;
				obj.socketTask.close({
					success(res) {
						obj.socketOpen = false;
						console.log('关闭成功', res);
					},
					fail(err) {
						console.log('关闭失败', err);
					}
				});
			},
			loadDate() {
				let obj = this;
				chatList({
						order_id: obj.order_id,
						page: 1,
						limit: 10000
					})
					.then(({
						data
					}) => {
						console.log(345,data.list[0].content.indexOf('http')>-1)
						obj.MsgList = data.list.reverse();
						for (let i = 0; i < obj.MsgList.length; i++) {
							let length = obj.MsgList.length;
							//当前记录时间
							let newTime = obj.MsgList[i].add_time;
							//上一条记录时间
							if (i + 1 < length) {
								let lastTime = obj.MsgList[i + 1].add_time;
								let time = (obj.MsgList[i + 1].add_time) - (obj.MsgList[i].add_time);
								if (time > 300) {
									obj.MsgList[i].time = true;
									console.log('dayu')
								}
							}
						}
						obj.MsgList = obj.MsgList.map(e => {
							e.add_time = getTime(e.add_time);
							return e;
						});
						obj.$nextTick(function() {
							obj.scrollToBottom();
						});
					})
					.catch(e => {
						console.log(e.message);
					});
			},
			//语音识别
			// startRecognize: function() {
			// 	var options = {};
			// 	var that = this;
			// 	options.engine = 'iFly';
			// 	that.inputValue = '';
			// 	plus.speech.startRecognize(
			// 		options,
			// 		function(s) {
			// 			console.log(s);
			// 			that.inputValue += s;
			// 		},
			// 		function(e) {
			// 			console.log('语音识别失败：' + e.message);
			// 		}
			// 	);
			// },
			show() {
				this.showPannel = !this.showPannel;
			},
			// 光标触发隐藏表情
			foc() {
				this.showPannel = false;
			},
			handleEmotion(i) {
				this.inputValue += i;
			},
			emotion(res) {
				let word = res.replace(/\#|\;/gi, '');
				const list = [
					'微笑',
					'撇嘴',
					'色',
					'发呆',
					'得意',
					'流泪',
					'害羞',
					'闭嘴',
					'睡',
					'大哭',
					'尴尬',
					'发怒',
					'调皮',
					'呲牙',
					'惊讶',
					'难过',
					'酷',
					'冷汗',
					'抓狂',
					'吐',
					'偷笑',
					'可爱',
					'白眼',
					'傲慢',
					'饥饿',
					'困',
					'惊恐',
					'流汗',
					'憨笑',
					'大兵',
					'奋斗',
					'咒骂',
					'疑问',
					'嘘',
					'晕',
					'折磨',
					'衰',
					'骷髅',
					'敲打',
					'再见',
					'擦汗',
					'抠鼻',
					'鼓掌',
					'糗大了',
					'坏笑',
					'左哼哼',
					'右哼哼',
					'哈欠',
					'鄙视',
					'委屈',
					'快哭了',
					'阴险',
					'亲亲',
					'吓',
					'可怜',
					'菜刀',
					'西瓜',
					'啤酒',
					'篮球',
					'乒乓',
					'咖啡',
					'饭',
					'猪头',
					'玫瑰',
					'凋谢',
					'示爱',
					'爱心',
					'心碎',
					'蛋糕',
					'闪电',
					'炸弹',
					'刀',
					'足球',
					'瓢虫',
					'便便',
					'月亮',
					'太阳',
					'礼物',
					'拥抱',
					'强',
					'弱',
					'握手',
					'胜利',
					'抱拳',
					'勾引',
					'拳头',
					'差劲',
					'爱你',
					'NO',
					'OK',
					'爱情',
					'飞吻',
					'跳跳',
					'发抖',
					'怄火',
					'转圈',
					'磕头',
					'回头',
					'跳绳',
					'挥手',
					'激动',
					'街舞',
					'献吻',
					'左太极',
					'右太极'
				];
				let index = list.indexOf(word);
				return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`;
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;

		.container {
			width: 100%;
			height: 100%;
			background: #ffffff;
		}
	}

	.Info-image {
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 1);

		.mask {
			top: 20%;
			left: 10%;
			height: 100%;
			width: 100%;
			text-align: center;

			image {
				margin: 10 auto 0 auto;
				width: 100% !important;
				height: 90% !important;
			}

			.foot-box {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 150rpx;
				padding: 0rpx 50rpx;
				background-color: #2A2C39;

				.send-btn {
					width: 30%;
					padding: 20rpx 0rpx;
					color: #FFFFFF;
					background-color: #1482d1;
					font-size: 26rpx;
					border-radius: 15rpx;
				}

				.btn {
					color: #FFFFFF !important;
					background-color: #818181 !important;
				}
			}
		}
	}

	.top-header {
		width: 100%;
		padding: 30rpx 25rpx;
		font-size: 30rpx;
		color: #ffffff;
		background: linear-gradient(52deg, rgba(126, 153, 254, 1), rgba(151, 143, 250, 1));

		.icon {
			image {
				width: 35rpx;
				height: 35rpx;
			}
		}

		.name {
			font-size: 35rpx;
		}
	}

	.uni-column {
		display: flex;
		flex-direction: column;
	}

	.content {
		display: flex;
		flex: 1;
		/* margin-bottom: 100upx; */
	}

	.foot {
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
		position: fixed;
		width: 100%;
		height: auto;
		left: 0upx;
		bottom: 0;
		overflow: hidden;
	}

	.footer {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 110rpx;
		line-height: 100rpx;
		overflow: hidden;
		background-color: #ffffff;
	}

	.footer-left {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0rpx 25rpx;

		image {
			width: 50rpx;
			height: 40rpx;
		}
	}

	.footer-left1 {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0rpx 25rpx;

		image {
			width: 58rpx;
			height: 48rpx;
		}
	}

	.footer-emotion {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #1482d1;
		padding-right: 25rpx;
	}

	.footer-right {
		background-color: #6786fb;
		width: 130rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		line-height: 20rpx;
		font-size: 28rpx;

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

	.footer-center {
		border-left: 2rpx solid #cccccc;
		padding-left: 20rpx;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
	}

	.footer-center .input-text {
		font-size: 26rpx;
		flex: 1;
		background: #fff;
		font-family: verdana !important;
		overflow: hidden;
		border-radius: 15upx;
	}

	@font-face {
		font-family: 'iconfont';
		/* project id 1134039 */
		src: url('http://at.alicdn.com/t/font_1134039_uait6xu86bf.eot');
		src: url('http://at.alicdn.com/t/font_1134039_uait6xu86bf.eot?#iefix') format('embedded-opentype'), url('http://at.alicdn.com/t/font_1134039_uait6xu86bf.woff2') format('woff2'),
			url('http://at.alicdn.com/t/font_1134039_uait6xu86bf.woff') format('woff'), url('http://at.alicdn.com/t/font_1134039_uait6xu86bf.ttf') format('truetype'),
			url('http://at.alicdn.com/t/font_1134039_uait6xu86bf.svg#iconfont') format('svg');
	}

	.iconfont {
		font-family: 'iconfont' !important;
		font-size: 18px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon {
		color: #f3b72c !important;
	}

	.icon-face:before {
		content: '\e71c';
		font-size: 50upx;
	}

	.time {
		padding-top: 45rpx;
		padding-bottom: 5rpx !important;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		color: #69707F;
	}

	.m-item {
		display: flex;
		flex-direction: row;
		padding-top: 40upx;
	}

	.m-left {
		display: flex;
		width: 120upx;
		justify-content: center;
		align-items: flex-start;
	}

	.m-content {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		word-break: break-all;
		font-size: 22rpx;
	}

	.m-right {
		display: flex;
		width: 120upx;
		justify-content: center;
		align-items: flex-start;
	}

	.head_icon {
		width: 80upx;
		height: 80upx;
		border-radius: 100%;
	}

	.m-content-head {
		position: relative;
	}
	a{
		display: block;
		text-decoration: none;
		color: #303133;
		font-size: 28rpx;
	}
	.question-title{
		display: block;
		text-decoration: none;
	}
	.question-img{
		margin-top: 8rpx;
		width: 300rpx;
		height: 280rpx;
		// background-color: pink;
		image{
			width: 300rpx;
			height: 280rpx;
		}
	}
	.mes-image {
		width: 300rpx;
	}

	.m-content-head-right {
		display: flex;
		justify-content: flex-end;
	}

	.m-content-head-customer {
		text-align: left;
		background: #f7f7fb;
		border: 1px #f7f7fb solid;
		border-radius: 20upx;
		padding: 20upx 25rpx;
		font-size: 26rpx !important;
		display: inline-block;
	}

	.m-content-head-customer:before {
		border: 15upx solid transparent;
		border-right: 15upx solid #f7f7fb;
		left: -26upx;
		width: 0;
		height: 0;
		position: absolute;
		content: ' ';
	}

	.m-content-head-home {
		border: 1upx white solid;
		font-size: 26rpx !important;
		background: white;
		border-radius: 20upx;
		padding: 20upx;
		background-color: #f7f7fb;
	}

	.m-content-head-home:after {
		border: 15upx solid transparent;
		border-left: 15upx solid #f7f7fb;
		top: 20upx;
		right: -26upx;
		width: 0;
		height: 0;
		position: absolute;
		content: ' ';
	}

	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		padding-left: 40upx;

		.type-item {
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;
		}

		.type-item1 {
			height: 120upx;
			padding: 20upx 0;
			// display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;

			.row-1 {
				display: flex;
			}

			.row-2 {
				margin-top: 12rpx;
				font-size: 28rpx;
				color: #C0C4CC;
				text-align: center;
			}
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.img {
			color: #fe8e2e;
			width: 50rpx;
			height: 50rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.tit {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-left: 25rpx;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}

	.payment {
		background-color: #ffffff;
		border-radius: 15rpx 15rpx 0rpx 0rpx;

		.first {
			border-bottom: 2rpx solid $border-color-light;
			padding: 38rpx 25rpx;

			.word {
				font-size: $uni-font-size-base;
				font-weight: bold;
				color: $font-color-dark;
			}

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

		.one {
			height: 20rpx;
			background-color: #f6f6f6;
		}

		.Third {
			a{
				width: 50%;
				// background-color: pink;
				display: block;
				text-decoration: none;
				// display: flex;
			}
			.two1 {
				// width: 50%;
				text-align: center;
				color: #6786fb;
				font-size: $uni-font-size-lg;
				font-weight: 550;
				text-align: center;
				padding: 30rpx 0rpx;

				.size {
					font-size: $uni-font-size-lg + 4rpx;
				}
			}

			.two2 {
				width: 100%;
				background: #6786fb;
				color: #ffffff;
				font-size: $uni-font-size-lg;
				font-weight: 550;
				text-align: center;
				padding: 30rpx 0rpx;
			}

			.clickbg {
				background-color: $color-gray !important;
			}
		}
	}
</style>
