<div class="xycms-im d-print-none" id="IM" v-if="IMServer.key && IMServer.token && userInfo.id">
    <el-tooltip effect="dark" content="消息" placement="left">
		<div class="el-backtop" style="right: 40px;bottom: 220px;" @click="openImWin">
	    	<el-badge :value="unread_count" :max="99" type="primary" :hidden="unread_count<=0">
				<i class="el-icon-chat-dot-round"></i>
			</el-badge>
		</div>
    </el-tooltip>
	<div class="im-win flex" style="display: none;" v-show="win" :class="{'full-screen':is_full_screen}" @click="showEmotion=false;setting.show=false;" @mouseover="addBodyStyle(true)" @mouseleave="addBodyStyle(false)" ref="IMWIN">
		<div class="im-contacts wrap">
			<div class="flex flex-center im-win-title">
				<el-badge is-dot :type="is_online?'success':'info'">
					<el-avatar shape="square" :src="userInfo.headimg" size="small"></el-avatar>
				</el-badge>
				<div class="flex-1 im-win-title-nickname">{{userInfo.nickname}}</div>
				<div class="im-setting-body">
					<i class="el-icon-setting" @click.stop="setting.show= !setting.show"></i>
					<div class="im-setting" v-if="setting.show">
						<div class="flex flex-center im-setting-item" @click="settingItem('is_enter_send',1);">
							<div class="icon" :class="{'is_active':setting.is_enter_send}">
								<i class="el-icon-check"></i>
							</div>
							<div class="text">按Enter键发送消息</div>
						</div>
						<div class="flex flex-center im-setting-item" @click="settingItem('is_enter_send',0);">
							<div class="icon" :class="{'is_active':!setting.is_enter_send}">
								<i class="el-icon-check"></i>
							</div>
							<div class="text">按Ctrl+Enter键发送消息</div>
						</div>
					</div>
				</div>
			</div>
			<div class="im-contacts-list flex1">
				<div class="flex im-contacts-item flex-center" v-for="(v,index) in contacts" :class="{'is_active':toUser.id===v.id}" @click="setGetHistoryMsg(v,index)">
					<el-badge is-dot :type="v.is_online?'success':'info'">
						<el-avatar shape="square" :src="v.to_headimg" v-if="v.uid===userInfo.id"></el-avatar>
						<el-avatar shape="square" :src="v.headimg" v-else></el-avatar>
					</el-badge>
					<div class="flex-1 im-contacts-msg-body">
						<div class="flex">
							<div class="im-contacts-nickname flex-1">{{v.to_nickname}}</div>
							<div class="im-contacts-msg-time" v-if="v.last_msg">{{v.last_msg.content.time}}</div>
						</div>
						<div class="flex">
							<div class="flex-1">
								<div v-if="v.last_msg && v.last_msg.withdraw" class="withdraw">
									<div v-if="v.last_msg.senduid===userInfo.id">你撤回了一条消息</div>
									<div v-else>对方撤回了一条消息</div>
								</div>
								<div v-else>
									<div class="im-contacts-last-msg" v-if="v.last_msg && v.last_msg.content.msg_type==='text'">{{v.last_msg.content.msg}}</div>
									<div class="im-contacts-last-msg" v-if="v.last_msg && v.last_msg.content.msg_type==='img'">[图片]</div>
									<div class="im-contacts-last-msg" v-if="v.last_msg && v.last_msg.content.msg_type==='exchange_mobile'">[互换电话]</div>
									<div class="im-contacts-last-msg" v-if="v.last_msg && v.last_msg.content.msg_type==='exchange_wechat'">[互换微信]</div>
									<div class="im-contacts-last-msg" v-if="v.last_msg && v.last_msg.content.msg_type==='resume'">[在线简历]</div>
								</div>
							</div>
							<el-badge :value="v.unread_count" :max="99" class="im-contacts-unread-count" :hidden="v.unread_count<=0"/>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="wrap im-message-body flex-1">
			<div class="im-message-header">
				<div class="im-win-title-close">
					<el-tooltip effect="dark" :content="is_full_screen?'最小化':'最大化'" placement="top-end">
						<span @click="is_full_screen=false;" v-if="is_full_screen">
							<i class="el-icon-copy-document"></i>
						</span>
						<span @click="is_full_screen=true;" v-else>
							<i style="width: 10px;height: 10px;display: block;border: 1px solid #8c8c8c;border-radius: 2px;"></i>
						</span>
			    	</el-tooltip>
					<el-tooltip effect="dark" content="关闭" placement="top-end">
						<span @click="win=false;">
							<i class="el-icon-close"></i>
						</span>
			    	</el-tooltip>
				</div>
		    	<div class="im-win-title-nickname" v-if="toUser.id">
		    		{{toUser.to_nickname}}
		    	</div>
			</div>
			<div class="flex1 im-message-list" ref="ImMessageList" v-if="toUser.id">
				<div class="im-message-list-loading">
					<div v-if="historyMsgPage.status" class="loading-text"><i class="el-icon-loading"></i>加载中...</div>
					<el-link :underline="false" v-else-if="!historyMsgPage.status && historyMsgPage.per_page>historyMsgPage.page" @click="getHistoryMsg();">查看更多历史消息</el-link>
					<div v-else>共{{historyMsgPage.total}}条记录，已加载完毕</div>
				</div>
				<div v-for="(v,index) in historyMsg" class="im-message-item" :class="{'is_send':v.senduid===userInfo.id}">
					<div v-if="v.withdraw" class="withdraw">
						<div v-if="v.senduid===userInfo.id">你撤回了一条消息</div>
						<div v-else>“{{toUser.to_nickname}}”撤回了一条消息</div>
					</div>
					<div v-else>
						<div class="flex im-message-item-user" v-if="index<=0 || (index>0 && historyMsg[index-1].senduid!==v.senduid) || (index>0 && v.content.timestamp-historyMsg[index-1].content.timestamp>60 && historyMsg[index-1].senduid===v.senduid) || historyMsg[index-1].withdraw">
							<div class="im-message-item-nickname" v-if="v.senduid===userInfo.id">{{userInfo.nickname}}</div>
							<div class="im-message-item-nickname" v-else>
					    		{{toUser.to_nickname}}
							</div>
							<div class="im-message-item-time">{{v.content.time}}</div>
						</div>
						<div class="flex im-message-msg-content" 
							v-if="v.content.msg_type==='text' || v.content.msg_type==='img'">
							<div class="im-message-msg flex-1" 
							v-if="v.content.msg_type==='text'"
							v-html="encodeHtml(v.content.msg)"></div>
							<div class="im-message-msg flex-1" 
							v-if="v.content.msg_type==='img'">
							<img
							    :src="v.content.url+v.content.msg" 
							    @click="openImageViewer(index)"
							    class="img-msg">
							</div>
							<div class="im-message-msg-more" v-if="((new Date()).getTime()/1000)-v.content.timestamp<120 && !v.withdraw && v.senduid===userInfo.id">
								<i class="el-icon-more-outline"></i>
								<div class="im-message-msg-more-list">
									<div class="flex flex-center im-message-msg-more-item" @click="sendMessageWithdraw(v)">
										<div class="icon is_active">
											<i class="el-icon-refresh-left"></i>
										</div>
										<div class="text">撤回</div>
									</div>
								</div>
							</div>
						</div>
						<div class="flex im-message-msg-body" v-else>
							<div class="im-message-msg flex-1" 
							v-if="v.content.msg_type==='exchange_mobile'">
							  	<div class="uname-card" v-if="v.senduid===userInfo.id">
							  		<div v-if="v.content.msg.status===0">等待对方接受交换电话请求。</div>
							  		<div v-else-if="v.content.msg.status===1">
							  			<div>{{v.content.msg.toname}}</div>
							  			<div>{{v.content.msg.tomobile}}</div>
							  		</div>
							  		<div v-else>对方谢绝与您交换电话号码</div>
							  	</div>
							  	<div class="uname-card" v-else>
							  		<div v-if="v.content.msg.status===0">
								  		<div>对方想与您交换电话号码，您是否接受？</div>
								  		<div class="flex mt-3">
								  			<div class="flex-1">
										    	<el-link type="danger" :underline="false" @click="refuseMobileExchange(v.id)">拒绝</el-link>
								  			</div>
								  			<div class="flex-1">
									    		<el-link type="primary" :underline="false" @click="toolsMobileShow(v.id)">接受</el-link>
								  			</div>
								  		</div>
							  		</div>
							  		<div v-else-if="v.content.msg.status===1">
							  			<div>{{v.content.msg.name}}</div>
							  			<div>{{v.content.msg.mobile}}</div>
							  		</div>
							  		<div v-else>您已谢绝对方与您交换电话号码请求</div>
							  	</div>
							</div>
							<div class="im-message-msg flex-1" 
							v-if="v.content.msg_type==='exchange_wechat'">
							  	<div class="uname-card wechat" v-if="v.senduid===userInfo.id">
							  		<div v-if="v.content.msg.status===0">等待对方接受交换微信请求。</div>
							  		<div v-else-if="v.content.msg.status===1">
							  			<div>{{v.content.msg.toname}}</div>
							  			<div>{{v.content.msg.towechat}}</div>
							  		</div>
							  		<div v-else>对方谢绝与您交换微信</div>
							  	</div>
							  	<div class="uname-card wechat" v-else>
							  		<div v-if="v.content.msg.status===0">
								  		<div>对方想与您交换微信，您是否接受？</div>
								  		<div class="flex mt-3">
								  			<div class="flex-1">
										    	<el-link type="danger" :underline="false" @click="refuseWechatExchange(v.id)">拒绝</el-link>
								  			</div>
								  			<div class="flex-1">
									    		<el-link type="primary" :underline="false" @click="toolsWechatShow(v.id)">接受</el-link>
								  			</div>
								  		</div>
							  		</div>
							  		<div v-else-if="v.content.msg.status===1">
							  			<div>{{v.content.msg.name}}</div>
							  			<div>{{v.content.msg.wechat}}</div>
							  		</div>
							  		<div v-else>您已谢绝对方与您交换微信请求</div>
							  	</div>
							</div>
							<div class="im-message-msg flex-1" 
							v-if="v.content.msg_type==='resume'">
							  	<div class="uname-card resume">
							  		<div>{{v.content.msg.name}}的在线简历</div>
							  		<div>
							  			<span v-if="v.content.msg.sex===1">男</span>
							  			<span v-else-if="v.content.msg.sex===2">女</span>
							  			<span v-else>保密</span> 丨 {{v.content.msg.age}}岁 丨 {{v.content.msg.educational_background}} 丨 {{v.content.msg.work_experience_time}}年工作经验
							  		</div>
							  		<div>
							    		<el-link type="primary" :underline="false" @click="window.open('/resume/'+v.content.msg.id+'.html')">查看详情</el-link>
							    		<el-link type="primary" :underline="false" @click="deliveryResume" v-if="v.touid===userInfo.id">加入待处理</el-link>
							  		</div>
							  	</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="im-message-content wrap" v-if="toUser.id">
				<div class="flex im-message-tools">
					<div class="im-message-tools-item" @click.stop="showEmotion= !showEmotion;" title="选择表情">
						<i class="el-icon-eleme"></i>
					</div>
					<div class="im-message-tools-item" title="发送图片">
					  	<el-upload
							  action="https://im.xycms.com/uploadFiles"
							  name="file"
							  accept="image/*"
							  :data="getUploadImImgData()"
							  :show-file-list="false"
							  :before-upload="handleUploadImImgBefore"
							  :on-success="handleUploadImImgSuccess"
							  :on-error="handleUploadImImgError"
							  :on-progress="handleUploadImImgProgress"
							  :disabled="UploadImImg">
							<i class="el-icon-picture-outline"></i>
						</el-upload>
					</div>
					<div class="im-message-tools-item">
						<i class="el-icon-video-camera"></i>
					</div>
					<div class="flex-1"></div>
					<div class="im-message-tools-item flex flex-center" title="互换电话">
						<el-popover
						  placement="top"
						  width="240"
						  v-model="tools.mobile.show"
    					  trigger="manual"
						  popper-class="xycms-im"
						  @show="toolsMobileShow">
					  		<div class="text-desc">您的名片</div>
						  	<div class="uname-card">
						  		<div v-if="tools.mobile.status===2">
						  			<i class="el-icon-loading"></i>加载中...
						  		</div>
						  		<div v-if="tools.mobile.status===0 && tools.mobile.err">{{tools.mobile.err}}</div>
						  		<div>{{tools.mobile.data.name}}</div>
						  		<div>{{tools.mobile.data.mobile}}</div>
						  	</div>
						  	<div style="text-align: right; margin: 0">
						    	<el-button size="mini" type="info" @click="tools.mobile.show = false;">取消</el-button>
						    	<el-button type="primary" size="mini" @click="toolsMobileExchange" :disabled="tools.mobile.status!==1">交换</el-button>
						  	</div>
							<i class="el-icon-mobile" slot="reference"
							@click="tools.mobile.show= !tools.mobile.show"></i>
						</el-popover>
					</div>
					<div class="im-message-tools-item flex flex-center" title="互换微信">
						<el-popover
						  placement="top"
						  width="240"
						  v-model="tools.wechat.show"
    					  trigger="manual"
						  popper-class="xycms-im"
						  @show="toolsWechatShow">
					  		<div class="text-desc">您的微信</div>
						  	<div class="uname-card wechat">
						  		<div v-if="tools.wechat.status===2">
						  			<i class="el-icon-loading"></i>加载中...
						  		</div>
						  		<div v-if="tools.wechat.status===0 && tools.wechat.err">{{tools.wechat.err}}</div>
						  		<div>{{tools.wechat.data.name}}</div>
						  		<div>{{tools.wechat.data.wechat}}</div>
						  	</div>
						  	<div style="text-align: right; margin: 0">
						    	<el-button size="mini" type="info" @click="tools.wechat.show = false">取消</el-button>
						    	<el-button type="primary" size="mini" @click="toolsWechatExchange" :disabled="tools.wechat.status!==1">交换</el-button>
						  	</div>
							<i class="el-icon-eleme" slot="reference"
							@click="tools.wechat.show= !tools.wechat.show"></i>
						</el-popover>
					</div>
					<div class="im-message-tools-item flex flex-center" title="发送简历" v-if="!userInfo.role_type">
						<el-popover
						  placement="top"
						  width="340"
						  v-model="tools.resume.show"
    					  trigger="manual"
						  popper-class="xycms-im"
						  @show="toolsResumeShow">
					  		<div class="text-desc">在线简历</div>
						  	<div class="uname-card resume">
						  		<div v-if="tools.resume.status===2">
						  			<i class="el-icon-loading"></i>加载中...
						  		</div>
						  		<div v-if="tools.resume.status===0 && tools.resume.err">{{tools.resume.err}}</div>
						  		<div>{{tools.resume.data.name}}</div>
						  		<div>
						  			<span v-if="tools.resume.data.sex===1">男</span>
						  			<span v-else-if="tools.resume.data.sex===2">女</span>
						  			<span v-else>保密</span> 丨 {{tools.resume.data.age}}岁 丨 {{tools.resume.data.educational_background}} 丨 {{tools.resume.data.work_experience_time}}年工作经验
						  		</div>
						  	</div>
						  	<div style="text-align: right; margin: 0">
						    	<el-button size="mini" type="info" @click="tools.resume.show = false">取消</el-button>
						    	<el-button type="primary" size="mini" @click="toolsResumeExchange" :disabled="tools.resume.status!==1">发送</el-button>
						  	</div>
							<i class="el-icon-position" slot="reference"
							@click="tools.resume.show= !tools.resume.show"></i>
						</el-popover>
					</div>
					<div class="im-message-tools-item flex flex-center" title="不感兴趣">
						<el-popover
						  placement="top"
						  width="240"
						  v-model="tools.uninterested.show"
						  popper-class="xycms-im">
					  		<div class="text-desc">确定将对方放入不感兴趣名单中吗？</div>
					  		<div class="text-desc">将不再提醒对方发送的消息。</div>
						  	<div style="text-align: right; margin: .5rem 0 0 0;">
						    	<el-button size="mini" type="info" @click="tools.uninterested.show = false">取消</el-button>
						    	<el-button type="primary" size="mini" @click="tools.uninterested.show = false">确定</el-button>
						  	</div>
							<i class="el-icon-close" slot="reference"></i>
						</el-popover>
					</div>
					<ul class="im-message-tools-content im-emotion" v-show="showEmotion">
						<li v-for="(v,index) in emotion" @click="insertEmotion(v.text)">
							<img :src="v.url">
						</li>
					</ul>
					<div v-if="UploadImImg" class="im-progress">
						<el-progress :percentage="UploadImImgProgress" :status="UploadImImgProgress>=100?'success':''" v-if="UploadImImg===true"></el-progress>
						<el-alert
							v-if="UploadImImg && UploadImImg!=true"
						    :title="UploadImImg"
						    type="error"
						    show-icon
    						:closable="false">
						</el-alert>
					</div>
				</div>
				<div class="flex1 im-message-textarea" @dragover="handleUploadImImgDragover" @drop="handleUploadImImgDrop">
					<el-input
						ref="ImMessageFormMsg"
					  	type="textarea"
					  	@keyup.enter.native="ImMessageFormMsgEnter"
					  	@keyup.esc.native="showEmotion=false;win=false;"
					  	@paste.native="handleUploadImImgPaste"
					  	:autosize="{minRows:3,maxRows:3}"
					  	maxlength="200"
					  	v-model="form.msg">
					</el-input>
				</div>
				<div class="im-message-send-btn">
					<el-button type="primary" size="mini" @click="sendMessage">发送</el-button>
				</div>
			</div>
		</div>
	</div>
	<div class="el-image-viewer__wrapper" style="z-index: 99999;" v-if="viewer.index !== null">
		<div class="el-image-viewer__mask"></div>
		<span class="el-image-viewer__btn el-image-viewer__close" @click="closeImageViewer">
			<i class="el-icon-circle-close"></i>
		</span>
		<span class="el-image-viewer__btn el-image-viewer__prev" @click="viewerPrev">
			<i class="el-icon-arrow-left"></i>
		</span>
		<span class="el-image-viewer__btn el-image-viewer__next" @click="viewerNext">
			<i class="el-icon-arrow-right"></i>
		</span>
		<div class="el-image-viewer__btn el-image-viewer__actions">
			<div class="el-image-viewer__actions__inner" >
				<i class="el-icon-zoom-out" @click="viewerZoomOut"></i>
				<i class="el-icon-zoom-in" @click="viewerZoomIn"></i>
				<i class="el-image-viewer__actions__divider"></i>
				<i class="el-icon-full-screen" v-if="viewer.is_screen" @click="viewerIsScreen"></i>
				<i class="el-icon-c-scale-to-original" v-else @click="viewerIsScreen"></i>
				<i class="el-image-viewer__actions__divider"></i>
				<i class="el-icon-refresh-left" @click="viewerRotateLeft"></i>
				<i class="el-icon-refresh-right" @click="viewerRotateRight"></i>
			</div>
		</div>
		<div class="el-image-viewer__canvas">
			<img :src="historyMsg[viewer.index].content.url+historyMsg[viewer.index].content.msg" class="el-image-viewer__img" :style="getViewerStyle()" ref="viewerImage" @mousewheel="viewerMousewheel">
		</div>
	</div>
</div>