yizhizan-pc/src/views/message/index.vue

<template>
	<div class="message flex align-center justify-center" @click.stop="closeDialog()">
		<!-- 消息主体 -->
		<div class="content flex align-center justify-between">
			<!-- 左侧聊天列表 -->
            <div class="content-l">
                <div class="tabs">
                    <el-tabs v-model="activeName" @tab-click="handleTabClick">
                        <el-tab-pane label="全部" name="all"></el-tab-pane>
                        <el-tab-pane label="已读" name="read"></el-tab-pane>
                        <el-tab-pane label="未读" name="unread"></el-tab-pane>
                        <el-tab-pane label="沟通过" name="communicated"></el-tab-pane>
                        <el-tab-pane label="已邀约" name="invited"></el-tab-pane>
                        <el-tab-pane label="面试过" name="interviewed"></el-tab-pane>
                    </el-tabs>
				</div>
				<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">
								<div style="position: relative;">
									<img :src="item.avatar ? item.avatar : '/default.jpg'" alt="" srcset="" />
									<div v-if="item.contentCount > 0" class="contentCount">{{ item.contentCount }}</div>
								</div>
								<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 == 10" class="content-l-box-item-con-cons">
										简历已发送
									</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-if="item.messageType == 2" class="content-l-box-item-con-cons">
										[图片]
									</div>

									<div v-else-if="item.messageType == 3" class="content-l-box-item-con-cons">
										[语音]
									</div>

									<div v-else-if="item.messageType == 7" class="content-l-box-item-con-cons">
										[交换手机]
									</div>

									<div v-else-if="item.messageType == 8" class="content-l-box-item-con-cons">
										[交换微信]
									</div>

									<div v-else-if="item.messageType == 12" class="content-l-box-item-con-cons">
										{{ item.content }}已拒绝
									</div>

									<div v-else-if="item.messageType == 4" class="content-l-box-item-con-cons">
										<img v-if="item.content && item.messageType === 4" :src="emjSrc + item.content"
											style="height: 20px; width: 20px;" alt="icon" />
									</div>

									<div v-else-if="item.messageType == 20" class="content-l-box-item-con-cons">
										[视频通话]
									</div>

									<div v-else-if="item.messageType == 21" class="content-l-box-item-con-cons">
										[语音通话]
									</div>

									<div v-else-if="item.messageType == 99" class="content-l-box-item-con-cons">
										[面试邀约]
									</div>

									<div v-else-if="item.messageType == 98" class="content-l-box-item-con-cons">
										[{{ item.content }}]
									</div>

									<div v-else-if="item.messageType == 96 || item.messageType == 97"
										class="content-l-box-item-con-cons">
										[{{ item.content }}]
									</div>

									<div v-else class="content-l-box-item-con-cons">
										[其他消息类型]
									</div>
								</div>
							</div>
							<div class="content-l-box-item-r" style="flex-shrink: 0;">
								{{item.messageTime? getDateDiff(item.messageTime):''}}
								<div class="flex justify-end delete-btn" style="margin-top: 5px;" @click.stop="deleteMsg(item)">
									删除
								</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.ruleClassifyName">
							{{ postPushInfo.ruleClassifyName }}
						</div>
						<div class="content-r-msg-title-p" v-if="postPushInfo.salaryRange">
							{{postPushInfo.salaryRange}}
						</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>
					</view>
					<!-- 聊天记录 -->
					<div class="content-r-msg-chat flex align-center justify-center">
						<div ref="messageBox" class="content-r-msg-chats">
							<!-- 岗位简介 -->
							<div class="resume-box" v-if="JSON.stringify(postPushInfo) != '{}' && userType == 1" @click.stop="handleClick(postPushInfo.postPushId)">
								<div class="position-title">{{ postPushInfo.ruleClassifyName || '暂无岗位' }}
									<span class="position-num">{{ postPushInfo.salaryRange }}</span>
								</div>
								<div class="company-text">{{ title }}  {{ postPushInfo.company ? postPushInfo.company.companyPeople : '0人' }}</div>
								<div class="resume-label information flex flex-wrap">
									<el-tag type="info">{{ postPushInfo.education }}</el-tag>
									<el-tag type="info">{{ postPushInfo.experience }}</el-tag>
									<el-tag type="info" v-if="postPushInfo.company">{{ postPushInfo.company.workRestTime }}</el-tag>
									<el-tag type="info" v-for="(item, index) in postPushInfo.welfareTag ? postPushInfo.welfareTag.split(';') : []"
										:key="index">{{ item }}</el-tag>
								</div>
								<template v-if="isHtmlContent">
									<div :class="['position-content', !isJobDescExpanded ? 'position-content-itemAll' : '']" v-html="postPushInfo.positionDetails"></div>
								</template>
								<template v-else>
									<div :class="['position-content', !isJobDescExpanded ? 'position-content-itemAll' : '']">{{ postPushInfo.positionDetails }}</div>
								</template>
								<div class="expand-more" @click.stop="isJobDescExpanded = !isJobDescExpanded">{{ isJobDescExpanded ? '收起' : '展开更多' }}</div>
								<!-- hr信息 -->
								<div class="flex align-center personnel">
									<img class="resume-avatar"  :src="postPushInfo.hr && postPushInfo.hr.hrImg ? postPushInfo.hr.hrImg : '/default.jpg'" alt="" style="width: 35px;height: 35px;">
									<div>{{ postPushInfo.user && postPushInfo.user.userName ? postPushInfo.user.userName : '未知' }}·{{ postPushInfo.hr && postPushInfo.hr.hrPosition || '创始人' }}</div>
								</div>
								<div class="resume-time resume-label">{{ conversationInfo.createTime && conversationInfo.createTime }}向你发起沟通</div>
							</div>
							<!-- 简历简介  -->
							<div class="resume-box" v-if="JSON.stringify(resumesInfo) != '{}' && userType == 2" @click="goToPage">
								<div class="flex align-center">
									<img class="resume-avatar" :src="resumesInfo && resumesInfo.avatar || '/default.jpg'" alt="" />
									<div class="flex flex-direction justify-between" style="gap: 5px;">
										<div>期望：{{ resumesInfo.intentionRuleClassifyName }}
											<span class="text-color">{{ resumesInfo.intentionSalaryRange }}</span>
										</div>
										<div class="resume-label flex">
											<span>{{ resumesInfo.resumesWorkExperience || 0 }}年</span>
											<span>{{ postPushInfo.education }}</span>
											<span>{{ postPushInfo.salaryRange }}</span>
											<span>{{ resumesStatusMap[resumesInfo.resumesStatus] || '未知' }}</span>
										</div>
									</div>
								</div>
								<div class="resume-label information">{{
									resumesInfo.resumesListDtoList && resumesInfo.resumesListDtoList.companyName || '' }}·{{
										resumesInfo.resumesListDtoList && resumesInfo.resumesListDtoList.lastWorkPosition || ''
									}}</div>
								<div class="resume-label information">{{
									resumesInfo.resumesListDtoList && resumesInfo.resumesListDtoList.school || '' }}·{{
										resumesInfo.resumesListDtoList && resumesInfo.resumesListDtoList.profession || '' }}
								</div>
								<div class="resume-tag flex flex-wrap">
									<el-tag type="info" v-for="(skill, skillIndex) in resumesInfo.resumesListDtoList && resumesInfo.resumesListDtoList.intentIndustry && resumesInfo.resumesListDtoList.intentIndustry.split('/') || []"
										:key="skillIndex">{{ skill }}</el-tag>
								</div>
								<div class="information resume-content">{{ resumesInfo.adv }}</div>
								<div class="resume-time resume-label flex">
									<span>{{ conversationInfo.createTime && conversationInfo.createTime }}</span>
									<span>沟通的职位-{{ resumesInfo.intentionRuleClassifyName }}</span>
								</div>
							</div>
							<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'" @click="goToPageDetail"
										alt="" />
									<div class="message-box-l-con" v-if="item.messageType==1">
										{{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 class="message-box-l-con inv-style" v-if="item.content && item.messageType === 10">
										<template v-if="item.userType == 1">
											<view class="flex align-center" @click="previewResume(item.content)">
												点击预览附件简历</view>
										</template>
										<template v-else>{{ item.content }}</template>
									 </div>
									<div class="message-box-l-con inv-style" v-if="item.content && item.messageType === 99">您收到了{{ item.content }}</div>
									<!-- 面试拒绝或同意 -->
									<div class="message-box-l-con inv-style" v-if="item.content && (item.messageType === 96 || item.messageType === 97)">{{ item.content }}</div>
									<div
										style="width: 100%;color: #999999;font-size: 12px;padding-left: 50px;margin-top: 4px;">
										{{ getDateDiff(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.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>
									<!-- 简历预览 -->
									<div class="message-box-r-con invitation" v-if="item.content && item.messageType === 10">
										<template v-if="item.userType == 1">
											<view class="flex align-center" @click="previewResume(item.content)">点击预览附件简历</view>
										</template>
										<template v-else>{{ item.content }}</template>
									</div>
									<!-- 面试邀约消息 -->
									<div class="message-box-r-con invitation" v-if="item.content && item.messageType === 99">您发送了{{ item.content }}</div>
									<!-- 面试拒绝或同意 -->
									<div class="message-box-r-con invitation"
										v-if="item.content && (item.messageType === 96 || item.messageType === 97)">{{
											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;">
										{{getDateDiff(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" 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 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>
				<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>
		<!-- 简历预览弹窗 -->
		<el-dialog v-model="showResumeDialog" title="简历预览" width="80%" top="5vh" :close-on-click-modal="false">
			<!-- 文件预览 -->
			<div class="preview-box">
				<iframe :src="previewUrl" style="width:100%;height:80vh;border:none;"></iframe>
			</div>
			<template #footer>
				<el-button @click="showResumeDialog = false">关闭</el-button>
				<el-button type="primary" @click="downloadResume">下载简历</el-button>
			</template>
		</el-dialog>
		<!-- 面试邀约弹窗 -->
		<el-dialog v-model="showBtn" title="面试邀约" width="15%" :close-on-click-modal="false">
			<div class="avatorm flex justify-center">
				<div class="avatorm-box flex justify-center">
					<!-- 用户头像 -->
					<template v-if="recordInfo.userEntity && recordInfo.userEntity.avatar">
						<img :src="recordInfo.userEntity.avatar" class="avatar-img" alt="">
					</template>
					<template v-else>
						<img src="/default.jpg" class="avatar-img" alt="">
					</template>

					<!-- HR头像 -->
					<template v-if="recordInfo.hr && recordInfo.hr.hrImg">
						<img :src="recordInfo.hr.hrImg" class="avatar-img" alt="">
					</template>
					<template v-else>
						<img src="/default.jpg" class="avatar-img" alt="">
					</template>
				</div>
			</div>
			<div class="avatorm flex justify-center" style="margin-top: 10px;">
				<div class="avatorm-box">
					<div class="avatorm-box-item flex">
						<div class="avatorm-box-item-t">面试岗位：</div>
						<div class="avatorm-box-item-r">{{ recordInfo.postPush ? recordInfo.postPush.ruleClassifyName : '未知'
							}}</div>
					</div>

					<div class="avatorm-box-item flex" v-if="recordInfo">
						<div class="avatorm-box-item-t">面试时间：</div>
						<div class="avatorm-box-item-r">
							{{ recordInfo.interviewDateTime && recordInfo.interviewDateTime.substring(0, 10) || '' }}
							{{ recordInfo.detailTime }}
						</div>
					</div>

					<div class="avatorm-box-item flex map-item">
						<div class="avatorm-box-item-t">面试地点：</div>
						<div class="avatorm-box-item-r">
							{{ recordInfo.detailedAddress }}
							<i class="iconfont icon-map" style="color: #016BF6; margin-left: 5px;"></i>
						</div>
					</div>

					<div class="avatorm-box-item flex">
						<div class="avatorm-box-item-t">面试备注：</div>
						<div class="avatorm-box-item-r">
							{{ recordInfo.remarks ? recordInfo.remarks : '暂无' }}
						</div>
					</div>
				</div>
			</div>
			<div class="avatorm flex justify-center" v-if="recordInfo.company">
				<div class="avatorm-box flex justify-center" style="margin-top: 10px;margin-bottom: 20px;">
					来自 {{ recordInfo.company.companyAllName || recordInfo.company.companyName }} 的面试邀请，是否接受？
				</div>
			</div>
			<template #footer>
				<el-button @click="coleInterView(2)">拒绝</el-button>
				<el-button type="primary" @click="coleInterView(1)">同意</el-button>
			</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 {
				showResumeDialog:false,
				previewUrl:'',
				currentFileUrl:'',
				isJobDescExpanded: false,
				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/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',
					}
				], //操作图片
				isShowEmoj: false, //是否显示表情弹窗
				liftIndex: -1,
				selectIndex: -1,
				sysMsgList: [], //系统消息
				sysPgae: 1,
				sysPages: 1,
				sysLimit: 10,
				jobList:[],
				isShowCommon:false, //是否显示常用语
				changYongList:[],
				webSocketState: false,
				conversationInfo: {},
				resumesStatusMap: {
					0: '离职-随时到岗',
					1: '在职-月内到岗',
					2: '在职-考虑机会',
					3: '在职-暂不考虑',
					4:'实习'
				},
				activeName: 'all',
				recordInfo:{},//面试邀请信息
				showBtn:false,
				recordsInter: '',
				time:null
			}
		},
		computed: {
			messageCount() {
				return this.$store.state.messageCount;
			},
			userType() {
				return this.$store.state.userType;
			},
			avatar() {
				return this.$store.state.avatar;
			},
			isHtmlContent() {
				const str = this.postPushInfo?.positionDetails || '';
				return /<[^>]+>/.test(str);
			}
		},
		beforeUnmount() {
			clearInterval(this.recordsInter)
			this.recordsInter = null
			clearInterval(this.time)
			this.time = null
		},
		mounted() {
			this.screenHeight = window.innerHeight
			this.userId = localStorage.getItem('userId')
			this.getMsgList()
			this.getweiduMsg()
			// 获取左侧列表
			this.time = setInterval(() => {
				this.getChatList();
			}, 3000)
		},
		methods: {
			//拒绝或者接受面试邀请
			coleInterView(type) {
				ElMessageBox.alert(type == 2 ? '确认拒绝该面试邀请吗？' : '确定接受该面试邀请', '提示', {
					confirmButtonText: '确认',
					showCancelButton: true,
					callback: (res) => {
						if (res == 'confirm') { //确认
							let data = {
								recordId: this.recordInfo.recordId,
								type: type
							}
							this.$Request.get('/app/interviewRecord/userUpdateInter', {
								params: data
							}).then(res => {
								if (res.code == 0) {
									ElMessage({
										message: type == 1 ? '已接受' : '已拒绝',
										type: type == 1 ? 'success' : 'error',
										duration: 1500,
										offset: this.screenHeight / 2
									})
									if (type == 1) {
										this.sendMessage(97, res.data)
									} else {
										this.sendMessage(96, res.data)
									}
									this.getCHarList()
									this.getStatusInfo()
								}
							})
						}
					}
				})
			},
			previewResume(attachmentAddress){
				const isFileLink = /^https?:\/\/.+\.(pdf|doc|docx|xls|xlsx)$/i.test(attachmentAddress);
				if (!isFileLink) {
					ElMessage({
						message: '该简历无法预览',
						type: 'warning',
						duration: 1500,
						offset: this.screenHeight / 2
					})
					return;
				}
				window.open(attachmentAddress, '_blank');
				// this.showResumeDialog = true;
				this.currentFileUrl = attachmentAddress;
			},
			// 下载简历
			downloadResume() {
				if (!this.currentFileUrl) return;
				window.open(this.currentFileUrl, '_blank');
			},
			goToPageDetail(){
				if (this.userType == 1) {
					this.handleClick(this.postPushInfo.postPushId)
				} else {
					this.goToPage()
				}
			},
			handleTabClick(tab) {
				this.activeName = tab.props.name
			},
			deleteMsg(item){
				ElMessageBox.confirm(
					'确定删除这条消息？',
					'温馨提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				})
				.then(() => {
					this.$Request.get(`/app/chat/deleteConversation?chatConversationId=${item.chatConversationId}`).then(res => {
						if (res.code == 0) {
							ElMessage({
								message: res.msg || '删除成功',
								type: 'success',
								duration: 1500,
								offset: this.screenHeight / 2
							})
							this.getChatList()
						} 
					});
				})
			},
			getDateDiff(data) {
				// 兼容字符串或时间戳
				let timePublish;
				if (typeof data === 'string') {
					// PC 浏览器可以正常识别 "2026-01-05 18:46:39"
					timePublish = new Date(data.replace(/-/g, '/')); // 保留这步以防某些老浏览器异常
				} else if (typeof data === 'number') {
					timePublish = new Date(data);
				} else {
					timePublish = data instanceof Date ? data : new Date();
				}

				if (isNaN(timePublish.getTime())) return '';

				const timeNow = new Date();

				const publishYear = timePublish.getFullYear();
				const publishMonth = timePublish.getMonth() + 1;
				const publishDate = timePublish.getDate();
				const publishHour = timePublish.getHours().toString().padStart(2, '0');
				const publishMinute = timePublish.getMinutes().toString().padStart(2, '0');

				// 计算两个日期的“自然日”差值
				const nowZero = new Date(timeNow.getFullYear(), timeNow.getMonth(), timeNow.getDate());
				const publishZero = new Date(publishYear, timePublish.getMonth(), publishDate);
				const diffDays = Math.floor((nowZero - publishZero) / (1000 * 60 * 60 * 24));

				const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				const weekStr = weekDays[timePublish.getDay()];
				const sameYear = publishYear === timeNow.getFullYear();

				let result = '';

				if (diffDays === 0) {
					// 今天
					result = `${publishHour}:${publishMinute}`;
				} else if (diffDays === 1) {
					// 昨天
					result = `昨天 ${publishHour}:${publishMinute}`;
				} else if (diffDays < 7) {
					// 一周内
					result = `${weekStr} ${publishHour}:${publishMinute}`;
				} else if (sameYear) {
					// 同一年
					result = `${publishMonth}月${publishDate}日 ${publishHour}:${publishMinute}`;
				} else {
					// 跨年
					result = `${publishYear}年${publishMonth}月${publishDate}日 ${publishHour}:${publishMinute}`;
				}

				return result;
			},
			goToPage(){
				if (localStorage.getItem('token')) {
					const routeUrl = this.$router.resolve({
						name: 'resumeInfo',
						query: {
							resumesId: this.resumesId,
							postPushId: this.postPushId,
							ruleClassifyId: this.postPushInfo?.ruleClassifyId || '',
						}
					});
					window.open(routeUrl.href, '_blank');
				} else {
					this.$router.push({
						name: 'login'
					})
				}
			},
			handleClick(postPushId){
				if (localStorage.getItem('token')) {
					const routeUrl = this.$router.resolve({
						name: 'postInfo',
						query: {
							postPushId: postPushId
						}
					});
					window.open(routeUrl.href, '_blank');
				} else {
					this.$router.push({
						name: 'login'
					})
				}
			},
			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) {
							console.log(res.data.list)
							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.sendMessage(99)
								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
				}
				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]
						}
					}
				});
			},
			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, '连接已关闭')
			},
			//开始聊天
			startMsg(item, index) {
				this.ruleClassifyName = item.stationName;//岗位名称
				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/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',
					}
				]
				this.postPushId = item.postPushId
				this.chatConversationId = item.chatConversationId
				this.getPostPushInfo()
				if (this.userType == 1) { //用户
					this.byUserId = item.focusedUserId
					this.czList[3].name = '发简历'
					// 获取用户是否有面试记录
					this.recordsInter = setInterval(() => {
						this.getInterviewList()
					}, 2500)
				} else { //招聘者
					this.byUserId = item.userId
					this.resumesId = item.resumesId
					this.czList[3].name = '求简历'

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

				//获取聊天记录
				this.getCHarList();
				//获取交换状态
				this.getStatusInfo()
				this.selectIndex = 3
			},
			//关闭弹窗
			closeDialog() {
				this.isShowEmoj = false
				this.isShowCommon = false
			},
			// 获取用户是否有面试记录
			getInterviewList() {
				let data = {
					status: 1,
					postPushId: this.postPushId
				}
				this.$Request.get("/app/interviewRecord/interviewList", {params: data }).then(res => {
					if (res.code == 0) {
						if ((res.data.records).length > 0) {
							this.recordInfo = res.data.records[0]
							this.showBtn = true;
						}else{
							this.recordInfo = {}
							this.showBtn = 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()
					}, 100)
				} 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 = '刷新';
				}
				if (type == 96) { //拒绝面试邀约
					data.content = '已拒绝面试邀请';
					data.recordId = url
				}
				if (type == 97) { //同意面试邀约
					data.content = '已接受面试邀请';
					data.recordId = url
				}
				if(type == 99){ //面试邀约
					data.content = '一份面试邀约';
				}
				//把要发送的消息转换为json字符串
				data = JSON.stringify(data);
				//如果scoket是连接状态，那么就直接发送消息
				if (this.webSocketState) {
					// 发送消息
					this.webSco.send(data)
					setTimeout(() => {
						//发送消息后晴空输入框
						this.content = ''
						//获取聊天记录
						this.getCHarList()
					}, 100)
				} 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: //显示常用语
						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() {
				this.miamshi = {
					hrPhone: this.$store.state.phone || '',
					hrName: this.$store.state.nickName || '',
					position: this.jobList[0].ruleClassifyId,
					interviewDateTime: '',
					companyId: localStorage.getItem('companyId') || '',
					remarks: '',
					userId: this.byUserId || '',
					postPushId: this.postPushId || '',
					province: this.jobList[0].province || '',
					city: this.jobList[0].city || '',
					county: this.jobList[0].county || '',
					lng: this.jobList[0].lng || '',
					lat: this.jobList[0].lat || '',
					address: this.jobList[0]?.address.split(' ')[0] || '',
					detailedAddress: this.jobList[0]?.address.split(' ')[1] || '',
				}
				this.dialogms = true;
			},
			//还原图片
			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) {
						this.conversationInfo = res.data
						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
						}];
					}
				})
			},
			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;
        .tabs {
            padding: 20px;
            padding-bottom: 0;
        }
		.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;
				cursor: pointer;
			}

			.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: #00DD9A;
				color: #FFFFFF;
				cursor: pointer;
			}
			.invitation{
				background: linear-gradient(rgb(217, 254, 237), rgb(255, 255, 255));
				border: 0.5px solid rgb(198, 254, 231);
				color: #000;
			}
		}
		.inv-style{
			background: linear-gradient(rgb(217, 254, 237), rgb(255, 255, 255));
				border: 0.5px solid rgb(198, 254, 231);
				color: #000;
		}

		.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'
				}
			}


		}
	}
	.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;
	}
	.resume-box{
		margin-bottom: 20px;
		background-color: #F0F0F0;
		border-radius: 8px;
		padding: 15px;
		cursor: pointer;
		.resume-avatar{
			width: 46px;
			height: 46px;
			border-radius: 50%;
			margin-right: 10px;
		}
		.text-color{
			color: #016BF6;
			font-size: 14px;
			margin-left: 5px;
		}
		.resume-label{
			color: #9ca4ab;
			font-size: 14px;
			gap: 10px;
		}
		.information{
			margin: 10px 0;
		}
		.resume-tag{
			gap:6px;
		}
		.resume-content{
			color: #616e7c;
			font-size: 14px;
		}
		.resume-time{
			border-top: 1px solid #e9e3e3;
			padding-top: 5px;
		}
		.position-title{
			font-size: 20px;
			font-weight: 500;
		}
		.position-num{
			color: #016bf6;
			font-size: 16px;
			margin-left: 10px;
		}
		.company-text{
			color: #9ca4ab;
			margin-top: 5px;
		}
		.position-content{
			color: #999999;
			font-size: 14px;
			white-space: pre-wrap;
		}
		.position-content-itemAll{
			display: -webkit-box;
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.expand-more{
			color: #007AFF;
			font-size: 14px;
			cursor: pointer;
			margin-top: 10px;
		}
		.personnel{
			margin: 10px 0;
			font-size: 14px;
			color: #1A1A1A;
		}
	}
	.delete-btn{
		display: none;
	}
	.content-l-box-item:hover .delete-btn {
		display: flex;
	}
	.contentCount{
		height: 18px;
		border-radius: 10px;
		background-color: #f56c6c;
		color: #FFF;
		text-align: center;
		position: absolute;
		top: 0;
		right: -5px;
		font-size: 12px;
		display: inline-flex;
		justify-content: center;
		padding: 0 6px;
	}
	.avatar-img{
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
	.avatorm-box-item{
		line-height: 30px;
	}
</style>