<template>
	<div class="message flex align-center justify-center" @click.stop="closeDialog()">
		<!-- 消息主体 -->
		<div class="content flex align-center justify-between">
			<!-- 左侧聊天列表 -->
			<div class="content-l flex align-center justify-center">
				<div class="content-l-box flex algin-center justify-center flex-wrap">
					<div class="content-l-box-items" :class="selectIndex==1?'megActive':''" @click="getSysMsgList(true)"
						v-for="(item,index) in msgList" :key="index">
						<div class="content-l-box-item flex justify-between">
							<div class="content-l-box-item-l flex align-center">
								<img src="/images/message/sysIcon.png" alt="" srcset="" />
								<div class="content-l-box-item-con">
									<div class="content-l-box-item-con-title">
										{{item.title?item.title: '系统消息'}}
									</div>
									<div class="content-l-box-item-con-cons">
										{{item.content}}
									</div>
								</div>
							</div>
							<div class="content-l-box-item-r">
								<div v-if="messageCount>0"
									class="content-l-box-item-r-dian flex align-center justify-center">
									{{messageCount}}
								</div>
							</div>
						</div>
					</div>
					<!-- <div class="content-l-box-items">
						<div class="content-l-box-item flex justify-between">
							<div class="content-l-box-item-l flex align-center">
								<img src="/images/message/kefuIcon.png" alt="" srcset="" />
								<div class="content-l-box-item-con">
									<div class="content-l-box-item-con-title">
										在线客服
									</div>
									<div class="content-l-box-item-con-cons">
										联系在线客服
									</div>
								</div>
							</div>
							<div class="content-l-box-item-r">
								<div v-if="userCount>0"
									class="content-l-box-item-r-dian flex align-center justify-center">
									{{userCount}}
								</div>
							</div>
						</div>
					</div> -->
					<div class="content-l-box-items" :class="liftIndex==index?'megActive':''"
						@click.stop="startMsg(item,index)" v-for="(item,index) in leftList" :key="index">
						<div class="content-l-box-item flex justify-between">
							<div class="content-l-box-item-l flex align-center">
								<img :src="item.avatar?item.avatar:'/logo.png'" alt="" srcset="" />
								<div class="content-l-box-item-con">
									<div class="content-l-box-item-con-title flex algin-center">
										{{item.userName}}
										<span>
											{{item.stationName}}
										</span>
									</div>
									<div v-if="item.messageType == 1" class="content-l-box-item-con-cons">
										{{item.content}}
									</div>
									<div v-else-if="item.messageType == 18" class="content-l-box-item-con-cons">
										位置
									</div>
									<div v-else-if="item.messageType == 9" class="content-l-box-item-con-cons">
										简历请求
									</div>
									<div v-else-if="item.messageType == 6" class="content-l-box-item-con-cons">
										微信请求
									</div>
									<div v-else-if="item.messageType == 5" class="content-l-box-item-con-cons">
										手机号请求
									</div>
									<div v-else class="content-l-box-item-con-cons">
										[图片]
									</div>
								</div>
							</div>
							<div class="content-l-box-item-r">
								{{item.messageTime?getMonthOrDay(item.messageTime):''}}
								<div class="flex justify-end" style="margin-top: 5px;">
									<div v-if="item.contentCount"
										class="content-l-box-item-r-dian flex align-center justify-center">
										{{item.contentCount}}
									</div>
								</div>

							</div>
						</div>
					</div>

				</div>
			</div>
			<!-- 右侧消息窗口 -->
			<div class="content-r">
				<div v-if="selectIndex==1" v-infinite-scroll="handleScroll" ref="contentrtz" class="content-r-tz">
					<div class="content-r-tz-item" v-for="(item,index) in sysMsgList" :key="index">
						<div class="content-r-tz-item-title">
							{{item.title}}
						</div>
						<div class="content-r-tz-item-cons flex align-center justify-between">
							{{item.content}}
							<el-badge :is-dot="item.isSee == 0?true:false" style="margin-right: 10px;">
								<span>{{item.createAt}}</span>
							</el-badge>

						</div>
					</div>
				</div>
				<div v-else-if="selectIndex==3" class="content-r-msg">
					<view class="content-r-msg-title flex align-center" v-if="userType == 1">
						<div class="content-r-msg-title-s" v-if="title">
							{{title}}
						</div>
						<el-divider direction="vertical" />
						<div class="content-r-msg-title-n" v-if="postPushInfo.stationName">
							{{postPushInfo.stationName}}
						</div>
						<div class="content-r-msg-title-p" v-if="postPushInfo.salaryRange">
							{{postPushInfo.salaryRange}}
						</div>
						<div class="content-r-msg-title-e" v-if="postPushInfo.education">
							{{postPushInfo.education}}
						</div>
					</view>
					<view class="content-r-msg-title flex align-center" v-if="userType == 2">
						<div class="content-r-msg-title-s" v-if="resumesInfo.userName">
							{{resumesInfo.userName}}
						</div>
						<el-divider direction="vertical" />
						<div class="content-r-msg-title-n" v-if="resumesInfo.intentionRuleClassifyName">
							{{resumesInfo.intentionRuleClassifyName}}
						</div>
						<div class="content-r-msg-title-p" v-if="resumesInfo.intentionSalaryRange">
							{{resumesInfo.intentionSalaryRange}}
						</div>
						<div class="content-r-msg-title-e" v-if="resumesInfo.resumesWorkExperience">
							{{ resumesInfo.resumesWorkExperience || '0' }}年
						</div>
					</view>
					<!-- 聊天记录 -->
					<div class="content-r-msg-chat flex align-center justify-center">
						<div ref="messageBox" class="content-r-msg-chats">
							<div class="message-box-item" v-for="(item,index) in megList" :key="index">
								<!-- 对方的消息 -->
								<div class="message-boxs message-box-l flex flex-wrap" v-if="item.userId != userId">
									<img class="message-boxs-avatar" :src="item.avatar?item.avatar:'/logo.png'"
										alt="" />
									<div class="message-box-l-con" v-if="item.messageType==1 || item.messageType==10">
										{{item.content}}
									</div>
									<div class="message-box-l-con flex align-center" v-if="item.messageType==20">
										视频通话
										<img src="../../../public/images/message/historyVideo_black.png"
											style="width: 25px;height: 25px;margin-left: 10px;" mode=""></img>
									</div>
									<div class="message-box-l-con flex align-center" v-if="item.messageType==21">
										语音通话
										<img src="../../../public/images/message/historyAudio_black.png"
											style="width: 25px;height: 25px;margin-left: 10px;" mode=""></img>
									</div>
									<div class="message-box-l-con flex algin-center" style="cursor: pointer;"
										@click="jumpToTencentMap(item.content.latitude,item.content.longitude,item.content.address)"
										v-if="item.messageType==18">
										{{item.content.address}}
										<el-icon style="margin-left: 10px;" :size="20" color="#00DD9A">
											<MapLocation />
										</el-icon>
									</div>
									<!-- 图片 -->
									<div class="message-box-l-con" style="background-color: #ffffff;"
										v-if="item.messageType==2">
										<el-image style="width: 100px;height: 100px;border-radius: 4px;"
											:src="item.content" fit="cover" :zoom-rate="1.2" :max-scale="7"
											:min-scale="0.2" :preview-src-list="[item.content]" :initial-index="4" />
									</div>
									<!-- 语音消息 -->
									<div class="message-box-l-con" v-if="item.messageType==3">
										语音消息，请前往APP或小程序查看
									</div>
									<!-- 表情 -->
									<div class="message-box-l-con" style="background-color: #ffffff;"
										v-if="item.messageType==4">
										<img :src="emjSrc+item.content" alt="" />
									</div>
									<!-- 交换手机号请求 -->
									<div class="message-box-l-phone"
										v-if="item.messageType==5 && item.content=='手机号请求'">
										我想跟你交换手机号，是否同意？
										<div class="message-box-l-phone-btn flex align-center">
											<el-button plain size="small"
												@click.stop="refuseFun(item.chatContentId)">拒绝</el-button>
											<el-button type="primary" size="small"
												@click.stop="tongyi(item.messageType,item.chatContentId)">同意</el-button>
										</div>
									</div>
									<!-- 交换手机号请求同意 -->
									<div class="message-box-l-con"
										v-if="item.messageType === 5 && item.content!='手机号请求'">
										已同意交换手机号
									</div>
									<!-- 交换微信号请求 -->
									<div class="message-box-l-phone"
										v-if="item.messageType==6 && item.content=='微信号请求'">
										我想跟你交换微信号，是否同意？
										<div class="message-box-l-phone-btn flex align-center">
											<el-button plain size="small"
												@click.stop="refuseFun(item.chatContentId)">拒绝</el-button>
											<el-button type="primary" size="small"
												@click.stop="tongyi(item.messageType,item.chatContentId)">同意</el-button>
										</div>
									</div>
									<!-- 交换微信号请求同意 -->
									<div class="message-box-l-con"
										v-if="item.messageType === 6 && item.content!='微信号请求'">
										已同意交换微信号
									</div>
									<div class="message-box-l-con" v-if="item.messageType==7">
										<div class="" v-if="item.userType==1">
											我的手机号为：{{JSON.parse(item.content).userPhone}}
										</div>
										<div v-else>
											我的手机号为：{{JSON.parse(item.content).companyPhone}}
										</div>
									</div>
									<div class="message-box-l-con" v-if="item.messageType==8">
										<div class="" v-if="item.userType==1">
											我的微信号为：{{JSON.parse(item.content).userWx}}
										</div>
										<div v-else>
											我的微信号为：{{JSON.parse(item.content).companyWx}}
										</div>
									</div>
									<!-- 交换手机号请求拒绝 -->
									<div class="message-box-l-con" v-if="item.messageType==12">
										{{item.content}}已拒绝
									</div>
									<!-- 简历请求 -->
									<div class="message-box-l-phone" v-if="item.messageType==9 && item.content=='简历请求'">
										我想要你的一份简历，是否同意？
										<div class="message-box-l-phone-btn flex align-center">
											<el-button plain size="small"
												@click.stop="refuseFun(item.chatContentId)">拒绝</el-button>
											<el-button type="primary" size="small"
												@click.stop="resumesTy()">同意</el-button>
										</div>
									</div>
									<!-- 简历请求已同意 -->
									<div class="message-box-l-con"
										v-if="item.content && item.messageType === 9 && item.content!=='简历请求'">
										{{item.content}}
									</div>
									<div
										style="width: 100%;color: #999999;font-size: 12px;padding-left: 50px;margin-top: 4px;">
										{{item.createTime}}
									</div>
								</div>
								<!-- 我发的消息 -->
								<div class="message-boxs message-box-r flex flex-wrap" v-else>
									<!-- 文字消息 -->
									<div class="message-box-r-con" v-if="item.messageType==1 || item.messageType==10">
										{{item.content}}
									</div>
									<div class="message-box-r-con flex align-center" v-if="item.messageType==20">
										视频通话
										<img src="../../../public/images/message/historyVideo_white.png"
											style="width: 25px;height: 25px;margin-left: 10px;" mode=""></img>
									</div>
									<div class="message-box-r-con flex align-center" v-if="item.messageType==21">
										语音通话
										<img src="../../../public/images/message/historyAudio_white.png"
											style="width: 25px;height: 25px;margin-left: 10px;" mode=""></img>
									</div>
									<div class="message-box-r-con flex algin-center" style="cursor: pointer;"
										@click="jumpToTencentMap(item.content.latitude,item.content.longitude,item.content.address)"
										v-if="item.messageType==18">
										{{item.content.address}}
										<el-icon style="margin-left: 10px;" :size="20" color="#ffffff">
											<MapLocation />
										</el-icon>
									</div>
									<!-- 简历请求 -->
									<div class="message-box-r-con" v-if="item.messageType==9">
										简历请求已发送，等待对方同意
									</div>
									<!-- 图片 -->
									<div class="message-box-r-con" style="background-color: #ffffff;"
										v-if="item.messageType==2">
										<el-image style="width: 100px;height: 100px;border-radius: 4px;"
											:src="item.content" fit="cover" :zoom-rate="1.2" :max-scale="7"
											:min-scale="0.2" :preview-src-list="[item.content]" :initial-index="4" />
									</div>
									<!-- 语音消息 -->
									<div class="message-box-r-con" v-if="item.messageType==3">
										语音消息，请前往APP或小程序查看
									</div>
									<!-- 表情消息 -->
									<div class="message-box-r-con" style="background-color: #ffffff;"
										v-if="item.messageType==4">
										<img :src="emjSrc+item.content" alt="" />
									</div>
									<!-- 交换手机号请求 -->
									<div class="message-box-r-con" v-if="item.messageType==5">
										交换手机号请求已发送，等待对方同意
									</div>
									<div class="message-box-r-con" v-if="item.messageType==7">
										<div class="" v-if="item.userType==1">
											我的手机号为：{{JSON.parse(item.content).userPhone}}
										</div>
										<div v-else>
											我的手机号为：{{JSON.parse(item.content).companyPhone}}
										</div>
									</div>
									<!-- 交换微信号请求 -->
									<div class="message-box-r-con" v-if="item.messageType==6">
										交换微信号请求已发送，等待对方同意
									</div>
									<div class="message-box-r-con" v-if="item.messageType==8">
										<div class="" v-if="item.userType==1">
											我的微信号为：{{JSON.parse(item.content).userWx}}
										</div>
										<div v-else>
											我的微信号为：{{JSON.parse(item.content).companyWx}}
										</div>
									</div>
									<!-- 交换手机号请求拒绝 -->
									<div class="message-box-r-con" v-if="item.messageType==12">
										{{item.content}}已拒绝
									</div>

									<img class="message-boxs-avatar" :src="avatar?avatar:'/logo.png'" alt="" />
									<div
										style="width: 100%;color: #999999;font-size: 12px;padding-right: 50px;margin-top: 4px;text-align: right;">
										{{item.createTime}}
									</div>
								</div>
							</div>
						</div>

					</div>
					<!-- 底部 -->
					<div class="content-r-msg-btom flex align-center justify-center">
						<div class="content-r-msg-btoms">
							<div class="message-btom-content">
								<el-input @keyup.enter.prevent="sendMessage(1)" style="margin-top: 10px;" resize="none"
									:input-style="inputStyles" v-model="content" :autosize="{ minRows: 3, maxRows: 3 }"
									type="textarea" placeholder="请输入内容" />
							</div>
							<div class="message-btom-btn flex align-center justify-between">
								<div class="message-btom-btn-l flex align-center">
									<div @click.stop="czlist(index)" @mouseover="changeImageSrc(index)"
										@mouseout="resetImageSrc(index)"
										class="message-btom-btn-l-item flex align-center" v-for="(item,index) in czList"
										:key="index">
										<div v-if="index == 1" class="flex align-center">
											<el-upload class="flex align-center" :action="action"
												:show-file-list="false" :on-success="handleAvatarSuccess">
												<img :src="czIndex==index?item.srcS:item.src" alt="" srcset="" />
											</el-upload>
										</div>
										<div v-else class="flex align-center">
											<img :src="czIndex==index?item.srcS:item.src" alt="" srcset="" />
											{{item.name}}
										</div>


									</div>
									<div v-if="isShowEmoj"
										class="message-btom-btn-l-emj flex align-center justify-center">
										<div class="message-btom-btn-l-emj-box">
											<img @click="sendMessage(4,item.url)" v-for="(item,index) in emojList"
												:key="index" :src="emjSrc+item.url" :alt="item.alt" srcset="" />
										</div>
									</div>
									<div v-if="isShowEmoj" class="message-btom-btn-l-emjs"></div>
								</div>
								<el-button type="primary" @click="sendMessage(1)">发送</el-button>
							</div>
						</div>

					</div>

				</div>
				<div v-else class="content-r-no flex align-center justify-center flex-wrap">
					<img src="/images/index/noJl.png" alt="" />
					<div class="content-r-no-txt">
						与你沟通过的都会在左侧列表展示
					</div>
				</div>
			</div>
		</div>
		<el-dialog v-model="dialogms" title="面试邀请" width="30%" @close="closeMs" :destroy-on-close="true">
			<div style="padding: 20px;">
				<el-form label-position="right" ref="formms" :model="miamshi" class="">
					<el-form-item prop="position"
						:rules="[{ required: true, message: '请选择面试岗位', trigger: 'blur', },]" label="面试岗位">
						<el-select v-model="miamshi.position" placeholder="请选择面试岗位" filterable clearable>
							<el-option v-for="item in jobList" :key="item.id" :label="item.ruleClassifyName"
								:value="item.ruleClassifyId" />
						</el-select>
					</el-form-item>
					<el-form-item prop="interviewDateTime"
						:rules="[{required: true,message: '请选择面试时间',trigger: 'blur',},]" label="面试时间">
						<el-date-picker style="width: 100%;" v-model="miamshi.interviewDateTime" type="datetime"
							placeholder="请选择面试时间" format="YYYY-MM-DD HH:mm" date-format="MMM DD, YYYY"
							time-format="HH:mm" />
					</el-form-item>
					<el-form-item prop="address"
						:rules="[{required: true,message: '请选择面试地点',trigger: 'blur',},]" label="面试地点">
						<el-autocomplete style="width: 100%;" v-model="miamshi.address"
							:fetch-suggestions="querySearchAsync" placeholder="请输入面试地点" @select="handleSelect" />
					</el-form-item>
					<el-form-item prop="detailedAddress" :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur', },]"
						label="详细地址">
						<el-input v-model="miamshi.detailedAddress" placeholder="请输入详细地址" clearable />
					</el-form-item>
					<el-form-item prop="hrName" :rules="[{ required: true, message: '请输入联系人名称', trigger: 'blur', },]"
						label="联系姓名">
						<el-input v-model="miamshi.hrName" placeholder="请输入联系人" clearable />
					</el-form-item>
					<el-form-item prop="hrPhone"
						:rules="[{ required: true, message: '请输入手机号', trigger: 'blur', },]" label="手机号码">
						<el-input v-model="miamshi.hrPhone" placeholder="请输入手机号" clearable />
					</el-form-item>
					<el-form-item prop="remarks" :rules="[{required: true,message: '请输入备注',trigger: 'blur',},]"
						label="面试备注">
						<el-input v-model="miamshi.remarks" placeholder="请输入备注" clearable />
					</el-form-item>
				</el-form>
			</div>


			<template #footer>
				<span class="dialog-footer flex align-center justify-end">
					<el-button @click="dialogms = false">取消</el-button>
					<el-button type="primary" @click="submitMs()">
						确认
					</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 附件列表 -->
		<AttachmentSelectDialog @closePostPush="closePostPush" @select="selectItem" v-if="showDialog" :showDialog="showDialog" />
	</div>
</template>

<script>
	import {
		ROOTPATH,
		ROOTPATH2,
		ROOTPATH3
	} from '../../../comment/httpUrl.js'
	//引入表情的json
	import emoj from './emoj.json'
	import {
		ElMessageBox,
		ElMessage,
	} from 'element-plus'
	import axios from 'axios';
	import jsonp from 'axios-jsonp'
	import AttachmentSelectDialog from '../../components/AttachmentSelectDialog/AttachmentSelectDialog.vue'
	export default {
		components: { AttachmentSelectDialog },
		data() {
			return {
				showDialog: false,
				miamshi: {
					hrPhone: '', //手机号
					hrName: '', //联系人
					position: '', //面试岗位
					interviewDateTime: '', //面试时间
					companyId: '', //公司id
					remarks: '', //面试备注
					userId: '', //面试者id
					postPushId: '', //岗位id
					province: '', //省
					city: '', //市
					county: '', //区
					lng: '', //经度
					lat: '', //纬度
					address: '', //地址
					detailedAddress: '', //详细地址
				},
				dialogms: false, //面试邀请弹窗
				webSco: null, //webscoket对象
				msgList: [], //系统消息
				userCount: 0,
				leftList: [], //左侧聊天列表
				byUserId: '', //userid
				chatConversationId: '', //聊天室id
				postPushId: '', //岗位id
				resumesId: '', //简历id
				postPushInfo: {}, //岗位信息
				resumesInfo: {}, //简历信息
				title: '',
				page: 1,
				limit: 100,
				megList: [],
				userId: '',
				isSendWx: false, //是否交换微信
				isSendPhone: false, //是否交换电话
				action: ROOTPATH + '/alioss/upload', //上传图片地址
				screenHeight: 0, //屏幕高度
				emjSrc: ROOTPATH3,
				content: '', //消息内容
				emojList: emoj.emojList, //表情
				czIndex: -1,
				czList: [{
						name: '',
						src: '/images/postimg/emij.png',
						srcS: '/images/postimg/emij_s.png',
					},
					{
						name: '',
						src: '/images/postimg/photo.png',
						srcS: '/images/postimg/photo_s.png',
					},
					{
						name: '发简历',
						src: '/images/postimg/jl.png',
						srcS: '/images/postimg/jl_s.png',
					},
					{
						name: '换电话',
						src: '/images/postimg/phone.png',
						srcS: '/images/postimg/phone_s.png',
					},
					{
						name: '换微信',
						src: '/images/postimg/weichat.png',
						srcS: '/images/postimg/weichat_s.png',
					}
				], //操作图片
				isShowEmoj: false, //是否显示表情弹窗
				liftIndex: -1,
				selectIndex: -1,
				sysMsgList: [], //系统消息
				sysPgae: 1,
				sysPages: 1,
				sysLimit: 10,
				jobList:[]
			}
		},
		computed: {
			messageCount() {
				return this.$store.state.messageCount;
			},
			userType() {
				return this.$store.state.userType;
			},
			avatar() {
				return this.$store.state.avatar;
			}
		},
		//离开页面
		beforeRouteLeave(to, from, next) {
			//关闭scoket
			if (this.webSco) {
				this.webSco.close()
				this.webSco = null
			}
			next();
		},
		mounted() {
			this.screenHeight = window.innerHeight
			this.userId = localStorage.getItem('userId')
			this.getMsgList()
			this.getweiduMsg()
			this.getChatList()
		},
		methods: {
			closePostPush(){
				this.showDialog = false
			},
			// 选择附件简历的数据
			selectItem(item){
				if(item.resumesAttachmentId){
					this.sendResumesSave(item.resumesAttachmentId);
				}
			},
			//关闭面试邀请回掉
			closeMs() {
				//清楚输入的值
				this.miamshi.detailedAddress = '';
				this.miamshi.interviewDateTime = '';
				this.miamshi.address = '';
				this.miamshi.remarks = '';
				this.miamshi.userId = '';
				this.miamshi.hrPhone = ''; //手机号
				this.miamshi.hrName = ''; //联系人
				this.miamshi.position = ''; //面试岗位
			},
			jumpToTencentMap(latitude, longitude, name) {
				var url = 'https://apis.map.qq.com/uri/v1/search?keyword=' + name + '&center=' + latitude + ',' +
					longitude + '&radius=100&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77';
				window.open(url)
			},
			formatDate(dates, type) {
				let date = new Date(dates)
				let year = date.getFullYear()
				let month = ("0" + (date.getMonth() + 1)).slice(-2)
				let day = ("0" + date.getDate()).slice(-2)
				let hour = date.getHours()
				let minute = ("0" + date.getMinutes()).slice(-2)

				// 处理 12小时制
				let ampm = hour >= 12 ? 'PM' : 'AM'
				hour = hour % 12
				hour = hour ? hour : 12 // 0点转成12
				hour = ("0" + hour).slice(-2)

				if (type == 1) {
					// 返回完整日期 + 固定时间
					return `${year}-${month}-${day} 00:00:00`
				} else {
					// 返回 12小时制时间 + AM/PM
					return `${hour}:${minute} ${ampm}`
				}
			},
			submitMs() {
				let obj = JSON.parse(JSON.stringify(this.miamshi))
				let Time = this.formatDate(obj.interviewDateTime,1);
				obj.detailTime = this.formatDate(obj.interviewDateTime,2);
				let formms = this.$refs.formms
				formms.validate((valid) => {
					if (valid) {
						if (!obj.lng || !obj.lat) {
							ElMessage({
								message: '请选择搜索出来的地址',
								type: 'info',
								duration: 1500,
								offset: this.screenHeight / 2
							})
							return
						}
						let dataInfo = {
							address:obj.address,
							companyId:obj.companyId,
							detailTime: obj.detailTime,
							detailedAddress:obj.detailedAddress,
							hrName: obj.hrName,
							hrPhone: obj.hrPhone,
							interviewDateTime: Time,
							interviewerId:obj.userId,
							lat: obj.lat,
							lng: obj.lng,
							onlineMsg:'',
							onlineType:'',
							postPushId: obj.postPushId,
							recordId:'',//发送的这份面试的id，为空，代表添加，如果有值的话代表修改
							remarks: obj.remarks,
							resumesId:this.resumesId,
							type:0
						}
						this.$Request.post("/app/interviewRecord/saveInterview", dataInfo, {
							type: 'json'
						}).then(res => {
							if (res.code == 0) {
								ElMessage({
									message: '面试邀请已发送',
									type: 'success',
									duration: 1500,
									offset: this.screenHeight / 2
								})
								this.dialogms = false
							} 
							// else {
							// 	ElMessage({
							// 		message: res.msg,
							// 		type: 'error',
							// 		duration: 1500,
							// 		offset: this.screenHeight / 2
							// 	})
							// }
						})
					}
				})
			},
			//选择地址
			handleSelect(item) {
				this.miamshi.companyId = localStorage.getItem('companyId');
				this.miamshi.userId = this.byUserId
				this.miamshi.postPushId = this.postPushId
				this.miamshi.province = item.province
				this.miamshi.city = item.city
				this.miamshi.county = item.district
				this.miamshi.lng = item.location.lng
				this.miamshi.lat = item.location.lat
			},
			//地址搜索
			querySearchAsync(queryString, cd) {
				if (!queryString) {
					cd([])
					return
				}
				let data = {
					key: "ZBABZ-ZWECU-UQTVV-4LYDR-COK3F-5SF75", //申请的密钥
					keyword: queryString, //搜索内容
					output: 'jsonp',
				};
				let url =
					"https://apis.map.qq.com/ws/place/v1/suggestion"
				axios.get(url, {
					params: data,
					adapter: jsonp
				}).then(res => {
					if (res.data.status == 0) {
						let arr = res.data.data
						arr.map(item => {
							item.value = item.title
						})
						cd(arr)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//系统消息加载更多
			handleScroll(e) {
				if (this.sysPgae < this.sysPages) {
					this.sysPgae += 1
					this.getSysMsgList(false)
				}
			},
			//获取系统通知列表
			getSysMsgList(type) {
				if (type) {
					this.sysPgae = 1
				}
				if (this.webSco) {
					this.webSco.close()
					this.webSco = null
				}
				this.liftIndex = -1
				this.loading = true
				let data = {
					page: this.sysPgae,
					limit: this.sysLimit,
					// state: 5
				}
				this.$Request.get('/app/message/selectMessageByUserId', {
					params: data
				}).then(res => {
					if (res.code === 0) {
						this.selectIndex = 1
						this.sysPages = res.data.totalPage
						if (this.sysPgae == 1) {
							this.sysMsgList = res.data.list
						} else {
							this.sysMsgList = [...this.sysMsgList, ...res.data.list]
						}
					}
				});

			},
			//初始化并链接webscoket
			initScoket() {
				//创建WebSocket对象并进行初始化连接
				this.webSco = new WebSocket(ROOTPATH2 + '' + this.userId)
				this.webSco.onopen = this.websocketonopen;
				this.webSco.onmessage = this.websocketonmessage;
				this.webSco.onerror = this.websocketonerror;
				this.webSco.onclose = this.websocketclose;
			},
			//监听接收到消息的回调
			websocketonmessage(event) {
				this.webSocketState = true
				// console.log(event, '收到消息')
				//收到消息后再获取聊天记录
				this.getCHarList()
			},
			//监听错误的回调
			websocketonerror(event) {
				//连接错误后把连接状态设为false
				this.webSocketState = false
				// console.log(event, '连接错误')
			},
			//监听链接打开的回调
			websocketonopen(event) {
				this.webSocketState = true
				// console.log(event, '连接已打开')
			},
			//监听关闭的回调
			websocketclose(event) {
				// 关闭连接后把状态设为false
				this.webSocketState = false
				// console.log(event, '连接已关闭')
			},
			//开始聊天
			startMsg(item, index) {
				this.ruleClassifyName = item.stationName;//岗位名称
				//关闭scoket
				if (this.webSco) {
					this.webSco.close()
					this.webSco = null
				}
				this.liftIndex = index

				this.czList = [{
						name: '',
						src: '/images/postimg/emij.png',
						srcS: '/images/postimg/emij_s.png',
					},
					{
						name: '',
						src: '/images/postimg/photo.png',
						srcS: '/images/postimg/photo_s.png',
					},
					{
						name: '发简历',
						src: '/images/postimg/jl.png',
						srcS: '/images/postimg/jl_s.png',
					},
					{
						name: '换电话',
						src: '/images/postimg/phone.png',
						srcS: '/images/postimg/phone_s.png',
					},
					{
						name: '换微信',
						src: '/images/postimg/weichat.png',
						srcS: '/images/postimg/weichat_s.png',
					}
				]
				this.postPushId = item.postPushId
				this.chatConversationId = item.chatConversationId
				this.getPostPushInfo()
				if (this.userType == 1) { //用户
					this.byUserId = item.focusedUserId
					this.czList[2].name = '发简历'

				} else { //招聘者
					this.byUserId = item.userId
					this.resumesId = item.resumesId
					this.czList[2].name = '求简历'

					this.czList.push({
						name: '约面试',
						src: '/images/postimg/yms.png',
						srcS: '/images/postimg/yms_.png',
					})
					this.getResumesInfo(this.resumesId)
				}

				//获取聊天记录
				this.getCHarList();
				this.getChatList();
				//获取交换状态
				this.getStatusInfo()
				this.initScoket()
				this.selectIndex = 3
			},
			//关闭弹窗
			closeDialog() {
				this.isShowEmoj = false
			},
			// 同意简历请求并发送简历
			sendResumesSave(resumesAttachmentId) {
				let that = this
				let data = {
					to: this.byUserId, //接收人的userId
					postPushId: this.postPushId, //岗位id
					resumesAttachmentId
				}
				this.$Request.post("/app/resumes/sendResumes", data).then(res => {
					if (res.code == 0) {
						ElMessage({
							message: '简历已发送',
							type: 'success',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						this.sendMessage(24)
						this.getCHarList()
						this.getStatusInfo()
					}
				})
			},
			//同意简历请求
			resumesTy() {
				ElMessageBox.confirm(
						'确定发送简历给对方？',
						'提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
						}
					)
					.then(() => {
						this.showDialog = true;
					}).catch(() => {

					})
			},
			//同意交换手机号/微信
			tongyi(messageType, chatContentId) {
				if (messageType == 6 && !this.$store.state.weChatNum) {
					ElMessageBox.confirm(
							'请点击右上角头像的个人信息完善微信号后操作',
							'提示', {
								confirmButtonText: '去完善',
								cancelButtonText: '取消',
								type: 'warning',
							}
						)
						.then(() => {

						}).catch(() => {

						})
					return
				}
				let that = this
				ElMessageBox.confirm(
						messageType == 5 ? '同意后将交换手机号，是否同意？' : '同意后将交换微信号，是否同意？',
						'提示', {
							confirmButtonText: '同意',
							cancelButtonText: '取消',
							type: 'warning',
						}
					)
					.then(() => {
						let data = {
							messageType: messageType,
							chatContentId: chatContentId
						}
						that.$Request.post("/app/chat/sendPhoneOrWx", data).then(res => {
							if (res.code == 0) {
								this.sendMessage(24)
								this.getCHarList()
								that.getStatusInfo()
							}
						})
					}).catch(() => {

					})
			},
			//请求拒绝
			refuseFun(id) {
				ElMessageBox.confirm(
						'确定拒绝吗？',
						'提示', {
							confirmButtonText: '确认',
							cancelButtonText: '取消',
							type: 'warning',
						}
					)
					.then(() => {
						let data = {
							chatContentId: id
						}
						this.$Request.get("/app/chat/refuseReqs", {
							params: data
						}).then(res => {
							if (res.code == 0) {
								ElMessage({
									message: '已拒绝',
									type: 'success',
									duration: 1500,
									offset: this.screenHeight / 2
								})
								this.sendMessage(24)
								this.getCHarList()
								this.getStatusInfo()
							} else {
								ElMessage({
									message: res.msg,
									type: 'error',
									duration: 1500,
									offset: this.screenHeight / 2
								})
							}
						})
					}).catch(() => {

					})
			},
			//发送图片
			handleAvatarSuccess(res) {
				let data = {
					userId: this.byUserId, //id
					content: res.data, //消息内容
					messageType: 2, //消息类型
					chatConversationId: this.chatConversationId //聊天室id
				}
				//把要发送的消息转换为json字符串
				data = JSON.stringify(data);
				//如果scoket是连接状态，那么就直接发送消息
				if (this.webSocketState) {
					// 发送消息
					this.webSco.send(data)
					setTimeout(() => {
						//发送消息后晴空输入框
						this.content = ''
						//获取聊天记录
						this.getCHarList()
					}, 50)
				} else { //如果不是，那么就重新连接
					this.initScoket()
				}
			},
			// 发送消息 type:1:文字 2:图片 3:语音 4:表情
			sendMessage(type, url) {
				let data = {
					userId: this.byUserId, //id
					content: this.content.replace(/\n/g, ''), //消息内容
					messageType: type, //消息类型
					chatConversationId: this.chatConversationId //聊天室id
				}
				if (type == 1 && !data.content) { //文字
					ElMessage({
						message: '请输入聊天内容',
						type: 'error',
						duration: 1500,
						offset: this.screenHeight / 2
					})
					this.content = ''
					return
				}
				if (type == 4) { //发送表情
					data.content = url
				}
				if (type == 5) { //交换手机号请求
					data.content = '手机号请求';
				}
				if (type == 6) { //交换微信号请求
					data.content = '微信号请求';
				}
				if (type == 9) { //简历请求
					data.content = '简历请求';
				}
				if (type == 24) { //刷新
					data.content = '刷新';
				}
				//把要发送的消息转换为json字符串
				data = JSON.stringify(data);
				//如果scoket是连接状态，那么就直接发送消息
				if (this.webSocketState) {
					// 发送消息
					this.webSco.send(data)
					setTimeout(() => {
						//发送消息后晴空输入框
						this.content = ''
						//获取聊天记录
						this.getCHarList()
					}, 50)
				} else { //如果不是，那么就重新连接
					this.initScoket()
				}

			},
			//发简历
			sendResumes() {
				ElMessageBox.confirm(
						'是否将简历发送给对方？',
						'提示', {
							confirmButtonText: '发送',
							cancelButtonText: '取消',
							type: 'warning',
						}
					)
					.then(() => {
						this.showDialog = true;
					}).catch(() => {

					})
			},
			//交换手机号弹窗
			currentPhone() {
				let that = this
				if (this.isSendPhone == false) {
					ElMessageBox.confirm(
							'确定后，电话交换请求将发送给对方，对方同意后将会看到彼此的手机号',
							'确定与对方交换电话吗？', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning',
							}
						)
						.then(() => {
							that.sendMessage(5)
						}).catch(() => {

						})
				} else {
					ElMessage({
						message: '已交换过手机号，请查看聊天记录',
						type: 'error',
						duration: 1500,
						offset: this.screenHeight / 2
					})
				}
			},
			//交换微信号弹窗
			currentWchat() {
				let that = this
				if (!this.$store.state.weChatNum) {
					ElMessageBox.confirm(
							'请点击右上角头像的个人信息完善微信号后操作',
							'提示', {
								confirmButtonText: '去完善',
								cancelButtonText: '取消',
								type: 'warning',
							}
						)
						.then(() => {

						}).catch(() => {

						})
					return
				}
				if (this.isSendWx == false) {
					ElMessageBox.confirm(
							'确定后，微信交换请求将发送给对方，对方同意后将会看到彼此的微信号',
							'确定与对方交换微信吗？', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning',
							}
						)
						.then(() => {
							that.sendMessage(6)
						}).catch(() => {

						})

				} else {
					ElMessage({
						message: '已交换过微信号，请查看聊天记录',
						type: 'error',
						duration: 1500,
						offset: this.screenHeight / 2
					})
				}
			},
			//求简历
			giveSendResumes() {
				ElMessageBox.confirm(
						'是否将简历请求发送给对方？',
						'确定获取对方简历吗？', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
						}
					)
					.then(() => {
						this.sendMessage(9)
					}).catch(() => {

					})
			},
			//操作
			czlist(index) {
				switch (index) {
					case 0: //显示表情
						this.isShowEmoj = true
						break;
					case 2: //发简历
						if (this.userType == 1) { //发简历
							this.sendResumes()
						} else { //求简历
							this.giveSendResumes()
						}
						break;
					case 3: //换电话
						this.currentPhone()
						break;
					case 4: //换微信
						this.currentWchat()
						break;
					case 5: //约面试
						this.dialogms = true
						break;
					default:
						break;
				}
			},
			//还原图片
			resetImageSrc(index) {
				this.czIndex = -1
			},
			//显示图片
			changeImageSrc(index) {
				this.czIndex = index
			},
			//获取交换状态
			getStatusInfo() {
				let data = {
					chatConversationId: this.chatConversationId
				}
				this.$Request.get("/app/chat/getConversationInfo", {
					params: data
				}).then(res => {
					if (res.code == 0) {
						if (res.data.isSendWx) { //是否交换微信
							this.isSendWx = true
						} else {
							this.isSendWx = false
						}
						if (res.data.isSendPhone) { //是否交换电话
							this.isSendPhone = true
						} else {
							this.isSendPhone = false
						}
					}
				})
			},
			//获取聊天记录
			getCHarList() {
				let data = {
					page: this.page,
					limit: this.limit,
					chatConversationId: this.chatConversationId,
					userId: this.userId
				}
				this.$Request.get('/app/chat/selectChatContent', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						res.data.list.map(item => {
							if (item.messageType == 18) {
								item.content = JSON.parse(item.content)
							}
						})
						this.megList = res.data.list

						this.megList.reverse();
						//等数据更新后滚动到最底下
						this.$nextTick(() => {
							this.$refs.messageBox.scrollTop = this.$refs.messageBox.scrollHeight
						})
					}
				})
			},
			//获取简历数据
			getResumesInfo(id) {
				let data = {
					userId: localStorage.getItem('userId'),
					resumesId: id,
					companyId: localStorage.getItem('companyId')
				}
				this.$Request.get("/app/resumes/selectResumesByResumesId", {
					params: data
				}).then(res => {
					if (res.code == 0) {
						res.data.intentionRuleClassifyName = this.ruleClassifyName
						res.data.intentionSalaryRange = ''
						res.data.intentionList.forEach(item => {
							if (item.ruleClassifyName == this.ruleClassifyName) {
								res.data.intentionRuleClassifyName = item.ruleClassifyName
								res.data.intentionSalaryRange = item.salaryRange
							}
						})
						this.resumesInfo = res.data
					}
				})
			},
			//获取岗位数据
			getPostPushInfo() {
				let data = {
					userId: this.userId,
					postPushId: this.postPushId
				}
				this.$Request.get("/app/postPush/selectPostPushDetails", {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.title = res.data.company.companyName
						this.postPushInfo = res.data
						// this.postPushInfo.positionWelfare = this.postPushInfo?.positionWelfare.split(',');
						// 选择的岗位列表
						this.jobList = [{
							...res.data
						}];
					}
				})
			},
			//把时间转换为月日
			getMonthOrDay(time) {
				let date = new Date(time) // 获取时间
				// var year = date.getFullYear() // 获取年
				let month = date.getMonth() + 1 // 获取月
				let strDate = date.getDate() // 获取日
				return month + '月' + strDate + '日'
			},
			getChatList() {
				let data = {
					page: 1,
					limit: 99999
				}
				this.$Request.get("/app/chat/selectChatConversationPage", {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.leftList = res.data?.list || []
					}
				});
			},
			getweiduMsg() {
				this.$Request.get("/app/chats/userCount").then(res => {
					if (res.code == 0) {
						this.userCount = res.data
					}
				});
			},
			//获取系统消息
			getMsgList() {
				this.$Request.get("/app/message/selectMessageByUserIdLimit1").then(res => {
					if (res.code == 0) {
						this.msgList = res.data.list
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	$margin-60: 120px;

	.message {
		width: 100%;
		// padding-top: 20px;
	}

	.megActive {
		background-color: #F0F0F0;
	}

	:deep(.el-textarea) {
		--el-input-focus-border: none;
		--el-input-focus-border-color: none;
	}

	:deep(.el-textarea__inner) {
		box-shadow: none !important;
	}

	:deep(.el-textarea__inner:hover) {
		box-shadow: none;

		.is-focus {
			box-shadow: none;
		}
	}

	:deep(.el-dialog) {
		border-radius: 14px !important;
	}

	:deep(.el-dialog__body) {
		padding: 0 !important;
		padding-top: 10px !important;

	}

	:deep(.el-dialog__header) {
		background: linear-gradient(45deg, #f2fffa, #FFFFFF);
		border-radius: 14px 14px 0 0;
	}

	.content {

		width: calc(100% - $margin-60 * 2);
		height: 80vh;
		margin-top: 20px;
	}

	.content-l {
		width: 30%;
		height: 80vh;
		background-color: #ffffff;
		border-radius: 14px;

		.content-l-box {
			width: 100%;
			height: calc(80vh - 40px);
			align-content: flex-start;
			overflow: hidden;
			overflow-y: scroll;
		}

		.content-l-box::-webkit-scrollbar {
			/* Chrome, Safari, Opera */
			width: 0px;
		}

		.content-l-box::-webkit-scrollbar-thumb {
			background-color: #cccccc;
			/* 滚动条颜色 */
		}

		.content-l-box::-webkit-scrollbar-track {
			background-color: #ffffff;
			/* 轨道颜色 */
		}

		.content-l-box-items:hover {
			background-color: #F0F0F0;
		}

		.content-l-box-items {
			width: calc(100% - 20px);
			height: fit-content;
			border-radius: 13px;
			margin-bottom: 10px;
		}

		.content-l-box-item {
			margin: 10px 0;
			cursor: pointer;
			padding: 0 20px;
		}

		.content-l-box-item-l {
			img {
				width: 46px;
				height: 46px;
				border-radius: 50%;
			}
		}

		.content-l-box-item-con {
			margin-left: 10px;
		}

		.content-l-box-item-con-title {
			color: #222222;
			font-size: 15px;
			font-weight: 500;

			span {
				color: #999999;
				font-size: 13px;
				font-weight: 400;
				margin-left: 5px;
			}
		}

		.content-l-box-item-con-cons {
			color: #999999;
			font-size: 13px;
			margin-top: 5px;

		}

		.content-l-box-item-r {
			width: fit-content;
			color: #999999;
			font-size: 13px;

			.content-l-box-item-r-dian {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: red;
				color: #ffffff;
			}
		}
	}

	.content-r {
		width: calc(70% - 20px);
		height: 80vh;
		background-color: #ffffff;
		border-radius: 14px;

		.content-r-tz {
			width: 90%;
			height: 90%;
			margin: auto;
			margin-top: 3%;
			overflow: hidden;
			overflow-y: scroll;
		}

		.content-r-tz::-webkit-scrollbar {
			/* Chrome, Safari, Opera */
			width: 0px;
		}

		.content-r-tz::-webkit-scrollbar-thumb {
			background-color: #cccccc;
			/* 滚动条颜色 */
		}

		.content-r-tz::-webkit-scrollbar-track {
			background-color: #ffffff;
			/* 轨道颜色 */
		}

		.content-r-tz-item {
			width: 100%;
			padding: 10px 0;
			border-bottom: 1px solid #f8f8f8;
		}

		.content-r-tz-item-title {
			color: #222222;
			font-size: 15px;
			font-weight: 500px;
		}

		.content-r-tz-item-cons {
			font-size: 13px;
			font-weight: 400;
			margin-top: 10px;
			color: #999999;
		}

		.content-r-no {
			width: 100%;
			height: 100%;
			align-content: center;

			img {
				width: 300px;
				height: 200px;
			}

			.content-r-no-txt {
				width: 100%;
				text-align: center;
				margin-top: 20px;
				font-size: 14px;
			}
		}

		.content-r-msg {
			width: 100%;
			height: 100%;
		}

		.content-r-msg-title {
			width: calc(100% - 40px);
			height: 55px;
			padding: 0 20px;
			border-bottom: 1px solid #EBEBEB;

			.content-r-msg-title-s {
				font-size: 16px;
				font-weight: 5000;
				color: #222222;
			}

			.content-r-msg-title-n {
				color: #999999;
				font-size: 14px;
				font-weight: 400;
			}

			.content-r-msg-title-p {
				color: red;
				font-size: 14px;
				font-weight: 400;
				margin-left: 10px;
			}

			.content-r-msg-title-e {
				color: #999999;
				font-size: 14px;
				font-weight: 400;
				margin-left: 10px;
			}
		}

		.content-r-msg-chat {
			width: 100%;
			height: calc(80vh - 255px);


		}

		.content-r-msg-chats {
			width: calc(100% - 40px);
			height: calc(100% - 40px);
			overflow: hidden;
			overflow-y: scroll;
		}

		.content-r-msg-chats::-webkit-scrollbar {
			/* Chrome, Safari, Opera */
			width: 0px;
		}

		.content-r-msg-chats::-webkit-scrollbar-thumb {
			background-color: #cccccc;
			/* 滚动条颜色 */
		}

		.content-r-msg-chats::-webkit-scrollbar-track {
			background-color: #ffffff;
			/* 轨道颜色 */
		}

		.message-box-item {
			width: 100%;
			margin-bottom: 20px;
		}

		.message-boxs {
			width: 100%;

			.message-boxs-avatar {
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}
		}

		.message-box-l {
			img {
				margin-right: 10px;
			}

			.message-box-l-con {
				max-width: 40%;
				padding: 10px;
				border-radius: 13px 13px 13px 0;
				background-color: #F8F8F8;
				color: #333333;
			}

			.message-box-l-phone {
				background: linear-gradient(to bottom, #D9FEED, #ffffff);
				// background-color: red;
				padding: 10px;
				border-radius: 13px 13px 13px 0;
			}

			.message-box-l-phone-btn {
				justify-content: flex-end;
				margin-top: 10px;
			}
		}

		.message-box-r {
			justify-content: flex-end;

			img {
				margin-left: 10px;
			}

			.message-box-r-con {
				max-width: 40%;
				padding: 10px;
				border-radius: 13px 13px 0 13px;
				background-color: #00DD9A;
				color: #FFFFFF;
			}
		}

		.content-r-msg-btom {
			width: 100%;
			height: 200px;
			border-top: 1px solid #E6E6E6;
		}

		.content-r-msg-btoms {
			width: calc(100% - 40px);
			height: calc(100% - 40px);
		}

		.message-btom-content {
			width: 100%;
			height: 70%;
		}

		.message-btom-btn {
			width: 100%;
			height: 30%;
		}

		.message-btom-btn-l {
			position: relative;

			.message-btom-btn-l-emj {
				width: 490px;
				height: 300px;
				background-color: #ffffff;
				border-radius: 10px 10px 10px 0;
				position: absolute;
				bottom: 30px;
				border: 1px solid #f2f5fa;
				box-shadow: 0 0 14px rgba(0, 0, 0, .11);
			}

			.message-btom-btn-l-emj-box {
				width: calc(100% - 40px);
				height: calc(100% - 40px);
				overflow: hidden;
				overflow-y: scroll;

				img {
					width: 30px;
					height: 30px;
					padding: 5px;
					cursor: pointer;
				}
			}

			.message-btom-btn-l-emj-box::-webkit-scrollbar {
				/* Chrome, Safari, Opera */
				width: 0px;
			}

			.message-btom-btn-l-emj-box::-webkit-scrollbar-thumb {
				background-color: #ffffff;
				/* 滚动条颜色 */
			}

			.message-btom-btn-l-emj-box::-webkit-scrollbar-track {
				background-color: #ffffff;
				/* 轨道颜色 */
			}

			.message-btom-btn-l-emjs {
				position: absolute;
				bottom: 22px;
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				/* 根据需要设置边框宽度 */
				border-right: 10px solid transparent;
				/* 根据需要设置边框宽度 */
				border-top: 10px solid #ffffff;
				/* 根据需要设置边框颜色 */
			}


			.message-btom-btn-l-item {
				margin-right: 15px;
				cursor: pointer;
				color: #666666;
				font-size: 14px;

				img {
					width: 20px;
					height: 20px;
					margin-right: 2px;

				}
			}

			.message-btom-btn-l-item:hover {
				color: #00DD9A;
			}

			.message-btom-btn-l-item:nth-of-type(1):hover {
				img {
					src: '/images/postimg/emij_s.png'
				}
			}


		}
	}
</style>