yizhizan-pc/src/components/messageCom/messageCom.vue

<template>
	<div class="messageCom" @click.stop="closeDialog()">
		<el-dialog :close-on-press-escape="false" :close-on-click-modal="false" width="70%" v-model="show"
			@close="closeShow" :draggable="true" destroy-on-close align-center center>
			<template #header>
				<div class="my-header flex align-center" v-if="userType==1">
					<div class="my-header-title" style="font-weight: bold;">
						{{title}}
					</div>
					<el-divider direction="vertical" />
					<div class="my-header-name">
						{{postPushInfo.stationName}}
					</div>
					<div class="my-header-price">
						{{postPushInfo.salaryRange}}
					</div>
					<div class="my-header-yq">
						{{postPushInfo.education}}
					</div>
				</div>
				<div class="my-header flex align-center" v-else>
					<div class="my-header-title" style="font-weight: bold;">
						{{resumesInfo.userName}}
					</div>
					<el-divider direction="vertical" />
					<div class="my-header-name">
						{{resumesInfo.intentionRuleClassifyName}}
					</div>
					<div class="my-header-price">
						{{resumesInfo.intentionSalaryRange}}
					</div>
					<div class="my-header-yq">
						{{ resumesInfo.resumesWorkExperience || '0' }}年
					</div>
				</div>
			</template>
			<div class="message">
				<div ref="messageBox" class="message-box">
					<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:'/default.jpg'" 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).userWx}}
								</div>
							</div>
							<!-- 交换手机号请求拒绝 -->
							<div class="message-box-r-con" v-if="item.messageType==12">
								{{item.content}}已拒绝
							</div>


							<img class="message-boxs-avatar" :src="avatar?avatar:'/default.jpg'" 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 class="message-btom flex align-center justify-center">
					<div class="messageCon">
						<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: 4, maxRows: 4 }"
								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 v-if="isShowCommon"
									class="message-btom-btn-l-emj flex align-center justify-center">
									<ul class="message-btom-btn-l-emj-box sentence-panel">
										<li class="message-text" v-for="item in changYongList" :key="item.id"
											@click="selConfirm(item.label)">{{ item.label }}</li>
									</ul>
								</div>
							</div>
							<el-button type="primary" @click="sendMessage(1)">发送</el-button>
						</div>
					</div>

				</div>
			</div>
			<el-dialog v-model="dialogms" title="面试邀请" @close="closeMs" width="30%" :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" style="padding-right: 20px;padding-bottom: 20px;">
						<el-button @click="dialogms = false">取消</el-button>
						<el-button type="primary" @click="submitMs()">
							确认
						</el-button>
					</span>
				</template>
			</el-dialog>
		</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 '../AttachmentSelectDialog/AttachmentSelectDialog.vue'
	export default {
		components: { AttachmentSelectDialog },
		props: {
			// 显示弹窗
			showMeg: {
				type: Boolean,
				default: false
			},
			byUserId: {
				type: Number,
				default: -1
			},
			//聊天室id
			chatConversationId: {
				type: Number,
				default: -1
			},
			//岗位id
			postPushId: {
				type: Number,
				default: -1
			},
			//简历id
			resumesId: {
				type: Number,
				default: -1
			},
			//聊天类型：1用户 2企业
			userType: {
				type: Number,
				default: 1
			}
		},
		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, //面试邀请弹窗
				isSendWx: false, //是否交换微信
				isSendPhone: false, //是否交换电话
				action: ROOTPATH + '/alioss/upload', //上传图片地址
				screenHeight: 0, //屏幕高度
				emjSrc: ROOTPATH3,
				isShowEmoj: false, //是否显示表情弹窗
				show: false,
				webSco: null,
				webSocketState: false, //scoket是否连接状态
				userId: '',
				page: 1,
				limit: 100,
				title: '',
				postPushInfo: {}, //岗位信息
				resumesInfo: {}, //简历信息
				megList: [], //聊天消息
				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/cyy.png',
						srcS: '/images/postimg/cyy_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',
					}
				], //操作图片
				jobList: [],
				isShowCommon: false, //是否显示常用语
				changYongList: []
			}
		},
		computed: {
			//获取我的头像
			avatar() {
				return this.$store.state.avatar;
			},
		},
		mounted() {
			this.screenHeight = window.innerHeight
			this.userId = localStorage.getItem('userId')
			this.show = this.showMeg
			if (this.chatConversationId) {
				//获取聊天记录
				this.getCHarList();
			}
			if (this.userType == 1) {
				this.czList[3].name = '发简历'
				//获取岗位信息
				this.getPostPushInfo(this.postPushId)
			} else {
				this.czList[3].name = '求简历'
				this.czList.push({
					name: '约面试',
					src: '/images/postimg/yms.png',
					srcS: '/images/postimg/yms_.png',
				})
				this.getPostPushInfo(this.postPushId)
			}
			//建立webscoket连接
			this.initScoket()
			this.getStatusInfo();
			setTimeout(() => {
				this.getChangYong();
			}, 1000);
		},
		methods: {
			getChangYong() {
				let state = 0
				if (this.userType == 1) {
					state = 70
				} else {
					state = 80
				}
				this.$Request.get(`/app/message/selectMessageByType?page=1&limit=100&state=${state}`)
					.then(res => {
						if (res.code == 0) {
							this.changYongList = [{ label: '你好啊，可以聊一聊~', id: 0 }];
							res.data.list.forEach(d => {
								let data = {
									label: d.content,
									id: d.id
								}
								this.changYongList.push(data);
							});
						}
					});
			},
			selConfirm(val) {
				this.content = val;
				this.isShowCommon = false;
			},
			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)
				})
			},
			//获取简历数据
			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.postPushInfo.ruleClassifyName
						res.data.intentionSalaryRange = this.postPushInfo.salaryRange
						// res.data.intentionExprence = []
						res.data.intentionList.forEach(item=>{
							if (item.ruleClassifyName == this.postPushInfo.ruleClassifyName) {
								res.data.intentionRuleClassifyName = item.ruleClassifyName
								res.data.intentionSalaryRange = item.salaryRange
								// res.data.intentionExprence = item.industry && item.industry.split('/') || []
							}
						})
						this.resumesInfo = res.data
					
					}
				})
			},
			// 同意简历请求并发送简历
			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() {
				let that = this
				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: //显示常用语
						this.isShowCommon = true
						break;
					case 3:
						if (this.userType == 1) { //发简历
							this.sendResumes()
						} else { //求简历
							this.giveSendResumes()
						}

						break;
					case 4: //换电话
						this.currentPhone()
						break;
					case 5: //换微信
						this.currentWchat()
						break;
					case 6: //约面试
						this.openDialog();
						break;
					default:
						break;
				}
			},
			// 赋值地址和联系人数据
			openDialog() {
				const addressInfo = localStorage.getItem('companyAddressInfo')
					? JSON.parse(localStorage.getItem('companyAddressInfo'))
					: {};
				this.miamshi = {
					hrPhone: this.$store.state.phone || '',
					hrName: this.$store.state.nickName || '',
					position: '',
					interviewDateTime: '',
					companyId: localStorage.getItem('companyId') || '',
					remarks: '',
					userId: this.byUserId || '',
					postPushId: this.postPushId || '',
					province: addressInfo.province || '',
					city: addressInfo.city || '',
					county: addressInfo.county || '',
					lng: addressInfo.lng || '',
					lat: addressInfo.lat || '',
					address: addressInfo.address || '',
					detailedAddress: addressInfo.detailedAddress || '',
				}
				this.dialogms = true;
			},
			//获取交换状态
			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
						}
					}
				})
			},
			//关闭弹窗
			closeDialog() {
				this.isShowEmoj = false
				this.isShowCommon = false
			},
			//还原图片
			resetImageSrc(index) {
				this.czIndex = -1
			},
			//显示图片
			changeImageSrc(index) {
				this.czIndex = index
			},
			//获取岗位数据
			getPostPushInfo(id) {
				let data = {
					userId: this.userId,
					postPushId: id
				}
				this.$Request.get("/app/postPush/selectPostPushDetails", {
					params: data
				}).then(res => {
					if (res.code == 0) {
						// 选择的岗位列表
						this.jobList = [{
							...res.data
						}];
						this.title = res.data.company.companyName
						this.postPushInfo = res.data
						// this.postPushInfo.positionWelfare = this.postPushInfo.positionWelfare && this.postPushInfo.positionWelfare.split(',') || []
						if(this.userType != 1){
							//获取简历信息
							this.getResumesInfo(this.resumesId)
						}
					}
				})
			},
			//获取聊天记录
			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
						})
					}
				})
			},
			//初始化并链接webscoket
			initScoket() {
				this.webSco = this.$socket.getSocket();
				// 如果 WebSocket 已经连接，直接把状态标记为 true
				if (this.webSco.readyState === WebSocket.OPEN) {
					this.webSocketState = true
					// console.log('✅ WebSocket 已经连接，状态直接标记为 true')
				} else {
					// 还未连接，绑定 onopen
					this.webSco.onopen = this.websocketonopen.bind(this)
				}
				// 绑定其他回调
				this.webSco.onmessage = this.websocketonmessage.bind(this)
				this.webSco.onerror = this.websocketonerror.bind(this)
				this.webSco.onclose = this.websocketclose.bind(this)
			},
			//监听接收到消息的回调
			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, '连接已关闭')
			},
			//关闭弹窗的回调
			closeShow() {
				if (this.webSco) {
					this.webSco.close()
				}
				//给父组件传递值关闭该组件
				this.show = false
				this.$emit('closeMeg', this.show)
			},
		}
	}
</script>

<style lang="scss" scoped>
	: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;
	}

	.messageCom {
		.el-textarea {
			--el-input-focus-border: none;
			--el-input-focus-border-color: none;
		}

		.el-textarea__inner {
			box-shadow: none;
		}

		.el-textarea__inner:hover {
			box-shadow: none;

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


	}

	.my-header-name {

		font-weight: bold;
		font-size: 14px;
	}

	.my-header-price {
		margin: 0 10px;
		color: red;
		font-size: 14px;
		font-weight: bold;
	}

	.my-header-yq {
		color: #999999;
		font-size: 14px;
		// font-weight: bold;
	}

	.message {
		width: 100%;
		height: 600px;

		.message-box {
			width: calc(100% - 40px);
			height: 70%;
			overflow: hidden;
			overflow-y: scroll;
			padding: 0 20px;
		}

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

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

		.message-box::-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;
			}
		}

		.message-btom {
			width: 100%;
			height: 30%;
			border-top: 1px solid #E6E6E6;

			.messageCon {
				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'
					}
				}
			}
		}
	}
	.sentence-panel {
		margin: 0 !important;
		padding: 0 !important;
	}

	.message-text {
		height: 34px;
		line-height: 34px;
		border-radius: 4px;
		z-index: 1;
		overflow: hidden;
		cursor: pointer;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 0 12px 0 24px;
		font-size: 13px;
		font-weight: 400;
		color: #333;
		border: none;
		position: relative;
	}

	.message-text:hover {
		background-color: #f8f8f8;
	}

	.message-text:before {
		content: "";
		position: absolute;
		top: 14px;
		left: 10px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #d9d9d9;
	}
</style>