<template>
	<view>
		<view  v-if="!logoding"></view>
		<view class="instantMessenger" v-if="logoding">
			<view class="instantMessenger-title dis-flex">
				<view class="p-top-bom-30 instantIten" @click="sendPictures">
					<view class="iconfont icon-pic t-c" style="font-size: 40upx;"></view>
					<view class="f-24 t-c col-3 p-top-10">发图片</view>
				</view>
				<view class="p-top-bom-30 instantIten" @click="sendVideo">
					<view class="iconfont icon-camera t-c f-44" style="font-size: 40upx;"></view>
					<view class="f-24 t-c col-3 p-top-10">发视频</view>
					<view ref="input" class="input" style="display: none;"></view>
				</view>
				<view class="p-top-bom-30 instantIten" @click="sendCard" v-if="getSetInfo.is_card == 1 && setFomeData.receive_type == 1">
					<view class="iconfont icon-news t-c f-44" style="font-size: 40upx;"></view>
					<view class="f-24 t-c col-3 p-top-10">发名片</view>
				</view>
				<view class="p-top-bom-30 instantIten" @click="sendResume" v-if="getSetInfo.is_recruit == 1 && setFomeData.receive_type == 1">
					<view class="iconfont icon-copy t-c f-44" style="font-size: 40upx;"></view>
					<view class="f-24 t-c col-3 p-top-10">发简历</view>
				</view>
			</view>

			<!-- 内容 -->
			<scroll-view class="scroll-view" :scroll-y="true" :scroll-top="scrollTop" ref="boxRef">
				<view class="content-box" id="boxbox" :style="{ marginBottom: off ? '0' : '500rpx' }" @click="closeEmoji">
					<!-- 我发的文本消息 -->
					<view  v-for="(item, index) in chattingRecordsLisy" :key="item.id">
						<!-- 我的文本消息 -->
						<view class="content-item" v-if="item.type == 0 && item.is_my == 0">
							<view class="content-title-time">{{ item.date_time }}</view>
							<view class="dis-flex">
								<view class="text-content">
									<jyf-parser domain="https://6874-html-foe72-1259071903.tcb.qcloud.la" gesture-zoom lazy-load ref="article" selectable
									show-with-animation use-anchor  :html="item.content" ></jyf-parser>
									<!-- <rich-text :nodes=""></rich-text> -->
									</view>
								<view class="text-img"><image :src="item.avatar" mode=""></image></view>
							</view>
						</view>
						<!-- 对方文本消息 -->
						<view class="content-item" v-if="item.type == 0 && item.is_my == 1">
							<view class="content-title-time">{{ item.date_time }}</view>
							<view class="dis-flex">
								<view class="text-img-left"><image :src="item.avatar" mode=""></image></view>
								<view class="text-content-left">
									<jyf-parser domain="https://6874-html-foe72-1259071903.tcb.qcloud.la" gesture-zoom lazy-load ref="article" selectable
									show-with-animation use-anchor  :html="item.content" ></jyf-parser>
									<!-- <rich-text :nodes="item.content"></rich-text> -->
									</view>
							</view>
						</view>
						<!-- 对方图片消息 -->
						<view class="content-item" v-if="item.type == 1 && item.is_my == 1">
							<view class="content-title-time">{{ item.date_time }}</view>
							<view class="dis-flex">
								<view class="text-img-left"><image :src="item.avatar" mode=""></image></view>
								<view class="text-content-img" @click="lookimg(item.content)"><image :src="item.content" mode=""></image></view>
							</view>
						</view>
						<!-- 对方视频消息 -->
						<view class="content-item" v-if="item.type == 2 && item.is_my == 1">
							<view class="content-title-time">{{ item.date_time }}</view>
							<view class="dis-flex">
								<view class="text-img-left"><image :src="item.avatar" mode=""></image></view>
								<view class="text-content-img">
									<video x5-video-player-type='h5' x5-video-player-fullscreen='true' x5-video-orientation='portraint' class="text-video-left" @fullscreenchange="play" :controls="false" :src="item.content" controls></video>
								</view>
							</view>
						</view>
						<!-- 我的图片消息 -->
						<view class="content-item" v-if="item.type == 1 && item.is_my == 0">
							<view class="content-title-time">{{ item.date_time }}</view>
							<view class="dis-flex">
								<view class="text-content-img-r" @click="lookimg(item.content)"><image :src="item.content" mode="aspectFill"></image></view>
								<view class="text-img"><image :src="item.avatar" mode=""></image></view>
							</view>
						</view>
						<!-- 我的视频消息 -->
						<view class="content-item" v-if="item.type == 2 && item.is_my == 0">
							<view class="content-title-time">{{ item.date_time }}</view>
							<view class="dis-flex">
								<view class="text-content-img-r">
									<video x5-video-player-type='h5' x5-video-player-fullscreen='true' x5-video-orientation='portraint' class="text-video-left" @fullscreenchange="play" :controls="false" :src="item.content" controls></video>
								</view>
								<view class="text-img"><image :src="item.avatar" mode=""></image></view>
							</view>
						</view>
						<!-- 我的名片消息 -->
						<view class="content-item" v-if="item.type == 3 && item.is_my == 0 && !!item.cardInfo" @click.stop="cardHome(item.cardInfo.id)">
							<view class="content-title-time">{{ item.date_time }}</view>
							<view class="dis-flex">
								<view class="text-content-img-r">
									<view class="card">
										<view class="dis-flex">
											<view class="card-logo"><image :src="item.cardInfo.logo" mode=""></image></view>
											<view class="cart-content">
												<view class="cart-title">
													<text class="f-32 f-w col-3">{{ item.cardInfo.name }}</text>
													<text class="f-24 col-9" style="padding-left: 20upx;">{{ item.cardInfo.position }}</text>
												</view>
												<view class="segmentation"></view>
												<view class="col-3 f-24 card-cart">{{ item.cardInfo.company }} | {{ item.cardInfo.branch }}</view>
											</view>
										</view>
										<view class="col-9 f-20 p-top-bom-10" style="border-top: 1upx solid #eeeeee;margin-top: 20upx;">个人名片</view>
									</view>
								</view>
								<view class="text-img"><image :src="item.avatar" mode=""></image></view>
							</view>
						</view>
						<!-- 我的简历消息 -->
						<view class="content-item" v-if="item.type == 4 && item.is_my == 0 && !!item.cardInfo" @click.stop="goRecruit_resume(item)">
							<view class="content-title-time">{{ item.date_time }}</view>
							<view class="dis-flex">
								<view class="text-content-img-r">
									<view class="card">
										<view class="dis-flex">
											<view class="card-logo"><image :src="item.cardInfo.avatar" mode=""></image></view>
											<view class="cart-content">
												<view class="cart-title">
													<text class="f-32 f-w col-3">{{ item.cardInfo.name }}</text>
													<!-- <text class="f-24 col-9" style="padding-left: 20upx;">产品经理</text> -->
												</view>
												<view class="segmentation-class">{{ item.cardInfo.age }} · {{ item.cardInfo.experience }} · {{ item.cardInfo.education }}</view>
												<view class="col-3 f-24 card-cart-item">
													<view class="cart-item" v-for="(items, indexs) in item.cardInfo.expect_position_list" :key="indexs">{{ items }}</view>
												</view>
											</view>
										</view>
										<view class="col-9 f-20 p-top-bom-10" style="border-top: 1upx solid #eeeeee;margin-top: 20upx;">个人简历</view>
									</view>
								</view>
								<view class="text-img"><image :src="item.avatar" mode=""></image></view>
							</view>
						</view>
						<!-- 对方名片消息 -->
						<view class="content-item" v-if="item.type == 3 && item.is_my == 1 && !!item.cardInfo" @click.stop="cardHome(item.cardInfo.id)">
							<view class="content-title-time">{{ item.date_time }}</view>
							<view class="dis-flex">
								<view class="text-img-left"><image :src="item.avatar" mode=""></image></view>
								<view >
									<view class="card">
										<view class="dis-flex">
											<view class="card-logo"><image :src="item.cardInfo.logo" mode=""></image></view>
											<view class="cart-content">
												<view class="cart-title">
													<text class="f-32 f-w col-3">{{ item.cardInfo.name }}</text>
													<text class="f-24 col-9" style="padding-left: 20upx;">{{ item.cardInfo.position }}</text>
												</view>
												<view class="segmentation"></view>
												<view class="col-3 f-24 card-cart">{{ item.cardInfo.company }} | {{ item.cardInfo.branch }}</view>
											</view>
										</view>
										<view class="col-9 f-20 p-top-bom-10" style="border-top: 1upx solid #eeeeee;margin-top: 20upx;">个人名片</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 对方简历消息 -->
						<view class="content-item" v-if="item.type == 4 && item.is_my == 1 && !!item.cardInfo" @click.stop="goRecruit_resume(item)">
							<view class="content-title-time">{{ item.date_time }}</view>
							<view class="dis-flex">
								<view class="text-img-left"><image :src="item.avatar" mode=""></image></view>
								<view >
									<view class="card">
										<view class="dis-flex">
											<view class="card-logo"><image :src="item.cardInfo.avatar" mode=""></image></view>
											<view class="cart-content">
												<view class="cart-title">
													<text class="f-32 f-w col-3">{{ item.cardInfo.name }}</text>
													<!-- <text class="f-24 col-9" style="padding-left: 20upx;">产品经理</text> -->
												</view>
												<view class="segmentation-class">{{ item.cardInfo.age }} · {{ item.cardInfo.experience }} · {{ item.cardInfo.education }}</view>
												<view class="col-3 f-24 card-cart-item">
													<view class="cart-item" v-for="(items, indexs) in item.cardInfo.expect_position_list" :key="indexs">{{ items }}</view>
												</view>
											</view>
										</view>
										<view class="col-9 f-20 p-top-bom-10" style="border-top: 1upx solid #eeeeee;margin-top: 20upx;">个人简历</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 底部 -->
			<view class="bottom-box">
				<view class="instantMessenger-bottom dis-flex">
					<view class="img-box" @click="declick"><image src="../../static/chooseCade/biaoqing.png" mode=""></image></view>
					<view class="input-box"><textarea v-if="!showCommunity" @focus="focus" @blur="blur" :fixed="true" auto-height class="inputs" type="text" v-model="setFomeData.content" placeholder="请输入内容..." /></view>
					<view class="btn-box"><view :class="setFomeData.content ? 'btn-option' : 'btn'" @click="sendMmsg('', 0, 2)">发送</view></view>
				</view>
				<view class="dis-flex expression-box" :style="{ padding: off || offis ? '0rpx 30upx' : '30rpx' }" :animation="animationData">
					<swiper class="slider" :current="0">
						<swiper-item v-for="(item, index) in emojiList" :key="index" class="slider-emoji" :class="[index == emojiList.length - 1 ? 'lastbox' : '']">
							<!-- <text class="f-20 slider-emoji-icon" v-for="(emoji, indexs) in item" :key="indexs">{{ imgUrl + '/emoji'+ emoji.url }}</text> -->
							<image
								v-for="(emoji, indexs) in item"
								:key="indexs"
								class="slider-emoji-icon"
								@click="selemoji(emoji)"
								:src="imgUrl + '/emoji/' + emoji.url"
								mode=""
							></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<PopManager :show="showCommunity" type="bottom" @clickmask="showCommunity = false">
				<view class="popBox">
					<view class="f-30 col-3 f-w t-c">
						我的名片
						<text class="iconfont icon-close" style="float: right;" @click="showCommunity = false"></text>
					</view>
					<view class="cardItemBox">
						<radio-group @change="radioChange">
							<view class="card-item dis-flex" v-for="(item, index) in cardList">
								<view class="ridio">
									<view class="ridio-item"><radio :value="index" :checked="index == current" /></view>
								</view>
								<view class="flex-box data">
									<view class="name">
										<view class="data-name dis-il-block">{{ item.name }}</view>
										<view class="dis-il-block data-post">{{ item.position }}</view>
									</view>
									<view class="f-24 col-3 company">{{ item.company }} | {{ item.branch }}</view>
								</view>
								<view class="data-img"><image :src="item.logo" mode=""></image></view>
							</view>
						</radio-group>
					</view>
					<view class="data-btn" @click="sendchexcedecard">选定了</view>
				</view>
			</PopManager>
		</view>
		<PhoneMask :show1="popShow" @clickmask1="closePop"></PhoneMask>
		<getvxphone :show="vxshow" @showFalse="showFalse"></getvxphone>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import PopManager from '@/components/template/PopManager';
import jyfParser from '@/components/jyf-parser/jyf-parser.vue';
import PhoneMask from '@/components/template/PhoneMask';
import getvxphone from '@/components/template/getVXphone.vue';
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
export default {
	components: {
		PopManager,
		jyfParser,
		PhoneMask,
		getvxphone
	},
	data() {
		return {
			videoContext: '',
			showCommunity: false,
			scrollTop: 0,
			scrollHeight: 0,
			textarea: '',
			animation: {},
			animationData: {},
			off: true,
			emojiData: [],
			animationT: {},
			logoding:true,
			animationDataT: {},
			popShow: false,
			vxshow:false,
			emojiList: [
				[
					{ url: '100.gif', alt: '[微笑]' },
					{ url: '101.gif', alt: '[伤心]' },
					{ url: '102.gif', alt: '[美女]' },
					{ url: '103.gif', alt: '[发呆]' },
					{ url: '104.gif', alt: '[墨镜]' },
					{ url: '105.gif', alt: '[哭]' },
					{ url: '106.gif', alt: '[羞]' },
					{ url: '107.gif', alt: '[哑]' },
					{ url: '108.gif', alt: '[睡]' },
					{ url: '109.gif', alt: '[哭]' },
					{ url: '110.gif', alt: '[囧]' },
					{ url: '111.gif', alt: '[怒]' },
					{ url: '112.gif', alt: '[调皮]' },
					{ url: '113.gif', alt: '[笑]' },
					{ url: '114.gif', alt: '[惊讶]' },
					{ url: '115.gif', alt: '[难过]' },
					{ url: '116.gif', alt: '[酷]' },
					{ url: '117.gif', alt: '[汗]' },
					{ url: '118.gif', alt: '[抓狂]' },
					{ url: '119.gif', alt: '[吐]' },
					{ url: '120.gif', alt: '[笑]' },
					{ url: '121.gif', alt: '[快乐]' },
					{ url: '122.gif', alt: '[奇]' },
					{ url: '123.gif', alt: '[傲]' }
				],
				[
					{ url: '124.gif', alt: '[饿]' },
					{ url: '125.gif', alt: '[累]' },
					{ url: '126.gif', alt: '[吓]' },
					{ url: '127.gif', alt: '[汗]' },
					{ url: '128.gif', alt: '[高兴]' },
					{ url: '129.gif', alt: '[闲]' },
					{ url: '130.gif', alt: '[努力]' },
					{ url: '131.gif', alt: '[骂]' },
					{ url: '132.gif', alt: '[疑问]' },
					{ url: '133.gif', alt: '[秘密]' },
					{ url: '134.gif', alt: '[乱]' },
					{ url: '135.gif', alt: '[疯]' },
					{ url: '136.gif', alt: '[哀]' },
					{ url: '137.gif', alt: '[鬼]' },
					{ url: '138.gif', alt: '[打击]' },
					{ url: '139.gif', alt: '[bye]' },
					{ url: '140.gif', alt: '[汗]' },
					{ url: '141.gif', alt: '[抠]' },
					{ url: '142.gif', alt: '[鼓掌]' },
					{ url: '143.gif', alt: '[糟糕]' },
					{ url: '144.gif', alt: '[恶搞]' },
					{ url: '145.gif', alt: '[什么]' },
					{ url: '146.gif', alt: '[什么]' },
					{ url: '147.gif', alt: '[累]' }
				],
				[
					{ url: '148.gif', alt: '[看]' },
					{ url: '149.gif', alt: '[难过]' },
					{ url: '150.gif', alt: '[难过]' },
					{ url: '151.gif', alt: '[坏]' },
					{ url: '152.gif', alt: '[亲]' },
					{ url: '153.gif', alt: '[吓]' },
					{ url: '154.gif', alt: '[可怜]' },
					{ url: '155.gif', alt: '[刀]' },
					{ url: '156.gif', alt: '[水果]' },
					{ url: '157.gif', alt: '[酒]' },
					{ url: '158.gif', alt: '[篮球]' },
					{ url: '159.gif', alt: '[乒乓]' },
					{ url: '160.gif', alt: '[咖啡]' },
					{ url: '161.gif', alt: '[美食]' },
					{ url: '162.gif', alt: '[动物]' },
					{ url: '163.gif', alt: '[鲜花]' },
					{ url: '164.gif', alt: '[枯]' },
					{ url: '165.gif', alt: '[唇]' },
					{ url: '166.gif', alt: '[爱]' },
					{ url: '167.gif', alt: '[分手]' },
					{ url: '168.gif', alt: '[生日]' },
					{ url: '169.gif', alt: '[电]' },
					{ url: '170.gif', alt: '[炸弹]' },
					{ url: '171.gif', alt: '[刀子]' }
				],
				[
					{ url: '172.gif', alt: '[足球]' },
					{ url: '173.gif', alt: '[瓢虫]' },
					{ url: '174.gif', alt: '[翔]' },
					{ url: '175.gif', alt: '[月亮]' },
					{ url: '176.gif', alt: '[太阳]' },
					{ url: '177.gif', alt: '[礼物]' },
					{ url: '178.gif', alt: '[抱抱]' },
					{ url: '179.gif', alt: '[拇指]' },
					{ url: '180.gif', alt: '[贬低]' },
					{ url: '181.gif', alt: '[握手]' },
					{ url: '182.gif', alt: '[剪刀手]' },
					{ url: '183.gif', alt: '[抱拳]' },
					{ url: '184.gif', alt: '[勾引]' },
					{ url: '185.gif', alt: '[拳头]' },
					{ url: '186.gif', alt: '[小拇指]' },
					{ url: '187.gif', alt: '[拇指八]' },
					{ url: '188.gif', alt: '[食指]' },
					{ url: '189.gif', alt: '[ok]' },
					{ url: '190.gif', alt: '[情侣]' },
					{ url: '191.gif', alt: '[爱心]' },
					{ url: '192.gif', alt: '[蹦哒]' },
					{ url: '193.gif', alt: '[颤抖]' },
					{ url: '194.gif', alt: '[怄气]' },
					{ url: '195.gif', alt: '[跳舞]' }
				],
				[
					{ url: '196.gif', alt: '[发呆]' },
					{ url: '197.gif', alt: '[背着]' },
					{ url: '198.gif', alt: '[伸手]' },
					{ url: '199.gif', alt: '[耍帅]' },
					{ url: '200.png', alt: '[微笑]' },
					{ url: '201.png', alt: '[生病]' },
					{ url: '202.png', alt: '[哭泣]' },
					{ url: '203.png', alt: '[吐舌]' },
					{ url: '204.png', alt: '[迷糊]' },
					{ url: '205.png', alt: '[瞪眼]' },
					{ url: '206.png', alt: '[恐怖]' },
					{ url: '207.png', alt: '[忧愁]' },
					{ url: '208.png', alt: '[眨眉]' },
					{ url: '209.png', alt: '[闭眼]' },
					{ url: '210.png', alt: '[鄙视]' },
					{ url: '211.png', alt: '[阴暗]' },
					{ url: '212.png', alt: '[小鬼]' },
					{ url: '213.png', alt: '[礼物]' },
					{ url: '214.png', alt: '[拜佛]' },
					{ url: '215.png', alt: '[力量]' },
					{ url: '216.png', alt: '[金钱]' },
					{ url: '217.png', alt: '[蛋糕]' },
					{ url: '218.png', alt: '[彩带]' },
					{ url: '219.png', alt: '[礼物]' }
				]
			],
			imgUrl: '',
			content: '',
			videos: '',
			images: '',
			isSocketClose: false, // 是否关闭socket
			reconnectCount: 5, // 重连次数
			heartbeatInterval: '', // 心跳定时器
			isStart: false, // 是否启动设备
			setFomeData: {
				i: 0,
				aid: 0,
				source: 0,
				send_id: 51,
				receive_id: 24,
				page: 1,
				page_index: 10,
				send_type: 1,
				receive_type: 1,
				type: 0,
				content: '',
				im_type: 4
			},
			chattingRecords: [],
			chattingRecordsLisy: [],
			userinfo: {},
			current: 0,
			cardList: [],
			getSetInfo: {},
			isAndroid:1,
			offis:true,
			id:''
			
		};
	},
	async onPullDownRefresh() {
		let _this = this;
		if (this.total == this.setFomeData.page) {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			});
			return;
		}
		this.setFomeData.page++;
		let datas = {
			id:this.setFomeData.id,
			other_party_id:this.setFomeData.receive_id,
			other_party_type:this.setFomeData.receive_type,
			type:this.setFomeData.send_type,
			page:this.setFomeData.page
		}
		let data;
		_this.chattingRecords = await _this.getChatNewList(datas);
		_this.chattingRecords.list.map( async (item,index)=>{
			if(item.type == 3 || item.type==4){
				item.cardInfo = await _this.getCardInfo(item);
			}
		})
		uni.getSystemInfo({
		  success: function (res) { // res - 各种参数
		    let obj = uni.createSelectorQuery().select('.content-box')
		    obj.boundingClientRect(function (data) { // data - 各种参数
				let height = data.height;
					let list = _this.chattingRecordsLisy;
					_this.chattingRecordsLisy = _this.chattingRecords.list;
					_this.chattingRecordsLisy = _this.chattingRecordsLisy.concat(list);
					uni.stopPullDownRefresh();
					setTimeout(() => {
						uni.getSystemInfo({
						  success: function (res) { // res - 各种参数
						    let obj = uni.createSelectorQuery().select('.content-box')
						    obj.boundingClientRect(function (datais) { // data - 各种参数
						      console.log(datais);
							  // debugger
								let heightT = datais.height;
								_this.scrollTop = heightT - height;
								// debugger
								setTimeout(()=>{
									_this.webSocket()
								},5000)
						    }).exec()
						  }
						})
					});
				
		    }).exec()
		  }
		})
		// this.webSocket(false,true)
	},
	onReady() {
		// this.videoContext = uni.createVideoContext('myVideo');
		// this.videoContext.requestFullScreen();
		uni.getSystemInfo({
			success: function(res) {
				console.log(res.windowHeight);
				this.scrollHeight = res.windowHeight;
			}
		});
	},
	mounted() {
		// #ifdef H5
		let _this = this;
		let input = document.createElement('input');
		console.info('input', input);
		input.type = 'file';
		input.id = 'fileInput';
		// input.style.display = 'none'
		_this.$refs.input.$el.appendChild(input);
		input.onchange = event => {
			let filesObj = event.target.files['0'];
			var reader = new FileReader();
			// 传入一个参数对象即可得到基于该参数对象的文本内容
			reader.readAsDataURL(filesObj);
			reader.onload = function(e) {
				_this.uploadVideo(e.target.result);
			};
			//上传方法
		};
		// #endif
	},
	onLoad(e) {
		// debugger
		this.setFomeData.receive_id = e.other_party_id;
		this.setFomeData.receive_type = e.other_party_type;
		this.setFomeData.send_type = e.type;
		this.setFomeData.id = e.id || '';
		this.setFomeData.i = App.siteInfo.uniacid;
		this.setFomeData.source = App.getClientType();
		setTimeout(()=>{
			
		},3000)
		this.userinfo = uni.getStorageSync('userinfo');
		
		
		this.setFomeData.send_id =  this.userinfo.mid;
		// console.log(this.getSetInfo,111111111111111111111111);
		uni.getSystemInfo({
			success(res) {
				this.isAndroid = res.platform === 'android' ? '1' : '2';
			}
		});
		// debugger
		this.imgUrl = uni.getStorageSync('imgPrefix');
		// uni.onWindowResize((res) => {
		// 	// this.declick();
		//     console.log('变化后的窗口宽度=' + res.size.windowWidth)
		//     console.log('变化后的窗口高度=' + res.size.windowHeight)
		// })
		this.webSocket();
		// debugger
		if(!this.getSetInfo.is_card){
			this.getSet();
		}
		
		// let page = Math.ceil(emoji.length / 20);
		// for (let i = 0; i < page; i++) {
		// 	this.emojiData[i] = [];
		// 	for (let k = 0; k < 20; k++) {
		// 		emoji[i * 20 + k] ? this.emojiData[i].push(emoji[i * 20 + k]) : '';
		// 	}
		// }
	},
	onUnload() {
		uni.closeSocket();
		uni.onSocketClose(function(res) {
			console.log('WebSocket 已关闭1！');
		});
	},
	onHide() {
		uni.closeSocket();
		uni.onSocketClose(function(res) {
			console.log('WebSocket 已关闭2！',res);
		});
		// uni.onSocketError(function (res) {
		//   console.log('WebSocket连接打开失败，请检查！');
		// });
	},
	onShow() {
		// 初始化一个动画
		let animation = uni.createAnimation({
			duration: 300,
			timingFunction: 'ease'
		});
		this.animation = animation;
		let animationT = uni.createAnimation({
			duration: 300,
			timingFunction: 'ease'
		});
		this.animationT = animationT;
		
	},
	methods: {
		getSet(){
			App._post_form('&p=Im&do=getSetInfo', {}, res => {
				// uni.setStorageSync('getSetInfo', res.data);
				this.getSetInfo = res.data;
			});
		},
		showFalse(){
			console.log('进了showfalse')
			this.vxshow = false;
		},
		closePop() {
			let _this = this
			_this.popShow = false
		},
		blur(){
			// this.rotateAndScale();
			this.off = true;
			this.offis = true;
			let div = this.$refs.boxRef;
			// #ifdef H5
			
			this.scrollTop = 0;
			//#endif
			
			//此时必须异步执行滚动条滑动至底部
			this.add();
		},
		focus(){
			// this.declick()
			// if (this.off) {
			// 	// 使用动画
			// 	this.rotateAndScale();
			// 	this.rotateAndScaleT();
			// } else {
			// 	this.norotateAndScale();
			// 	this.norotateAndScaleT();
			// }
			this.norotateAndScale();
			this.offis = true;
			// #ifdef H5
			
			this.off = false;
			let div = this.$refs.boxRef;
			this.scrollTop = 0;
			//#endif
			
			
			
			//此时必须异步执行滚动条滑动至底部
			this.add();
		},
		// 选择视频
		uploadVideo(file) {
			let _this = this;
			uni.showLoading();
			uni.uploadFile({
				url: App.api_root + '&do=uploadFiles', //仅为示例，非真实的接口地址
				filePath: file,
				name: 'file',
				formData: {
					upload_type: 1
				},
				success: res => {
					let data = JSON.parse(res.data);
					console.info('res', res);
					_this.marginT.marginTop = '300rpx';
					if (data.errno === 0) {
						_this.videos = base64.decode(data.data.img);
						// _this.info.video_link = data.data.image;
						_this.sendMmsg(_this.videos, 2, 2);
					} else {
						App.showError(data.message);
					}
					uni.hideLoading();
				},
				fail: res => {
					uni.hideLoading();
				}
			});
		},
		getchatting(){
			let _this = this;
			let data = {
				other_party_id:this.setFomeData.receive_id,
				other_party_type:this.setFomeData.receive_type,
				type:this.setFomeData.send_type,
				page:1,
				id:this.setFomeData.id
			}
			App._post_form(
				`&p=im&do=get`,
				data,
				res => {
					let obj = res.data.list[res.data.list.length - 1];
					obj.type = 0;
					_this.chattingRecordsLisy.push(obj);
					
					setTimeout(() => {
						_this.add();
					});
				},
				false,
				() => {}
			);
		},
		scrolltoupper(e) {
			console.log(this.scrollTop);
		},
		goRecruit_resume(item) {
			App.navigationTo({
				url: `pages/subPages2/hirePlatform/resume/resume?id=${item.content}&flag=2`
			});
		},
		cardHome(id) {
			App.navigationTo({
				url: `pages/subPages/businesscard/carddetail/carddetail?cardid=${id}`
			});
		},
		sendchexcedecard() {
			this.sendMmsg(this.cardList[this.current].id, 3, 2);
			this.showCommunity = false;
		},
		radioChange: function(evt) {
			console.log(evt);
			this.current = evt.detail.value;
		},
		sendResume() {
			if (this.getSetInfo.is_resume == 0) {
				App.showError(
					`您尚未创建简历，是否前往创建?`,
					data => {
						if (data.confirm) {
							App.navigationTo({
								url: 'pages/subPages2/hirePlatform/addResume/addResume'
							});
						}
					},
					true
				);
			} else {
				App.showError(
					`确定向对方发送简历?`,
					data => {
						if (data.confirm) {
							this.sendMmsg(this.getSetInfo.resume_id, 4, 2);
						}
					},
					true
				);
			}
		},
		sendCard() {
			App._post_form(
				`&p=citycard&do=myCard`,
				{
					page: 1,
					page_index: 999
				},
				res => {
					console.log(res);
					this.cardList = res.data.list;
					this.showCommunity = true;
				},
				false,
				() => {}
			);
		},
		sendMmsg(content = '', type = 0, im_type = 0) {
			if (!this.content && !content && im_type != 4 && !this.setFomeData.content) return;
			this.setFomeData.type = type;
			this.setFomeData.im_type = im_type;
			this.setFomeData.content = content || this.setFomeData.content;
			if (type == 0) {
				this.setFomeData.content = this.replaceEmoji(this.setFomeData.content);
			}
			// let textarea = JSON.stringify(this.setFomeData);
			// debugger
			// uni.sendSocketMessage({
			// 	data: 
			// });
			let _this = this,
				requestData = {
					send_id: _this.setFomeData.id,
					send_type: this.setFomeData.send_type,
					receive_type: this.setFomeData.receive_type,
					type: this.setFomeData.type,
					receive_id: this.setFomeData.receive_id,
					content: this.setFomeData.content
				};
				App._post_form(
					'&p=im&do=send',
					requestData,
					res => {
						if (res.errno === 0) {
							// debugger
							// _this.chattingRecordsLisy.push(_this.chattingRecords.list[0]);
							// _this.scrollTop = 0;
							setTimeout(()=>{
								uni.getSystemInfo({
								  success: function (res) { // res - 各种参数
								
								    let obj = uni.createSelectorQuery().select('.content-box')
								
								    obj.boundingClientRect(function (datas) { // data - 各种参数
								      
								      console.log(datas);
									  
										let heightT = datas.height;
										
										_this.scrollTop = heightT;
										// setTimeout(()=>{
											_this.webSocket()
										// },5000)
								    }).exec()
								  }
								})
							})
						}
					},
					fail => {
						if (fail.data.message == '未绑定手机号') {
							//#ifdef H5
							_this.popShow = true;
							//#endif
							//#ifndef H5
							_this.vxshow = true;
							//#endif
						}
					}
				);
			if (im_type != 4) {
				this.setFomeData.content = '';
				// this.setFomeData.page++;
				// this.sendMmsg('', 0, 4);
				// this.getchatting()
				
			}
			// debugger
			this.setFomeData.content = '';
			this.content = '';
		},
		
		async webSocket(page = 1,flag = false) {
			let _this = this;
			// let div = this.$refs.boxRef;
			// let url = App.siteInfo.siteroot.split(':')[1];
			// // debugger
			// if(url.charAt(url.length - 1) == '/'){
			// 	url = url.substring(0, url.length - 1);
			// }
			// debugger
			// uni.connectSocket({
			// 	url: `wss:${url}:${_this.getSetInfo.port}`,
			// 	fail: err => {
			// 		console.log(err);
			// 	}
			// });
			
			let datas = {
				other_party_id:this.setFomeData.receive_id,
				other_party_type:this.setFomeData.receive_type,
				type:this.setFomeData.send_type,
				page:1,
				id:this.setFomeData.id
			}
			_this.chattingRecords = await _this.getChatNewList(datas);
			_this.chattingRecords.list.map( async (item,index)=>{
				if(item.type == 3 || item.type == 4){
					item.cardInfo = await _this.getCardInfo(item);
				}
			})
			let data;
			uni.getSystemInfo({
			  success: function (res) { // res - 各种参数
				
			    let obj = uni.createSelectorQuery().select('.content-box')
			
			    obj.boundingClientRect(function (data) { // data - 各种参数
				
					console.log(data)
					let height = data.height;
					if (flag) {
						// return
						let list = _this.chattingRecordsLisy;
						_this.chattingRecordsLisy = _this.chattingRecords.list;
						_this.chattingRecordsLisy = _this.chattingRecordsLisy.concat(list);
						uni.stopPullDownRefresh();
						setTimeout(() => {
							uni.getSystemInfo({
							  success: function (res) { // res - 各种参数
							
							    let obj = uni.createSelectorQuery().select('.content-box')
							
							    obj.boundingClientRect(function (datais) { // data - 各种参数
							      
							      console.log(datais);
								  // debugger
									let heightT = datais.height;
									_this.scrollTop = heightT - height;
									// debugger
									setTimeout(()=>{
										_this.webSocket()
									},5000)
							    }).exec()
							  }
							})
							
							
						});
					} else if (_this.chattingRecords.im_type == 2) {
						_this.chattingRecordsLisy.push(_this.chattingRecords.list[0]);
						// _this.scrollTop = 0;
						setTimeout(()=>{
							uni.getSystemInfo({
							  success: function (res) { // res - 各种参数
							
							    let obj = uni.createSelectorQuery().select('.content-box')
							
							    obj.boundingClientRect(function (datas) { // data - 各种参数
							      
							      console.log(datas);
								  
									let heightT = datas.height;
									
									_this.scrollTop = heightT;
									setTimeout(()=>{
										_this.webSocket()
									},5000)
							    }).exec()
							  }
							})
						})
							
						// return
					} else {
						if (_this.chattingRecordsLisy.length > 0) {
							let newArray = _this.chattingRecordsLisy.concat(..._this.chattingRecords.list),
								temp = {},
								result = [];
							newArray.map((item, index) => {
								if (!temp[item.id]) {
									result.push(item);
									temp[item.id] = true;
								}
							});
							_this.chattingRecordsLisy = result;
							_this.add();
							setTimeout(()=>{
								_this.webSocket()
							},5000);
						} else{
							// let chatList = _this.chattingRecordsLisy;
							// _this.getCardInfo(chatList);
							_this.chattingRecordsLisy = _this.chattingRecords.list;
							_this.total = _this.chattingRecords.total;
							setTimeout(() => {
								_this.add();
								setTimeout(()=>{
									_this.webSocket()
								},5000)
							});
						}
						
					}
					// console.log(res.data,'收到服务器内容：', JSON.parse(res.data));
					// debugger
					
			    }).exec()
			  }
			})
			// App._post_form(
			// 	'&p=im&do=get',
			// 	datas,
			// 	res => {
			// 		_this.chattingRecords = res.data;
					
			// 		// debugger
			// 		console.log(_this.chattingRecords,111)
			// 		//此时必须异步执行滚动条滑动至底部
					
			// 		// this.scrollTop = 0;
					
			// 	},
			// 	err => {
			// 		if (err.data.errno === 1) {
			// 			App.navigationTo({
			// 				url: err.data.data.url
			// 			});
			// 		}
			// 	},
			// 	() => {}
			// );
			
			// uni.onSocketMessage(function(res) {
				
				
				
			// });
			// // 连接打开
			// uni.onSocketOpen(function(res) {
			// 	console.log('WebSocket打开');
			// 	_this.sendMmsg('', 0, 4);
			// 	// 断线后重连几次
			// 	_this.reconnectCount = 5
			// 	// 5秒发送一次心跳
			// 	// _this.heartbeatInterval = setInterval(()=>{
				  
			// 	// },5000)
			// });
			// uni.onSocketClose(function(res) {
			// 	console.log('WebSocket 已关闭2！',res);
			// 	 // _this.webSocket()
			// });
			// uni.onSocketError(function (res) {
			//   console.log('WebSocket连接打开失败，请检查！',res);
			// });
		},
		async getChatNewList(data){
			return new Promise((resolve, reject) => {
				App._post_form(
					'&p=im&do=get',
					data,
					res=> {
						resolve(res.data);
						// _this.chattingRecords = res.data;
						// _this.chattingRecords.list.map((item,index)=>{
						// 	if(item.type == 3 || item.type == 4){
						// 		item.cardInfo = await _this.getCardInfo(item);
						// 	}
						// })
					},
					err => {
						if (err.data.errno === 1) {
							App.navigationTo({
								url: err.data.data.url
							});
						}
					},
					() => {})
			})
			
		},
		// 获取名片数据
		getCardInfo(item) {
			return new Promise((resolve, reject) => {
				if (item.type == 3 && !item.cardInfo) {
					App._post_form(
						`&p=citycard&do=cardInfo`,
						{
							id: item.content
						},
						res => {
							resolve(res.data);
							// item.cardInfo = res.data;
							// this.chattingRecordsLisy = cardList;
							// // console.log(this.chattingRecordsLisy);
							// if (this.setFomeData.page == 1) {
							// 	this.add();
							// }
						},
						false,
						() => {}
					);
				} else if (item.type == 4) {
					App._post_form(
						`&p=recruit&do=resumeDesc`,
						{
							id: item.content
						},
						res => {
							resolve(res.data);
							// item.cardInfo = res.data;
							// this.chattingRecordsLisy = cardList;
							// console.log(this.chattingRecordsLisy);
							// if (this.setFomeData.page == 1) {
							// 	this.add();
							// }
						},
						false,
						() => {}
					);
				}
				// App._post_form('&p=Order&do=planTransfer', {
				// 	id,
				// 	type
				// }, res => {
					
				// })
			})
		},
		//替换表情符号为图片
		replaceEmoji(str) {
			let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
				console.log('item: ' + item);
				for (let i = 0; i < this.emojiList.length; i++) {
					let row = this.emojiList[i];
					for (let j = 0; j < row.length; j++) {
						let EM = row[j];
						if (EM.alt == item) {
							//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
							//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
							// let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
							let imgstr = '<img src="' + this.imgUrl + 'emoji/' + EM.url + '">';
							console.log('imgstr: ' + imgstr);
							return imgstr;
						}
					}
				}
			});
			return '<div style="display: flex;align-items: center;word-wrap:break-word;flex-wrap: wrap;">' + replacedStr + '</div>';
		},
		async sendPictures() {
			let _this = this;
			// #ifdef H5
			if(App.getClientType() == 2){
				let res = await App.browser_upload(1);
			    for (let i = 0; i < res.tempFilePaths.length; i++) {
			    	let aa = await App._upLoad(res.tempFilePaths[i])
			    	// _this.pic.push(aa.data.image);
			    	// _this.picArray.push(aa.data.img);
			    	_this.images = aa.data.img;
			    	_this.sendMmsg(_this.images, 1, 2);
			    }
				return
			}
			wxApi.choseImage(res => {
				wxApi.uoloadIg(res.localIds[0], data => {
					if (data.errMsg === 'uploadImage:ok') {
						uni.showLoading({});
						let requestData = {
							upload_type: 2,
							id: data.serverId
						};
						App._post_form(
							'&do=uploadFiles',
							requestData,
							res => {
								if (res.errno === 0) {
									// _this.pic.push(res.data.image);
									// _this.picArray.push(res.data.img);
									_this.images = res.data.img;
									_this.sendMmsg(_this.images, 1, 2);
								}
							},
							false,
							() => {
								uni.hideLoading();
							}
						);
					} else {
						uni.hideLoading();
						App.showError('上传失败');
					}
				});
			});
			// #endif
			// #ifndef H5
			wx.chooseImage({
				count: 1,
				sourceType: ['album', 'camera'],
				success: async function(res) {
					for (let i = 0; i < res.tempFilePaths.length; i++) {
						let aa = await App._upLoad(res.tempFilePaths[i])
						// _this.pic.push(aa.data.image);
						// _this.picArray.push(aa.data.img);
						_this.images = aa.data.img;
						_this.sendMmsg(_this.images, 1, 2);
					}
				}
			})
			// #endif
			// let _this = this;
			// uni.chooseImage({
			// 	count: 1,
			// 	sourceType: ['album', 'camera'],
			// 	success: async function(res) {
			// 		for (let i = 0; i < res.tempFilePaths.length; i++) {
			// 			let aa = await App._upLoad(res.tempFilePaths[i]);
			// 			console.log(aa);
			// 			_this.images = aa.data.img;
			// 			_this.sendMmsg(_this.images, 1, 2);
			// 		}
			// 	}
			// });
		},
		videoUp(){
			let _this = this;
						uni.chooseVideo({
							count: 1,
							sourceType: ['camera', 'album'],
							success: function(res) {
								// _this.info.video_link = res.tempFilePath;
								// console.info(res.tempFilePath);
								// let siteroot = null;
								
								uni.showLoading();
								uni.uploadFile({
									url: App.api_root + '&do=uploadFiles', //仅为示例，非真实的接口地址
									filePath: res.tempFilePath,
									name: 'file',
									formData: {
										upload_type: 1,
										is_base: 1
									},
									success: res => {
										let data = JSON.parse(res.data),
											base64 = new _this.$util.Base64();
										console.info('data', data);
										// _this.marginT.marginTop = '300rpx'
										if (data.errno === 0) {
											// _this.src = base64.decode(data.data.img);
											_this.videos = base64.decode(data.data.img);
											_this.sendMmsg(_this.videos, 2, 2);
										} else {
											App.showError(data.message, () => {});
										}
										uni.hideLoading();
									},
									fail: res => {
										console.info('resInfofail', res);
										// _this.showmain = JSON.stringify(res);
										uni.hideLoading();
									}
								});
							}
						});
		},
		sendVideo() {
			let _this = this;
			// #ifdef H5
			if (_this.isAndroid === '2') {
				return document.getElementById('fileInput').click();
			} else {
				_this.videoUp();
			}
			// #endif
			// #ifndef H5
			_this.videoUp();
			// #endif
			
		},
		selemoji(m) {
			this.setFomeData.content = this.setFomeData.content + m.alt;

			console.log(this.setFomeData.content, this.content);
		},
		closeEmoji() {
			if (this.off) {
				// 使用动画
				// this.rotateAndScale();
				// this.rotateAndScaleT();
			} else {
				this.norotateAndScale();
				// this.norotateAndScaleT();
			}
			this.off = true;
			this.offis = true;
			// let div = this.$refs.boxRef;
		},
		declick(flag) {
			if (this.off) {
				// 使用动画
				this.rotateAndScale();
				this.rotateAndScaleT();
			} else {
				this.norotateAndScale();
				this.norotateAndScaleT();
			}
			this.off = !this.off;
			this.offis = !this.offis;
			let div = this.$refs.boxRef;
			this.scrollTop = 1000;
			//此时必须异步执行滚动条滑动至底部
			this.add();
			// setTimeout(() => {
			// 	this.scrollTop = 0;
			// 	this.$nextTick(() => {
			// 		let con = document.getElementById('boxbox'); // 获取对象

			// 		this.scrollTop = con.scrollHeight; // 滚动高度
			// 		console.log(con.scrollHeight, this.scrollTop);
			// 	});
			// 	// console.log(`点击了添加按钮，更新时间：,此时的div.scrollHeight是：${div.scrollHeight}`)
			// }, 0);
		},
		// 定义动画内容
		rotateAndScale() {
			// 定义动画内容
			this.animation
				.height(200)
				.scale(1, 1)
				.step();
			// 导出动画数据传递给data层
			this.animationData = this.animation.export();
		},
		norotateAndScale() {
			this.animation
				.height(0)
				.scale(1, 1)
				.step();
			this.animationData = this.animation.export();
		},
		// 定义动画内容
		rotateAndScaleT() {
			// 定义动画内容
			console.log(this.animationT);
			// debugger
			this.animationT
				.translateY(100)
				.scale(1, 1)
				.step();
			// 导出动画数据传递给data层
			this.animationDataT = this.animationT.export();
		},
		norotateAndScaleT() {
			this.animationT
				.translateY(0)
				.scale(1, 1)
				.step();
			this.animationDataT = this.animationT.export();
		},
		play(e) {
			console.log(e);
			// debugger

			// this.videoContext.requestFullScreen();
		},
		pullUp() {},
		add() {
			// let div = this.$refs.boxRef;
			let _this = this;
			//此时必须异步执行滚动条滑动至底部
			// this.scrollTop = 0;
			setTimeout(() => {
				
				uni.getSystemInfo({
				  success: function (res) { // res - 各种参数
				
				    let obj = uni.createSelectorQuery().select('.content-box')
				
				    obj.boundingClientRect(function (data) { // data - 各种参数
				      
				      console.log(data)
						_this.scrollTop = data.height;
						_this.logoding = _this.logoding
						_this.logoding = _this.logoding
						_this.showCommunity = !_this.showCommunity
						_this.showCommunity = !_this.showCommunity
						// debugger
				    }).exec()
				  }
				})
				// this.$nextTick(() => {
				// 	let con = document.getElementById('boxbox'); // 获取对象

				// 	this.scrollTop = con.scrollHeight; // 滚动高度
				// 	console.log(con.scrollTop, this.scrollTop);
				// });
				// console.log(`点击了添加按钮，更新时间：,此时的div.scrollHeight是：${div.scrollHeight}`)
			}, 0);
		},
		lookimg(imgUrl) {
			let img = [imgUrl];
			uni.previewImage({
				current: 1,
				urls: img
			});
		}
	}
};
</script>

<style>
page {
	background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.instantMessenger {
	.instantMessenger-title {
		position: fixed;
		width: 100vw;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		background-color: #ffffff;
		z-index: 9999;
		.instantIten{
			flex: 1;
			min-width: 25%;
		}
	}
	// .instantMessenger-title:after {
	//     content: "";
	//     flex: 0.25;
	// 	min-width: 25%;
	// }
	.scroll-view {
		padding: 160upx 0 100upx;
		// overflow: hidden;
		height: 80vh;
	}
	.content-box {
		position: relative;
		padding: 30upx;
		width: 92vw;
		// bottom: 140upx;
		left: 0;
		min-height: 950upx;
		// overflow: auto;
		.content-item {
			padding-bottom: 70upx;
		}
		// background-color: #F000EE;
		.content-title-time {
			padding-bottom: 20upx;
			color: #999999;
			font-size: 24upx;
			text-align: center;
		}
		.text-content {
			max-width: 400upx;
			padding: 20upx 40upx;
			background-color: #3388ff;
			font-size: 28upx;
			color: #ffffff;
			border-radius: 20upx 0upx 20upx 20upx;
			flex-direction: row-reverse;
			margin-left: auto;
		}
		.text-content-left {
			max-width: 400upx;
			padding: 20upx 40upx;
			background-color: #ffffff;
			font-size: 28upx;
			min-height: 40upx;
			line-height: 40upx;
			color: #333333;
			border-radius: 00upx 20upx 20upx 20upx;
			flex-direction: row-reverse;
		}
		.text-content-img {
			image {
				width: 300upx;
				height: 400upx;
				border-radius: 20upx;
			}
			uni-video {
				width: 300upx;
				height: 400upx;
				border-radius: 20upx;
			}
			video {
				width: 300upx;
				height: 400upx;
				border-radius: 20upx;
			}
		}
		.text-content-img-r {
			margin-left: auto;
			image {
				width: 300upx;
				height: 400upx;
				border-radius: 20upx;
			}
			uni-video {
				width: 300upx;
				height: 400upx;
				border-radius: 20upx;
			}
			video {
				width: 300upx;
				height: 400upx;
				border-radius: 20upx;
			}
		}
		.text-img {
			flex: 0.2;
			// margin-left:auto;
			padding-left: 30upx;
			image {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				float: right;
			}
		}
		.text-img-left {
			flex: 0.2;
			// margin-left:auto;
			padding-right: 30upx;
			image {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
			}
		}
		.card {
			width: 480upx;
			// height: 200upx;
			border-radius: 10upx;
			background-color: #ffffff;
			padding: 30upx 30upx 0;
			.card-logo {
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
				padding-right: 20upx;
				image {
					width: 90upx;
					height: 90upx;
					border-radius: 50%;
				}
			}
			.cart-content {
				.segmentation {
					width: 90upx;
					height: 1upx;
					background: #ffffff;
					border-top: 2upx solid #707070;
					margin: 20upx 0;
					opacity: 1;
				}
				.segmentation-class {
					margin: 20upx 0;
					font-size: 24upx;
					color: #999999;
				}
				.card-cart {
					width: 360upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.card-cart-item {
					height: 35upx;
					overflow: hidden;
					.cart-item {
						display: inline-block;
						// width: 55upx;
						padding: 0 10upx;
						height: 35upx;
						border-radius: 4upx;
						color: #666666;
						background-color: #f4f4f4;
						margin-right: 10upx;
						font-size: 20upx;
						line-height: 35upx;
						text-align: center;
					}
				}
			}
		}
	}
	.bottom-box {
		background-color: #ffffff;
		width: 100vw;
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
		.instantMessenger-bottom {
			padding: 20upx 30upx;
			.img-box {
				border-radius: 60upx;
				// padding-top: 5upx;
				image {
					width: 60upx;
					height: 60upx;
				}
			}
			.input-box {
				flex: 1;
				padding: 5upx 30upx 0;
				.inputs {
					// min-height: 70upx!important;
					width: 100%;
					height: auto;
					font-size: 28upx;
					padding-top: 10upx;
					// max-height: 100upx;
					// overflow: auto;
				}
				.inputs /deep/ uni-textarea {
					height: auto;
				}
			}
			.btn-box {
				float: right;
				.btn {
					width: 90upx;
					height: 50upx;
					background: #e4efff;
					opacity: 1;
					border-radius: 60upx;
					padding: 10upx 32upx;
					font-size: 32upx;
					color: #ffffff;
					line-height: 50upx;
					text-align: center;
				}
				.btn-option {
					width: 90upx;
					height: 50upx;
					background: #3388ff;
					opacity: 1;
					border-radius: 60upx;
					padding: 10upx 32upx;
					font-size: 32upx;
					color: #ffffff;
					line-height: 50upx;
					text-align: center;
				}
			}
		}
		.expression-box {
			// padding: 30upx;
			// height: 0;
			border-top: 1upx solid #eeeeee;
			flex-wrap: wrap;
			justify-content: space-between;
			height: 0;
			overflow: auto;
			.expression-item {
				flex: 0 0 12.5%;
				width: 60upx;
				height: 60upx;
				image {
					width: 60upx;
					height: 60upx;
				}
			}
			.slider {
				width: 100%;
				height: 100%;
				.slider-emoji {
					width: 375upx;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: flex-start;
					display: flex;
					.slider-emoji-icon {
						width: 30upx;
						height: 60upx;
						text-align: center;
						padding: 20upx;
						flex: 0 0 10.25%;
						// margin-bottom: 30upx;
						// display: inline-block;
					}
				}
			}

			.lastbox {
				justify-content: flex-start;
			}
		}
	}
	.popBox {
		width: 750upx;
		height: 750upx;
		background: #ffffff;
		opacity: 1;
		border-radius: 30upx 30upx 0upx 0upx;
		padding: 30upx;
		box-sizing: border-box;
		background-color: #ffffff;
		position: relative;
		.cardItemBox {
			padding-top: 30upx;
			height: 500upx;
			overflow: auto;
			.card-item {
				padding: 30upx;
				border: 1upx solid #eeeeee;
				box-sizing: border-box;
				border-radius: 10upx;
				margin-bottom: 20upx;
				.ridio {
					height: 150upx;
					line-height: 150upx;
					width: 100upx;
					.ridio-item {
						margin: auto;
					}
				}
				.data {
					.name {
						.data-name {
							color: #333333;
							width: 100upx;
							text-align: center;
							font-size: 32upx;
							font-weight: bold;
							padding-bottom: 30upx;
							border-bottom: 4upx solid #cccccc;
						}
						.data-post {
							font-size: 24upx;
							color: #999999;
							margin-left: 20upx;
						}
					}
					.company {
						padding-top: 30upx;
					}
				}
				.data-img {
					padding-top: 10upx;
					image {
						width: 100upx;
						height: 100upx;
						border-radius: 60upx;
					}
				}
			}
		}
		.data-btn {
			width: 690upx;
			height: 80upx;
			background: #3388ff;
			opacity: 1;
			border-radius: 60upx;
			line-height: 80upx;
			text-align: center;
			font-size: 28upx;
			color: #ffffff;
			position: absolute;
			bottom: 30upx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
</style>
