<template>
	<view class="chat">
		<view class="chat-navbar">
			<u-navbar :title="title">
				<view class="slot-wrap" slot="right" @click="toSheet()">
					<u-icon name="more-dot-fill" color="#000000" size="30"></u-icon>
				</view>
			</u-navbar>
		</view>
		<view class="chat-hd" v-if="list.length>0">
			<u-notice-bar style="width: 100%;" :volume-icon="false" mode="horizontal" :list="list"></u-notice-bar>
		</view>
		<scroll-view id="wrapper" class="chat-bd"
			:class="list.length==0?((isOpen || isBiaoqing)?'chat-bd-active1':'chat-bd-active'):(isOpen || isBiaoqing?'chat-bd-on':'')"
			:scroll-y="true"
			@scrolltoupper="scrolltoupper"
			:scroll-with-animation="true"
			:scroll-top="wrapperScrollHeight"
		>
			<view id="wrapper1">
				<!-- 个人信息 -->
				<view class="info">
					<view class="hd">
						<image class="avatar" :src="userInfo.faceImage?userInfo.faceImage:userInfo.img"></image>
						<view class="user">
							<view class="one">
								<view class="title">{{userInfo.realname?userInfo.nickname:userInfo.nickname}}</view>
								<view class="vip" v-if="userInfo.memberflag>=1">VIP{{userInfo.memberflag}}</view>
								<view class="peiwam" v-if="userInfo.role == 2">陪玩师</view>
								<image class="sex" v-if="userInfo.sex ==2" src="@/static/peiwan-nv.png"></image>
								<image class="sex" v-else src="@/static/peiwan-nan.png"></image>
							</view>
							<view class="two">
								<view class="tag" v-if="userInfo.age">{{userInfo.age}}岁</view>
								<view class="tag" v-if="userInfo.height">{{userInfo.height}}</view>
								<view class="tag" v-if="userInfo.weight">{{userInfo.weight}}</view>
								<view class="tag" v-if="userInfo.post">{{userInfo.post}}</view>
							</view>
							<view class="c" :class="isPlay1?'c-on':''" v-if="userInfo.voice" @click="toToggle1()">
								{{userInfo.voiceTime}}″
							</view>
						</view>
					</view>
					<view class="bd">
						<view class="d" v-if="userInfo.declaration">
							#交友宣言：{{userInfo.declaration}}
						</view>
						<view class="list" v-if="userInfo.xiangce && userInfo.xiangce.length > 0">
							<image v-for="(a,i) in userInfo.xiangce" @click="perviewImages(i)" :key="i" :src="a"></image>
						</view>
					</view>
				</view>
				<view class="item" :class="a.sendType == 1?'item-on':''" v-for="(a,index) in chatList" :key="index">
					<!-- 增加字段：sendType   1我发给你  2你发给我 -->
					<template v-if="a.sendType == 1">
						<view class="fr">
							<view class="desc" v-if="a.type == 6 || a.type==3" v-html="a.message"></view>
							<view class="gift" v-if="a.type == 5">送出礼物<image mode="widthFix" :src="a.message"></image>{{a.giftname}}<text>X{{a.num}}</text></view>
							<view class="yinping" v-if="a.type == 1" @click="toAudio(a.message)">
								<image src="@/static/chat-03.png"></image> {{a.num}}”
							</view>
							<view class="video" v-if="a.type == 2">
								<image @click="toPlay(a.message)" src="@/static/video_bg.png"></image>
							</view>
							<view class="img" v-if="a.type == 4">
								<image @click="perviewImage(a.message)" :src="a.message"></image>
							</view>
						</view>
						<view class="fl"><image :src="a.leftFaceImage?a.leftFaceImage:a.leftImg"></image></view>
					</template>
					<template v-else>
						<view class="fl"><image :src="a.leftFaceImage?a.leftFaceImage:a.leftImg"></image></view>
						<view class="fr">
							<view class="name">{{a.leftNickname}}<text v-if="a.leftRole == 2">陪玩师</text></view>
							<view class="desc" v-if="a.type == 6 || a.type==3" v-html="a.message"></view>
							<view class="gift" v-if="a.type == 5">送出礼物<image mode="widthFix" :src="a.message"></image>{{a.giftname}}<text>X{{a.num}}</text></view>
							<view class="yinping" v-if="a.type == 1" @click="toAudio(a.message)">
								<image src="@/static/chat-03.png"></image> {{a.num}}”
							</view>
							<view class="video" v-if="a.type == 2">
								<image @click="toPlay(a.message)" src="@/static/video_bg.png"></image>
							</view>
							<view class="img" v-if="a.type == 4">
								<image @click="perviewImage(a.message)" :src="a.message"></image>
							</view>
						</view>
					</template>
				</view>
			
				
			</view>
		</scroll-view>
		<view class="chat-fd">
			<view class="a">
				<view class="luyin" @click="toToggle()">
					<image v-if="isToggle" src="/static/chat-01.png"></image>
					<image v-else src="/static/chat-05.png"></image>
				</view>
				<view class="input" v-if="isToggle">
					<!-- <input type="text" v-model="content" placeholder="单行输入" /> -->
					<!-- <editor class="box" placeholder="单行输入"></editor> -->
					<editor class="box" id="editor" placeholder="" @ready="onEditorReady" @input="imMessageInput"></editor>
					<view class="more" @click="toBiaoqing(1)">
						<u-icon name="more-dot-fill" color="#000000" size="30"></u-icon>
					</view>
				</view>
				<view class="input" v-else>
					<view class="star" @click="toOpen()" v-if="isPlay">开始录音</view>
					<view class="star" @click="toEnd()" v-else>停止录音</view>
				</view>
				<view class="btn" @click="toSend(3)">
					发送
				</view>
				<view class="biaoqing" @click="toBiaoqing(2)">
					<image v-if="isBiaoqing == false" src="/static/chat-02.png"></image>
					<image v-else src="/static/chat-05.png"></image>
				</view>
			</view>
			<view class="b" v-if="isOpen">
				<image @click="uploadImg()" src="@/static/chat-zhaopian.png"></image>
				<image @click="uploadVideo()" src="@/static/chat-xiangji.png"></image>
				<image @click="openShiping()" src="@/static/chat-yinshipin.png"></image>
				<image @click="openGift()" src="@/static/chat-liwu.png"></image>
			</view>
			<view class="c" v-if="isBiaoqing">
				<image @click="toClick(i)" v-for="i in 75" :key="i" :src="'https://api.lyiyuan.cn/profile/upload/static/face/'+i+'.gif'"></image>
			</view>
		</view>
		<u-popup v-model="show" mode="top" :mask-close-able='false' :zIndex="5">
			<view class="permissions_box">
				当您使用APP时，为了使用录音的功能，我们需要申请麦克风权限。
			</view>
		</u-popup>
		<u-popup v-model="show1" mode="bottom" :mask-close-able='false'>
			<view class="giftPopup">
				<view class="title">礼物<image @click="closeGift()" src="/static/cha.png"></image></view>
				<view class="content">
					<swiper class="swiper" @change="changeswiper">
						<swiper-item v-for="i in giftListNum" :key="i">
							<template v-for="(a,idx) in giftList">
								<view class="item" v-if="(8*(i-1))<idx < 8*i" :key="idx" @click="tabItem(idx)" :class="idx == tabIndex?'item-on':''">
									<image mode="heightFix" :src="a.imgurl"></image>
									<view class="txt">{{a.name}}</view>
									<view class="num">{{a.price}}金币</view>
								</view>	
							</template>
						</swiper-item>
					</swiper>
					<view class="indicator-dots" v-if="giftListNum >= 2">
						<view class="indicator-dots-item" v-for="i in giftListNum" :key="i" :class="[current == i ? 'indicator-dots-active' : '']"></view>
					</view>
				</view>
				<view class="fd">
					<view class="a">金币：{{balanceInfo.userBalance}}</view>
					<view class="b">充值<image src="@/static/icon-arrow.png"></image></view>
					<view class="c">
						<input v-model="num" />
					</view>
					<view class="btn" @click="toZengsong()">赠送</view>
				</view>
			</view>
		</u-popup>
		<insufficient :isCoins="isCoins" />
		<u-popup v-model="show2" mode="center">
			<video style="width: 680rpx;" v-if="videoUrl" :src="videoUrl" object-fit="contain"></video>
		</u-popup>
	</view>
</template>

<script>
	const systemInfoSync = uni.getSystemInfoSync();
	import permision from "@/js_sdk/wa-permission/permission.js"
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	let timer = 0;
	export default {
		data() {
			return {
				isPlay1: false,
				videoUrl: "",
				wrapperScrollHeight: 0,
				tabIndex: 0,
				id: "",
				current: 1,
				show1: false,
				show2: false,
				isCoins: false,
				isToggle: true,
				isOpen: false,
				title: "",
				content: "",
				userInfo: {},
				list: [],
				itemList: [],
				chatList: [],
				userId: "",
				img: "",
				show: false,
				isPlay: true,
				count: 0,
				balanceInfo: {},
				num: 1,
				giftList: [],
				giftListNum: 1,
				statusBarHeight: 0,
				wrapperHeight: 0,
				total: 0,
				page: 1,
				editorCtx: "",
				isBiaoqing: false,
			};
		},
		onLoad(o) {
			this.statusBarHeight = systemInfoSync.statusBarHeight;
			this.userId = uni.getStorageSync("userInfo").id;
			this.id = o.id;
			this.getUserInfo();
			this.getChatList();
			this.userBalance();
		},
		onReady() {
			const that = this;
			recorderManager.onStop(function (res) {
				that.uploadAudio(res.tempFilePath);
				clearInterval(timer);
				that.isPlay = true
				
			});
			innerAudioContext.onEnded(res=>{
				that.isPlay = false
			})
			that.watchSocket();
		},
		methods: {
			toToggle1() {
				this.isPlay1 = !this.isPlay1
				if(this.isPlay1){
					innerAudioContext.src = this.userInfo.voice;
					innerAudioContext.play();
				}else{
					innerAudioContext.pause();
				}
			},
			perviewImages(url){
				uni.previewImage({
					urls: this.userInfo.xiangce,
					count: url
				})
			},
			perviewImage(url){
				uni.previewImage({
					urls: [url]
				})
			},
			toClick (idx){
				this.editorCtx.insertImage({
					src: 'https://api.lyiyuan.cn/profile/upload/static/face/'+idx+'.gif',
					with: 30,
					height: 30,
					success(){
					}
				})
			},
			imMessageInput(e){
				console.log(e)
				this.content = e.detail.html.replace(/<img /g,'<img style="vertical-align: middle;" ');
			},
			onEditorReady() {
				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				const that = this;
				uni.createSelectorQuery().select('#editor').context((res) => {
				  that.editorCtx = res.context
				}).exec()
				// #endif
			},
			watchSocket() {
				const that = this;
				uni.$on("toChatObj",function (res) {
					const obj = res.data?JSON.parse(res.data):{}
					if(obj.topic == 'message'){
						if(obj.type	 == 12){
							uni.$emit("watchEvent",obj)
						}
						if(obj.type == 20){
							uni.$emit("toJieshouYinship",obj)
						}
						if(obj.type<=7){
							if(uni.getStorageSync("userInfo").id == obj.sellerId){
								that.page = 1;
								that.getChatList();	
							}
							if(uni.getStorageSync("userInfo").id == obj.userId){
								that.page = 1;
								that.getChatList();	
							}
						}
						if(obj.type>= 8){
							if(uni.getStorageSync("userInfo").id == obj.sellerId){
								if(obj.type == 10){
									setTimeout(()=>{
										uni.navigateTo({
											url: "/pages/pipei/shipin/detail?type=2&id="+that.id
										})
									},500)
								}else if(obj.type == 11){
									
								}
							}
						}
					}
				});
			},
			toBiaoqing(type) {
				if(type==1){
					this.isBiaoqing = false;
					this.isOpen = !this.isOpen
				}else {
					this.isOpen = false;
					this.isBiaoqing = !this.isBiaoqing
				}
			},
			scrolltoupper(e) {
				if(this.chatList.length <=this.total){
					this.page ++;
					this.getChatList(1);
				}
			},
			toAudio(url) {
				innerAudioContext.src = url;
				innerAudioContext.play();
			},
			toPlay(url){
				this.show2 = true;
				this.videoUrl = url
			},
			// 将px转换为rpx
			pxToRpx(px) {
			    return px * 750 / systemInfoSync.windowWidth;
			},
			//发送得内容，type:1.语音 2.视频 3.文字 4图片 5礼物6搭讪
			async giftGiving() {
				await this.$api.giftGiving({
					"userId": uni.getStorageSync("userInfo").id, //用户ID
					"acceptUserId": this.id, //被送礼之人ID
					"giftId": this.giftList[this.tabIndex].id, //礼物ID
					"num": this.num //礼物数量
				}) 
			},
			toZengsong() {
				const that = this;
				if(this.userInfo.isBlack == 1){
					uni.showToast({
						title: "当前用户是黑名单，已限制",
						position: "bottom",
						icon: "none",
					})
					return ;
				}
				if(this.balanceInfo.isBlack >= this.giftList[this.tabIndex].price*that.num){
					that.isCoins = true;
					return ;
				}
				that.img = this.giftList[this.tabIndex].id
				that.count = that.num
				that.toSend(5)
			},
			tabItem(index){
				this.tabIndex = index;
			},
			async getGift() {
				const { code, data } = await this.$api.giftList({
					userId: uni.getStorageSync("userInfo").id,
					limit: 999,
					page: 1
				}) 
				if(code == 200){
					this.giftList = data.list;
					this.giftListNum = Math.ceil(data.total/8)
				}
			},
			closeGift(){
				this.show1 = false;
				this.isOpen = false;
				this.isBiaoqing = false;
			},
			openGift(){
				if(this.userInfo.isBlack == 1){
					uni.showToast({
						title: "当前用户是黑名单，已限制",
						position: "bottom",
						icon: "none",
					})
					return ;
				}
				this.show1 = true;
				this.getGift();
				this.isOpen = false;
				this.isBiaoqing = false;
			},
			changeswiper(e){
				this.current = e.detail.current
			},
			toEnd() {
				recorderManager.stop();
			},
			toToggle() {
				const that = this;
				this.isToggle = !this.isToggle
				this.isOpen = false;
			},
			//检查次数
			async userBalance() {
				const { code, data } = await this.$api.userBalance({
					userId: uni.getStorageSync("userInfo").id
				}) 
				if(code == 200){
					this.balanceInfo = data
					/***
					"videoCoins": 0, //视频可用时长：分钟
					"wordVoiceDiscount": 0, //语音视频文字折扣：0表示不打折
					"voiceCoins": 0, //语音可用时长：分钟
					"wordCoins": 0, //文字可发数量
					"userBalance": 1 //当前用户金币余额
					*/
				}
			},
			//结算 type:1.语音 2.视频 3.文字 4图片 5礼物6搭讪
			async socialConsumption(type) {
				await this.$api.socialConsumption({
					userId: uni.getStorageSync("userInfo").id,
					sellerId: this.id,
					type: (type == 1 || type == 2 || type == 3)?3:type,
					duration: ""
				}) 
			},
			toOpen(){
				const that = this;
				//{"userId":"123","sellerId":"4575676878","type":3}   发送得内容，type:1.语音 2.视频 3.文字 4图片 5礼物6搭讪
				// console.log(111)
				// console.log(JSON.stringify({"userId": uni.getStorageSync("userInfo").id,sellerId:this.id, type:3,"topic":"message"}))
				// uni.sendSocketMessage({data:JSON.stringify({"userId": uni.getStorageSync("userInfo").id,sellerId:this.id, type:3,"topic":"message"})});
				
				// return ;
				// APP检查权限
				if(uni.getSystemInfoSync().platform == 'android') {
					plus.android.checkPermission(
						'android.permission.RECORD_AUDIO',
						granted => {
						  if (granted.checkResult==-1){
							that.show=true
						  }else{
							that.show=false
							that.toLuyin();
						  }
						},
						error => {
						  console.error('Error checking permission:', error.message);
						}
					  );
					 that.requestAndroidPermission('android.permission.RECORD_AUDIO')
					return ;
				}
				that.toLuyin();
			},
			toLuyin() {
				const that = this;
				clearInterval(timer)
				that.isPlay = false;
				timer = setInterval(()=>{
					that.count++
				},1000)
				recorderManager.start({
					format: "mp3"
				})
			},
			recorderAuthModal: function () {
				const that = this;
				uni.showModal({
					title: '温馨提示',
					content: '为了麦克风的功能，我们需要申请麦克风权限，请您确认授权，否则无法使用该功能~',
					cancelText: '关闭',
					confirmText: '去授权',
					success(res) {
						that.show=false
						if (res.confirm) {
							permision.gotoAppPermissionSetting()
						}
					}
				})
			},
			async requestAndroidPermission(permisionID) {
				const that = this;
				var result = await permision.requestAndroidPermission(permisionID);
				if(result != 1){
					that.recorderAuthModal();
				}else{
					that.show =false
				}
			},
			//上传语音
			uploadAudio(filePath) {
				const that = this;
				if(that.userInfo.isBlack == 1){
					uni.showToast({
						title: "当前用户是黑名单，已限制",
						position: "bottom",
						icon: "none",
					})
					return ;
				}
				if(uni.getStorageSync("userInfo").sex == 1){
					if(that.balanceInfo.wordCoins <= 0){
						that.isCoins=true;
						return ;
					}
				}
				uni.uploadFile({
					name: 'file',
					url: that.$baseUrl+'/prod-api/common/upload',
					filePath,
					success: (res) => {
						const {code, fileName, url, msg} = JSON.parse(res.data);
						if(code == 200){
							that.img = url
							that.toSend(1)
						}
					},
					fail: (err) => {
						console.log(err)
					}
				});	
			},
			//上传视频
			uploadVideo() {
				const that = this;
				if(that.userInfo.isBlack == 1){
					uni.showToast({
						title: "当前用户是黑名单，已限制",
						position: "bottom",
						icon: "none",
					})
					return ;
				}
				uni.chooseVideo({
					count: 1,
					sourceType: ["album", "camera"],
					success: (res1) => {
						console.log(res1)
						that.count = res1.duration;
						if(that.userInfo.isBlack == 1){
							uni.showToast({
								title: "当前用户是黑名单，已限制",
								position: "bottom",
								icon: "none",
							})
							return ;
						}
						if(uni.getStorageSync("userInfo").sex == 1){
							if(that.balanceInfo.wordCoins <= 0){
								that.isCoins=true;
								return ;
							}
						}
						uni.uploadFile({
							name: 'file',
							url: that.$baseUrl+'/prod-api/common/upload',
							filePath: res1.tempFilePath,
							success: (res) => {
								const {code, fileName, url, msg} = JSON.parse(res.data);
								if(code == 200){
									that.img = url
									this.toSend(2)
								}
							},
							fail: (err) => {
								console.log(err)
							}
						});	
					},
					fail(err){
						console.log("fail",err)
					}
				});
			},
			//上传图片
			uploadImg() {
				const that = this
				if(that.userInfo.isBlack == 1){
					uni.showToast({
						title: "当前用户是黑名单，已限制",
						position: "bottom",
						icon: "none",
					})
					return ;
				}
				uni.chooseImage({
					count: 1, //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"],
					success: (res1) => {
						console.log(res1)
						if(that.userInfo.isBlack == 1){
							uni.showToast({
								title: "当前用户是黑名单，已限制",
								position: "bottom",
								icon: "none",
							})
							return ;
						}
						if(uni.getStorageSync("userInfo").sex == 1){
							if(that.balanceInfo.wordCoins <= 0){
								that.isCoins=true;
								return ;
							}
						}
						uni.uploadFile({
							name: 'file',
							url: that.$baseUrl+'/prod-api/common/upload',
							filePath: res1.tempFilePaths[0],
							success: (res) => {
								//1.语音 2.视频 3.文字 4图片 5礼物
								const {code, fileName, url, msg} = JSON.parse(res.data);
								if(code == 200){
									that.img = url
									that.toSend(4)
								}
							},
							fail: (err) => {
								console.log(err)
							}
						});	
					},
					fail(err){
						console.log("fail",err)
					}
				});
			},
			// 发送得内容，type:1.语音 2.视频 3.文字 4图片 5礼物6搭讪
			async toSend(type) {
				const that = this;
				if(type == 3){
					if(that.userInfo.isBlack == 1){
						uni.showToast({
							title: "当前用户是黑名单，已限制",
							position: "bottom",
							icon: "none",
						})
						return ;
					}
					if(uni.getStorageSync("userInfo").sex == 1){
						if(that.balanceInfo.wordCoins <= 1){
							that.isCoins=true;
							return ;
						}
					}
				}
				
				const { code, data } = await this.$api.chat({
					userId: uni.getStorageSync("userInfo").id,
					sellerId: that.id,
					type,
					num: (that.count+1),
					message: type == 3?that.content: that.img
				}) 
				if(code == 200){
					uni.sendSocketMessage({data:JSON.stringify({
						"userId": uni.getStorageSync("userInfo").id,
						sellerId:that.id, 
						type,
						num: (that.count+1),
						message: (type == 3?that.content: that.img),
						"topic":"message"
					})})
					if(type==5){
						that.giftGiving();
					}
					
					that.isOpen = false;
					that.isBiaoqing = false;
					that.isToggle = true;
					that.show1 = false;
					that.socialConsumption(type);
					that.userBalance();
					that.editorCtx.clear();
					that.content=""
					that.count = 0;
					that.num = 1;
				}
			},
			//数组对象去重
			arrayUnique (arr, name) {
				var hash = {};
				return arr.reduce(function (item, next) {
					hash[next[name]]
						? ""
						: (hash[next[name]] = true && item.push(next));
					return item;
				}, []);
			},
			async getChatList(type){
				const that = this;
				const { code, data , msg } = await this.$api.findChatList({
					limit: 10, 
					page: this.page,
					formUserId: uni.getStorageSync("userInfo").id,
					toUserId: this.id});
				if(code == 200){
					this.total= data.total;
					if(type == 1){
						this.chatList= that.arrayUnique([...data.list,...this.chatList],'msgId');
					}else{
						this.chatList= data.list
					}
					if(type == 1){
						return ;
					}
					setTimeout(()=>{
						let wrapper = uni.createSelectorQuery().in(this).select('#wrapper');
						wrapper.fields({
							size: true,
							scrollOffset: true
						}, data => {
							console.log("wrapper",data)
							that.wrapperScrollHeight = data.scrollHeight*6
						}).exec()
						// ;
					},100)
				}
			},
			async getUserInfo() {
				const { code, data , msg } = await this.$api.findOtherUserInfo({userId: uni.getStorageSync("userInfo").id,sellerId: this.id,});
				if(code == 200){
					this.userInfo = data;
					this.userInfo.xiangce = [];
					if(data.reserved1){
						this.userInfo.xiangce = data.reserved1.split(",")
					}
					this.itemList = ["查看TA的主页", (data.isCare == 0?"关注":"取消关注"), "举报", (data.isBlack == 0?"加入黑名单":"移除黑名单")];
					this.title = data.nickname+(data.isOnline == 1?"_(在线)":"_(离线)");
					this.getConfigData();
				}else{
					uni.showToast({
						title: msg,
						position: "bottom",
						icon: "none",
					})
				}
			},
			
			//字典查询
			async getConfigData() {
				const that = this;
				let res1 = await that.$api.getConfigData({dictType: 'CONFIG_MESSAGE_NOTICE'});
				that.list = [res1.data.content]
			},
			//是否关注
			async toCareOrCancel() {
				const { code, data , msg } = await this.$api.careOrCancel({
					userId: uni.getStorageSync("userInfo").id,
					sellerId: this.id,
					type: this.userInfo.isCare == 0?1:2
				});
				if(code == 200){
					uni.showToast({
						title: this.userInfo.isCare == 0?"关注成功":"取消关注"
					})
					setTimeout(()=>{
						this.getUserInfo(1)
					},2000)
				}else{
					uni.showToast({
						title: msg,
						position: "bottom",
						icon: "none",
					})
				}
			},
			//是否加入黑名单
			async toYichu() {
				const { code, data } = await this.$api.addOrRemoveBlacklist({
					userId: uni.getStorageSync("userInfo").id,
					sellerId: this.id,
					type: this.userInfo.isBlack == 0?1:2
				})
				if(code == 200){
					uni.showToast({
						title:this.userInfo.isBlack == 1?"移除成功":"加入成功"
					})
					setTimeout(()=>{
						this.getInfo();
					},2000)
				}
			},
			
			//视频语音说明
			async openShiping() {
				const that = this;
				const {code, data } = await that.$api.costDescription({});
				if(code == 200){
					uni.showActionSheet({
						title: "语音/视频通话",
						itemList: ["语音通话（"+data.voiceCoins+"金币/1分钟）","视频通话（"+data.videoCoins+"金币/1分钟）"],
						success(res){
							if(res.tapIndex == 0){
								if(that.userInfo.isOnline == 0){
									uni.showToast({
										title: "当前用户已离线",
										position: "bottom",
										icon: "none",
									})
									return ;
								}
								if(that.userInfo.isBlack == 1){
									uni.showToast({
										title: "当前用户是黑名单，已限制",
										position: "bottom",
										icon: "none",
									})
									return ;
								}
								if(uni.getStorageSync("userInfo").sex == 1){
									if(that.balanceInfo.userBalance <= 0){
										that.isCoins=true;
										return ;
									}
								}
								that.isToggle = true;
								that.isOpen = false;
								that.isBiaoqing = false;
								uni.sendSocketMessage({data:JSON.stringify({
									"userId": uni.getStorageSync("userInfo").id,
									sellerId: that.id,
									type: 18,
									"topic":"message"
								})})
								uni.navigateTo({
									url: "/pages/pipei/shipin/detail?type=3&id="+that.id
								})
							}else if(res.tapIndex == 1){
								if(that.userInfo.isOnline == 0){
									uni.showToast({
										title: "当前用户已离线",
										position: "bottom",
										icon: "none",
									})
									return ;
								}
								if(that.userInfo.isBlack == 1){
									uni.showToast({
										title: "当前用户是黑名单，已限制",
										position: "bottom",
										icon: "none",
									})
									return ;
								}
								if(uni.getStorageSync("userInfo").sex == 1){
									if(that.balanceInfo.userBalance <= 0){
										that.isCoins=true;
										return ;
									}
								}
								that.isToggle = true;
								that.isOpen = false;
								that.isBiaoqing = false;
								uni.sendSocketMessage({data:JSON.stringify({
									"userId": uni.getStorageSync("userInfo").id,
									sellerId: that.id, 
									type: 19,
									"topic":"message"
								})})
								uni.navigateTo({
									url: "/pages/pipei/shipin/detail?type=4&id="+that.id
								})
							}
						}
					})
				}
				
			},
			toSheet1() {
				const that = this;
				that.getcostDescription();
				
			},
			toSheet() {
				const that = this;
				uni.showActionSheet({
					itemList: this.itemList,
					success(res){
						if(res.tapIndex == 0){
							uni.navigateTo({
								url: "/pages/peiwan/detail?id="+that.id
							})
						}else if(res.tapIndex == 1){
							that.toCareOrCancel()
						}else if(res.tapIndex == 2){
							uni.navigateTo({
								url: "/pages/users/feedback/index?type=2&id="+that.id
							})
						}else if(res.tapIndex == 3){
							that.toYichu()
						}
					}
				})
			},
			inputValue(e) {
				console.log(e)
			},
		},
		destroyed() {
			uni.$off("toChatObj")
		}
	}
</script>

<style scoped lang="scss">
.chat{
	.giftPopup{
		padding: 40rpx 25rpx;
		overflow: hidden;
		position: relative;
		.title{
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			image{
				width: 50rpx;
				height: 50rpx;
				right: 20rpx;
				top: 40rpx;
				z-index: 2;
				position: absolute;
			}
		}
		.content{
			width: 110%;
			overflow: hidden;
			margin-bottom: 40rpx;
			swiper{
				height: 450rpx;
			}
			.indicator-dots{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.indicator-dots-item{
					width: 12rpx;
					height: 12rpx;
					background: #000000;
					border-radius: 50%;
					opacity: 0.4;
					margin: 0 6rpx;
					&.indicator-dots-active{
						width: 30rpx;
						height: 12rpx;
						background: #000000;
						border-radius: 6rpx;
					}
				}
			}
			.item{
				width: 166rpx;
				height: 180rpx;
				background: #F5F5F5;
				border-radius: 20rpx;
				border: 1px solid #F5F5F5;
				text-align: center;
				padding: 5rpx;
				box-sizing: border-box;
				float: left;
				margin-right: 13rpx;
				margin-top: 30rpx;
				image{
					height: 90rpx;
				}
				.txt{
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					margin-top: 5rpx;
				}
				.num{
					overflow: hidden;
					font-weight: 500;
					font-size: 22rpx;
					color: #999;
					margin-top: 5rpx;
				}
				&-on{
					border: 1px solid #000;
				}
			}
		}
		.fd{
			display: flex;
			align-items: center;
			border-top: 1px solid #EAEAEA;
			padding-top: 40rpx;
			justify-content: space-between;
			.a{
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}
			.b{
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-top: -1px;
				}
			}
			.c{
				input{
					width: 166rpx;
					background: #FFFFFF;
					border-radius: 80rpx;
					text-align: center;
					border: 1px solid #CCCCCC;
					font-weight: 500;
					height: 80rpx;
					font-size: 30rpx;
					color: #333333;
					display: block;
				}
			}
			.btn{
				width: 166rpx;
				line-height: 80rpx;
				background: linear-gradient(0deg, #000000, #3D3B38);
				box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
				border-radius: 80rpx;
				text-align: center;
				height: 80rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}
	&-navbar{
		width: 100%;
		.slot-wrap{
			margin-right: 30rpx;
		}
	}
	&-hd{
		width: 100%;
		height: 70rpx;
		background: #FFEBEB;
		font-weight: 500;
		font-size: 24rpx;
		color: #222222;
		line-height: 70rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	&-bd{
		width: 100%;
		padding: 0 25rpx;
		box-sizing: border-box;
		/* #ifdef APP-PLUS */
		/* #endif */
		height: calc(100vh - 190rpx - 88rpx - 70rpx);
		&-on{
			height: calc(100vh - 190rpx - 88rpx - 70rpx - 160rpx);
		}
		&-active{
			height: calc(100vh - 120rpx - 88rpx - 70rpx);
		}
		&-active1{
			height: calc(100vh - 120rpx - 88rpx - 70rpx - 160rpx);
		}
		// 个人信息
		.info{
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			overflow: hidden;
			box-sizing: border-box;
			margin-top: 20rpx;
			.hd{
				display: flex;
				align-items: center;
				.avatar{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}
				.user{
					flex: 1;
					position: relative;
					.c{
						width: 165rpx;
						height: 95rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						background: url(@/static/icon-bofang.png) center top no-repeat;
						background-size: contain;
						line-height: 88rpx;
						text-indent: 90rpx;
						position: absolute;
						right: -20rpx;
						top: 0;
						z-index: 2;
						&-on{
							background: url(@/static/icon-zanting.png) center top no-repeat;
							background-size: contain;
						}
					}
					.two{
						display: flex;
						align-items: center;
						overflow: hidden;
						flex-wrap: wrap;
						.tag{
							padding: 0 20rpx;
							font-weight: 500;
							font-size: 22rpx;
							color: #666666;
							line-height: 40rpx;
							border-radius: 40rpx;
							background: #F2F2F2;
							display: flex;
							align-items: center;
							margin-right: 20rpx;
							margin-top: 20rpx;
						}
					}
					.one{
						display: flex;
						align-items: center;
						.title{
							font-weight: 500;
							font-size: 36rpx;
							color: #222222;
						}
						.vip{
							width: 60rpx;
							line-height: 32rpx;
							background: url(@/static/vip-bg.png) center top no-repeat;
							background-size: contain;
							text-align: center;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFFFFF;
							overflow: hidden;
							margin-left: 20rpx;
						}
						.peiwam{
							width: 100rpx;
							line-height: 40rpx;
							margin-left: 20rpx;
							background: linear-gradient(0deg, #000000, #3D3B38);
							box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
							border-radius: 20rpx;
							text-align: center;
							font-weight: 500;
							font-size: 22rpx;
							color: #FFFFFF;
						}
						.sex{
							margin-left: 20rpx;
							width: 30rpx;
							height: 30rpx;
							image{
								width: 30rpx;
								height: 30rpx;
							}
						}
					}
				}
			}
			.bd{
				margin-top: 20rpx;
				.d{
					font-weight: 500;
					font-size: 24rpx;
					color: #222222;
					text-align: left;
				}
				.list{
					width: 100%;
					display: flex;
					align-items: center;
					image{
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
						margin-left: 20rpx;
						margin-top: 20rpx;
						&:first-child{
							margin-left: 0;
						}
					}
					.tag{
						padding: 0 30rpx;
						line-height: 50rpx;
						height: 50rpx;
						background: #000000;
						border-radius: 50rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-left: 20rpx;
						margin-top: 20rpx;
						&:first-child{
							margin-left: 0;
						}
					}
				}
			}
		}
		.item{
			padding: 20rpx 0;
			width: 100%;
			align-items: flex-start;
			display: flex;
			overflow: hidden;
			justify-content: flex-start;
			.fl{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.fr{
				flex: 1;
				overflow: hidden;
				.name{
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					display: flex;
					align-items: center;
					text{
						width: 100rpx;
						line-height: 40rpx;
						background: linear-gradient(0deg, #000000, #3D3B38);
						box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
						border-radius: 40rpx;
						text-align: center;
						font-weight: 500;
						font-size: 22rpx;
						color: #FFFFFF;
						display: block;
						margin-left: 30rpx;
					}
				}
				.video{
					width: 400rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					margin-top: 20rpx;
					padding: 20rpx;
					image{
						width: 100%;
					}
				}
				.img{
					width: 400rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					margin-top: 20rpx;
					padding: 20rpx;
					image{
						width: 100%;
					}
				}
				.yinping{
					width: 200rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					margin-top: 20rpx;
					padding: 20rpx;
					display: flex;
					align-items: center;
					color: #000;
					font-size: 30rpx;
					image{
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
					}
				}
				.gift{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					line-height: 44px;
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					image{
						width: 60rpx;
						margin: 0 10rpx;
					}
					text{
						margin-left: 10rpx;
					}
				}
				.desc{
					max-width: 400rpx;
					background: #FFFFFF;
					border-radius: 30rpx 0px 30rpx 30rpx;
					margin-top: 20rpx;
					padding: 30rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
					line-height: 48rpx;
					display: inline-block;
				}
			}
			
			&-on{
				.fl{
					margin-left: 20rpx;
					margin-right: 0;
				}
				.fr{
					.desc{
						float: right;
						background: #EAEBEB;
						border-radius: 0px 30rpx 30rpx 30rpx;
						margin: 0;
					}
					.video{
						float: right;
					}
					.img{
						float: right;
					}
					.yinping{
						float: right;
					}
					.video{
						float: right;
					}
					.gift{
						float: right;
					}
				}
			}
		}
	}
	&-fd{
		width: 100%;
		min-height: 120rpx;
		background: #F6F6F6;
		.a{
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			.luyin{
				width: 50rpx;
				height: 50rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.biaoqing{
				width: 50rpx;
				height: 50rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.input{
				flex: 1;
				max-width: 400rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 20rpx;
				margin-right: 20rpx;
				font-size: 30rpx;
				.star{
					flex: 1;
					line-height: 80rpx;
					text-align: center;
					background: #FFFFFF;
				}
				editor,input{
					flex: 1;
					height: 50rpx;
					line-height: 50rpx;
					min-height: 50rpx;
					font-style: normal !important; 
					margin-left: 20rpx;
				}
				.more{
					margin: 0 20rpx;
				}
			}
			.btn{
				width: 100rpx;
				line-height: 70rpx;
				background: linear-gradient(0deg, #000000, #3D3B38);
				box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
				border-radius: 50rpx;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-right: 20rpx;
			}
		}
		.b{
			width: 100%;
			height: 160rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 1px solid #E2E2E2;
			padding: 0 45rpx;
			box-sizing: border-box;
			image{
				width: 100rpx;
				height: 100rpx;
				display: block;
			}
		}
		.c{
			width: 100%;
			height: 160rpx;
			overflow-y: auto;
			overflow-x: hidden;
			border-top: 1px solid #E2E2E2;
			padding-left: 35rpx;
			box-sizing: border-box;
			&::-webkit-scrollbar{
				opacity: 0;
			}
			&::-webkit-scrollbar-thumb{
				opacity: 0;
			}
			image{
				width: 70rpx;
				height: 70rpx;
				float: left;
				margin-top: 6rpx;
				margin-bottom: 6rpx;
				margin-right: 5rpx;
			}
		}
	}
}
</style>
