heshanApp/pages_im/pages/conversation/chating1/components/ChatingFooter/index.vue

<template>
	<view class="chating_footer" :style="{ paddingBottom: keyboardHeight + 'px' }">
		<view class="forbidden_footer" v-if="getPlaceholder.length > 0">
		<image style="margin-right: 8rpx;width:50rpx" src="../../../../../static/images/forbidden_footer.png" mode="aspectFit" />
			<text>{{ getPlaceholder }}</text>
		</view>
		
		<view v-show="getPlaceholder.length <= 0" :style="{ 'pointer-events': getPlaceholder ? 'none' : 'auto' }">
			<view class="chat_footer">
				<image v-if="showRecord"
					@click="updateRecordBtn"
					style="width: 26px; height: 26px;"
					src="../../../../../static/images/chating_footer_audio_recording.png" />

                 <image v-else
                 	@click="updateRecordBtn"
                 	style="width: 26px; height: 26px;"
                 	src="../../../../../static/images/chating_footer_audio.png" />

				<view class="input_content">
                    <!-- 临时替换为 CustomTextarea，原 CustomEditor 已注释 -->
					<CustomTextarea
						:placeholder="getPlaceholder"
                        :value="inputHtml"
						v-show="!showRecord"
						class="custom_editor"
						ref="customEditor"
						@focus="editorFocus"  
						@blur="editorBlur"
						@input="editorInput"
						@tryAt="showAtPanel"
                        @confirm="sendTextMessage"
                    />
					<!-- <CustomEditor
						:placeholder="getPlaceholder"
						v-show="!showRecord"
						class="custom_editor"
						ref="customEditor"
						@ready="editorReady"
						@focus="editorFocus"  
						@blur="editorBlur"
						@input="editorInput"
						@tryAt="showAtPanel"/> -->

					<view v-if="storeQuoteMessage" class="quote_message">
						<view class="content">
							<u-parse :content="getQuotedContent" />
						</view>
						<image @click="cancelQuote" style="width: 16px; height: 16px" src="../../../../../static/images/chating_footer_quote_close.png" alt="" />
					</view>
					<button class="record_btn" @longpress="longpressRecord" @touchmove="touchMoveSpeech" @touchend="endRecord" v-show="showRecord" customStyle="height:30px;">
						{{ recording ? '松手发送' : '按住说话' }}
					</button>
				</view>
				<view class="footer_action_area">
					<image @click.prevent="updateEmojiBar"  class="emoji_action" src="../../../../../static/images/chating_footer_emoji.png" alt="" srcset="" /> 
					

					<image  @click.prevent="updateActionBar" v-show="!hasContent" src="../../../../../static/images/chating_footer_add.png" alt="" srcset="" />
					
					<button class="btnSend" v-show="hasContent && !emojiBarVisible" @touchend.prevent="sendTextMessage">发送</button>
					<button class="btnSend" v-show="hasContent && emojiBarVisible" @touchend.prevent="sendTextMessage">发送</button>
					
					<!-- <image v-show="hasContent && !emojiBarVisible" @touchend.prevent="sendTextMessage" src="../../../../../static/images/send_btn.png" alt="" srcset="" /> -->
					<!-- <image v-show="hasContent && emojiBarVisible" @click.prevent="sendTextMessage" src="../../../../../static/images/send_btn.png" alt="" srcset="" /> -->
				</view>
			</view>

			<chating-action-bar @sendMessage="sendMessage" @prepareMediaMessage="prepareMediaMessage" v-show="actionBarVisible" />

			<chating-emoji-bar @insertEmoji="emojiClick" @backspace="backspace" v-show="emojiBarVisible" /> 
			<u-action-sheet
				:safeAreaInsetBottom="true"
				round="12"
				:actions="actionSheetMenu"
				@select="selectClick"
				:closeOnClickOverlay="true"
				:closeOnClickAction="true"
				:show="showActionSheet"
				@close="showActionSheet = false"></u-action-sheet>
			<record-overlay @recordFinish="recordFinish" ref="recordOverlayRef" :visible="recording" />
		</view>
	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import { formatInputHtml, getPurePath, html2Text } from '../../../../../util/common';
import { parseMessageByType, parseAt } from '../../../../../util/imCommon';
import { ChatingFooterActionTypes, UpdateMessageTypes, GroupMemberListTypes, PageEvents } from '../../../../../constant';
import IMSDK, { GroupMemberRole, GroupStatus, IMMethods, MessageStatus, MessageType, SessionType } from 'openim-uniapp-polyfill';
import UParse from '../../../../../components/gaoyia-parse/parse.vue';
import CustomEditor from './CustomEditor.vue';
import CustomTextarea from './CustomTextarea.vue';
import ChatingActionBar from './ChatingActionBar.vue';
import ChatingEmojiBar from './ChatingEmojiBar.vue';
import RecordOverlay from './RecordOverlay.vue';
import { gotoAppPermissionSetting, requestAndroidPermission, judgeIosPermission } from '../../../../../util/permission';
import { he } from 'date-fns/locale';

const needClearTypes = [
	// MessageType.AdvanceTextMessage,
	MessageType.TextMessage,
	MessageType.AtTextMessage,
	MessageType.QuoteMessage
];

const albumChoose = [
	{
		name: '图片',
		type: ChatingFooterActionTypes.Album,
		idx: 0
	},
	{
		name: '视频',
		type: ChatingFooterActionTypes.Album,
		idx: 1
	}
];
const cameraChoose = [
	{
		name: '拍照',
		type: ChatingFooterActionTypes.Camera,
		idx: 0
	},
	{
		name: '录制',
		type: ChatingFooterActionTypes.Camera,
		idx: 1
	}
];

export default {
	components: {
		CustomEditor,
        CustomTextarea,
		ChatingActionBar,
		ChatingEmojiBar,
		UParse,
		RecordOverlay
	},
	props: {
		footerOutsideFlag: Number
	},
	data() {
		return {
			customEditorCtx: null,
			inputHtml: '',
			showRecord: false,
			actionBarVisible: false,
			emojiBarVisible: false,
			isInputFocus: false,
			actionSheetMenu: [],
			showActionSheet: false,
			recording: false,
			recordTop: uni.getWindowInfo().windowHeight - 130,
			conversationID: null,
			isJoinGroup: true,
			isSending: false, // 发送状态标志
			isClickAction:false,
			isClickEmoji:false,
            keyboardHeight: 0 // 记录键盘高度
		};
	},
	computed: {
		...mapGetters(['storeQuoteMessage', 'storeCurrentConversation', 'storeCurrentGroup', 'storeCurrentMemberInGroup', 'storeBlackList', 'storeRevokeMap','timStore']),
		getQuotedContent() {
			if (!this.storeQuoteMessage) {
				return '';
			}
			return `回复${parseMessageByType(this.storeQuoteMessage)}`;
		},
		hasContent() {
			return html2Text(this.inputHtml) !== '';
		},
		isNomal() {
			return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Nomal;
		},
		getPlaceholder() {
			const isSingle = this.storeCurrentConversation.conversationType === SessionType.Single;
			if (!isSingle && this.storeCurrentGroup.status === GroupStatus.Muted) {
				return !this.isNomal ? '' : '群主或管理员已开启全体禁言';
			}
			if (!isSingle && !this.isJoinGroup) {
				return '您已不在该群组';
			}
			if (!isSingle && this.storeCurrentMemberInGroup.muteEndTime > Date.now()) {
				return `您已被管理员或群主禁言！`;
			}
			if (isSingle && this.storeBlackList.find((black) => black.userID === this.storeCurrentConversation.userID)) {
				return '对方已被拉入黑名单';
			}
			return '';
		},
		imType() {
			return this.timStore?.imType ?? '' ;
		},
		orderId() {
			return this.timStore?.orderId ?? '' ;
		},
		orderType() {
			return this.timStore?.orderType ?? '' ;
		},
	},
	watch: {
		footerOutsideFlag(newVal) {
			this.onClickActionBarOutside();
			this.onClickEmojiBarOutside();
		},
		actionBarVisible(val) {
			this.checkComplaintButtonVisible();
		},
		emojiBarVisible(val) {
			this.checkComplaintButtonVisible();
		}
	},
	mounted() {
		this.setIMListener();
		this.setKeyboardListener();
		if (this.storeCurrentConversation.groupID) {
			IMSDK.asyncApi(IMMethods.IsJoinGroup, IMSDK.uuid(), this.storeCurrentConversation.groupID).then((res) => {
				this.isJoinGroup = res.data;
			});
		}
		this.conversationID = this.storeCurrentConversation.conversationID;
		this.parseDraftText(this.storeCurrentConversation.draftText);
		IMSDK.asyncApi(IMMethods.SetConversationDraft, IMSDK.uuid(), {
			conversationID: this.conversationID,
			draftText: ''
		});
		uni.$on(PageEvents.ReEditMessage, this.setReEditMessage);
	    uni.$on("sendIM", this.sendPackageImMsg);
		uni.$on("sendIMCts", this.sendCtsImMsg);
	},
	beforeDestroy() {
		uni.$emit('showComplaintButton');
		this.disposeIMListener();
		this.disposeKeyboardListener();
		if (this.inputHtml && this.inputHtml.trim()) {
			IMSDK.asyncApi(IMMethods.SetConversationDraft, IMSDK.uuid(), {
				conversationID: this.conversationID,
				draftText: html2Text(this.inputHtml)
			});
		}
		uni.$off("sendIM", this.sendPackageImMsg);
		uni.$off("sendIMCts", this.sendCtsImMsg);
	},
	methods: {
		...mapActions('message', ['pushNewMessage', 'updateOneMessage', 'updateQuoteMessageRevoke']),
		checkComplaintButtonVisible() {
			this.$nextTick(() => {
				if (this.actionBarVisible || this.emojiBarVisible) {
					uni.$emit('hideComplaintButton');
				} else {
					uni.$emit('showComplaintButton');
				}
			});
		},
		setReEditMessage(id) {
			if (this.$refs.customEditor) {
				this.$refs.customEditor.clear();
			}
			setTimeout(() => {
				this.$refs.customEditor.insertEmoji(this.storeRevokeMap[id].text);
				this.$store.commit('message/SET_QUOTE_MESSAGE', this.storeRevokeMap[id].quoteMessage);
			}, 50);
		},
		parseDraftText(draftText) {
			let currentText = '';
			for (let i = 0; i < draftText.length; i++) {
				const currentChar = draftText[i];
				if (currentChar === '<') {
					if (currentText) {
						const text = currentText;
						setTimeout(() => {
							this.$refs.customEditor.insertEmoji(text);
						}, 100);
						currentText = '';
					}
					const imgEndIndex = draftText.indexOf('>', i);
					if (imgEndIndex !== -1) {
						const imgTag = draftText.substring(i, imgEndIndex + 1);

						if (imgTag.includes('class="at_el"')) {
							const customDataReg = /data-custom=".+"/;
							const atInfoArr = imgTag.match(customDataReg)[0].slice(13, -1).split('&amp;');
							this.$refs.customEditor.createCanvasData(atInfoArr[0].slice(7), atInfoArr[1].slice(15));
						}
						i = imgEndIndex;
					}
				} else {
					currentText += currentChar;
				}
			}
			if (currentText) {
				setTimeout(() => {
					this.$refs.customEditor.insertEmoji(currentText);
				}, 700);
			}
		},
		longpressRecord() {
			this.recording = true;
			this.$nextTick(() => this.getRecordAreaData());
		},
		touchMoveSpeech(e) {
			uni.$u.throttle(this.$refs.recordOverlayRef.touchMoveSpeech(e, this.recordTop), 250);
		},
		endRecord() {
			this.recording = false;
			this.$refs.recordOverlayRef.checkStopType();
		},
		async recordFinish(path, duration) {
			const message = await IMSDK.asyncApi(IMMethods.CreateSoundMessageFromFullPath, IMSDK.uuid(), {
				soundPath: getPurePath(path),
				duration
			});
			this.sendMessage(message);
		},
		getRecordAreaData() {
			this.getEl('.record_area').then((data) => {
				if (data) {
					this.recordTop = data.top;
				}
			});
		},
		getEl(el) {
			return new Promise((resolve) => {
				const query = uni.createSelectorQuery().in(this);
				query.select(el).boundingClientRect((data) => {
					resolve(data);
				}).exec();
			});
		},
		async createTextMessage() {
			let message = '';
            // 切换为 textarea 后，inputHtml 实际上是纯文本
            const text = String(this.inputHtml || '');
			console.log('createTextMessage text:',text);
            // 简单的 @ 解析逻辑：查找 @Name 格式
            // 这里暂时简化处理，如果需要精确的 @ 功能，需要维护一个 @ 用户列表
            // 暂时只发送普通文本，后续可以增强 @ 解析
			if (this.storeQuoteMessage) {
				console.log("1111");
				message = await IMSDK.asyncApi(IMMethods.CreateQuoteMessage, IMSDK.uuid(), {
					text,
					message: this.storeQuoteMessage
				});
			} else {
				console.log("2222",text);
				message = await IMSDK.asyncApi(IMMethods.CreateTextMessage, IMSDK.uuid(), text);
			}
			if (!message) {
				throw new Error('CreateTextMessage returned null/undefined');
			}
			return message;
		},
		async sendTextMessage() {
			console.log('sendTextMessage inputHtml:', this.inputHtml);
			if (!this.inputHtml || !this.inputHtml.trim()) {
				console.log('sendTextMessage: input is empty');
				return; 
			}
			
			// 非关键操作，忽略错误
			try {
				IMSDK.asyncApi('changeInputStates', IMSDK.uuid(), {
					conversationID: this.storeCurrentConversation.conversationID,
					focus: false
				});
			} catch (e) {
				console.warn('changeInputStates failed:', e);
			}
			
			 try {
			      this.isSending = true; // 开始发送，设置标志位
			      const message = await this.createTextMessage();
				  console.log('createTextMessage result:', message);
			      await this.sendMessage(message);
                  
                  // 发送成功后清空
                  this.inputHtml = '';
                  if (this.$refs.customEditor) {
                      this.$refs.customEditor.clear();
                  }
                  
			    } catch (error) {
					  console.error('发送消息失败:', error);
					  // 详细打印 error 对象
					  if (typeof error === 'object') {
						  console.log('Error details:', JSON.stringify(error));
					  }
					  uni.showToast({
						 title: '发送失败: ' + (error.errMsg || '未知错误'),
						 icon: 'none'
					  });
			    } finally {
			        this.isSending = false; // 发送完成，重置标志位
			  }
		},
		async sendCtsPackageMessage(item){
			let payloadJson={
				payload:{
					 data:"package", 
					 extension:{
						packageId:item.packageId,
						title:item.packageName,
						companyId:item.companyId,
						companyUserId:item.companyUserId,
						image:item.imgUrl
					 }
		         }
			};
			let message = await IMSDK.asyncApi(IMMethods.CreateCustomMessage, IMSDK.uuid(), {
				data: JSON.stringify(payloadJson),
				extension: '',
				description: 'package'
			});
			this.sendMessage(message);
		},
		sendPackageImMsg(item){
			console.log("qxj package:"+item.packageId);
			this.sendCtsPackageMessage(item);
		},
		
		async sendCtsMessage(item){
			 let payloadJson={};
			 if(item.type=="couponPackage"){
			     payloadJson={
			     	payload:{
			     		 data:item.type, 
			     		 extension:{
			     			couponId:item.couponId,
			     			title:item.title,
							price:item.price,
							minPrice:item.minPrice,
							limitTime:item.limitTime,
			     			companyId:item.companyId,
			     			companyUserId:item.companyUserId,
			     			//image:item.imgUrl
			     		 }
			          }
			     };
			 
			 }
			 if(item.type=="inquirySelect"){
			     payloadJson={
			     	payload:{
			     		 data:item.type, 
			     		 extension:{
			     			packageId:item.packageId,
			     			title:item.lable,
							type:item.value,
			     			companyId:item.companyId,
			     			companyUserId:item.companyUserId,
			     			//image:item.imgUrl
			     		 }
			          }
			     };
			 }
			let message = await IMSDK.asyncApi(IMMethods.CreateCustomMessage, IMSDK.uuid(), {
				 data: JSON.stringify(payloadJson),
				 extension: '',
				 description: item.type
			});
			this.sendMessage(message);
		},
		sendCtsImMsg(item){
			this.sendCtsMessage(item);
		},
		
		sendMessage(message) {
			var customerData={
			  	type:this.timStore?.type,
			  	imType:this.timStore?.imType,
			  	orderId:this.timStore?.orderId,
			  	followId:this.timStore?.followId,
			  	orderType:this.timStore?.orderType
			}
			let userId=this.storeCurrentConversation.userID;
			if(userId!=undefined  && (userId!="" || userId.length>0)){
				if(userId.indexOf('D')!==-1){
					message.ex=JSON.stringify(customerData);
				}
			}
			this.pushNewMessage(message);
			if (needClearTypes.includes(message.contentType)) {
				if(this.$refs.customEditor){
					this.$refs.customEditor.clear();
				}
			}
			let offlinePushInfo={
				title:message.senderNickname,
				desc: parseMessageByType(message),
				ex: "",
				iOSPushSound: "",
				iOSBadgeCount: true
			};
			
			this.$emit('scrollToBottom');
			IMSDK.asyncApi(IMMethods.SendMessage, IMSDK.uuid(), {
				recvID: this.storeCurrentConversation.userID,
				groupID: this.storeCurrentConversation.groupID,
				message,
				offlinePushInfo
			}).then(({ data }) => {
					this.updateOneMessage({
						message: data,
						isSuccess: true
					});
				}).catch(({ data, errCode, errMsg }) => {
					this.updateOneMessage({
						message: data,
						type: UpdateMessageTypes.KeyWords,
						keyWords: [
							{
								key: 'status',
								value: MessageStatus.Failed
							},
							{
								key: 'errCode',
								value: errCode
							}
						]
					});
				});
			if (this.storeQuoteMessage) {
				this.$store.commit('message/SET_QUOTE_MESSAGE', undefined);
			}
		},
		// action
		cancelQuote() {
			this.$store.commit('message/SET_QUOTE_MESSAGE', undefined);
		},
		onClickActionBarOutside() {
			if (this.actionBarVisible) {
				this.actionBarVisible = false;
			}
		},
		onClickEmojiBarOutside() {
			if (this.emojiBarVisible) {
				this.emojiBarVisible = false;
			}
		},
		updateEmojiBar() {
			if (this.recording) {
				return;
			}
			if (this.showRecord) {
				this.showRecord = false;
			}
			
			this.onClickActionBarOutside();
			if(!this.emojiBarVisible){
				this.emojiBarVisible=true;
				this.$emit('scrollToBottom');
			}
			this.isClickEmoji=true;
			setTimeout(()=>{
				this.isClickEmoji=false;
			},300);
			//this.emojiBarVisible = !this.emojiBarVisible;
		},
		updateActionBar() {
			if (this.recording) {
				return;
			}
			if (this.showRecord) {
				this.showRecord = false;
			}
			this.onClickEmojiBarOutside();
			this.actionBarVisible = !this.actionBarVisible;
			this.isClickAction=true;
			setTimeout(()=>{
				this.isClickAction=false;
			},300);
		},
		
		editorInput(e) {
			// 适配 Textarea 的 input 事件
            const value = e.detail.value || '';
            this.inputHtml = value;
		},
		editorReady(res) {
            // Textarea 不需要 context
			this.$emit('ready', res);
		},
		editorFocus() {
			this.isInputFocus = true;
			this.$emit('focus');
			// 优化：键盘弹起前先给个预估高度，防止被遮挡
			if (this.keyboardHeight === 0) {
			    const lastHeight = uni.getStorageSync('lastKeyboardHeight') || 300;
			    this.keyboardHeight = lastHeight;
			}
		},
		editorBlur() {
			this.isInputFocus = false;
			this.$emit('blur');
		},
		showAtPanel() {
			if (!this.$store.getters.storeCurrentConversation.groupID) return;
			uni.$u.route('/pages_im/pages/conversation/groupMemberList/index', {
				type: GroupMemberListTypes.ChooseAt,
				groupID: this.$store.getters.storeCurrentConversation.groupID
			});
		},
		backspace() {
			if (this.$refs.customEditor) {
				this.$refs.customEditor.backspace();
			}
		},
		updateRecordBtn() {
			if (this.recording) {
				return;
			}
			if (!this.showRecord) {
				this.checkRecordPermission();
			}
			this.showRecord = !this.showRecord;
			this.onClickActionBarOutside();
			this.onClickEmojiBarOutside();
			this.$emit('scrollToBottom');
		},
		async checkRecordPermission() {
			if (uni.$u.os() === 'ios') {
				const iosFlag = judgeIosPermission('record');
				if (iosFlag === 0) {
					uni.$u.toast('您已禁止访问麦克风，请前往开启');
					setTimeout(() => gotoAppPermissionSetting(), 250);
				}
				if (iosFlag === -1) {
					let recorderManager = uni.getRecorderManager();
					recorderManager.onStop(() => (recorderManager = null));
					recorderManager.start();
					setTimeout(() => recorderManager.stop());
				}
			} else {
				const androidFlag = await requestAndroidPermission('android.permission.RECORD_AUDIO');
				if (androidFlag === -1) {
					uni.$u.toast('您已禁止访问麦克风，请前往开启');
					setTimeout(() => gotoAppPermissionSetting(), 250);
				}
			}
		},
		prepareMediaMessage(data) {
			// if (data.type === ChatingFooterActionTypes.Album) {
			// 	this.actionSheetMenu = [...albumChoose];
			// } else {
			// 	this.actionSheetMenu = [...cameraChoose];
			// }
			// this.showActionSheet = false;
			console.log("qxj prepareMediaMessage data:"+JSON.stringify(data));
			this.selectClick(data);
		},
		updateTyping() {
			if (this.storeCurrentConversation.conversationType === SessionType.Single) {
				IMSDK.asyncApi('changeInputStates', IMSDK.uuid(), {
					conversationID: this.storeCurrentConversation.conversationID,
					focus: true
				});
			}
		},
 
		// from comp
		emojiClick(emoji) {
			this.$refs.customEditor.insertEmoji(emoji);
		},
		batchCreateImageMesage(paths) {
			paths.forEach(async (path) => {
				const message = await IMSDK.asyncApi(IMMethods.CreateImageMessageFromFullPath, IMSDK.uuid(), getPurePath(path));
				this.sendMessage(message);
			});
		},
		selectClick(data) {
			if (data.index === 0) {
				if (data.type === ChatingFooterActionTypes.Album) {
					this.chooseOrShotImage(['album']).then((paths) => this.batchCreateImageMesage(paths));
				} else {
					this.chooseOrShotImage(['camera']).then((paths) => this.batchCreateImageMesage(paths));
				}
			} 
			else {
				const whenGetFile = (data) => {
					const purePath = getPurePath(data.path);
					IMSDK.getVideoCover(purePath).then(async ({ path }) => {
						console.log(getPurePath(path));
						const message = await IMSDK.asyncApi(IMMethods.CreateVideoMessageFromFullPath, IMSDK.uuid(), {
							videoPath: purePath,
							videoType: data.videoType,
							duration: Number(data.duration.toFixed()),
							snapshotPath: getPurePath(path)
						});
						this.sendMessage(message);
					});
				};
				if (data.type === ChatingFooterActionTypes.Album) {
					this.chooseOrShotVideo(['album']).then(whenGetFile);
				} else {
					this.chooseOrShotVideo(['camera']).then(whenGetFile);
				}
			}
		},
		chooseOrShotImage(sourceType) {
			return new Promise((resolve, reject) => {
				uni.chooseImage({
					count: 9,
					sizeType: ['compressed'],
					sourceType,
					success: function ({ tempFilePaths }) {
						resolve(tempFilePaths);
					},
					fail: function (err) {
						console.log(err);
						reject(err);
					}
				});
			});
		},
		chooseOrShotVideo(sourceType) {
			return new Promise((resolve, reject) => {
				uni.chooseVideo({
					compressed: true,
					sourceType,
					extension: ['mp4'],
					success: function ({ tempFilePath, duration }) {
						const idx = tempFilePath.lastIndexOf('.');
						const videoType = tempFilePath.slice(idx + 1);
						if (tempFilePath.includes('_doc/')) {
							tempFilePath = `file://${plus.io.convertLocalFileSystemURL(tempFilePath)}`;
						}
						console.log(tempFilePath);
						resolve({
							path: tempFilePath,
							videoType,
							duration
						});
					},
					fail: function (err) {
						console.log(err);
						reject(err);
					}
				});
			});
		},
		insertAt(userID, nickname) {
			const { atUsersInfo } = formatInputHtml(this.inputHtml);
			if (atUsersInfo.find((item) => item.atUserID === userID)) {
				return;
			}
			this.$refs.customEditor.createCanvasData(userID, nickname);
		},

		// im listener
		sendProgressHandler({ data: { progress, message } }) {
			this.updateOneMessage({
				message,
				type: UpdateMessageTypes.KeyWords,
				keyWords: {
					key: 'uploadProgress',
					value: progress
				}
			});
		},
		joinedGroupChangeHandler({ data }) {
			if (data.groupID === this.storeCurrentConversation.groupID) {
				IMSDK.asyncApi(IMMethods.IsJoinGroup, IMSDK.uuid(), data.groupID).then((res) => {
					this.isJoinGroup = res.data;
				});
			}
		},
		setIMListener() {
			IMSDK.subscribe("SendMessageProgress", this.sendProgressHandler);
			uni.$on(IMSDK.IMEvents.OnJoinedGroupDeleted, this.joinedGroupChangeHandler);
			uni.$on(IMSDK.IMEvents.OnJoinedGroupAdded, this.joinedGroupChangeHandler);
		},
		disposeIMListener() {
			IMSDK.unsubscribe("SendMessageProgress", this.sendProgressHandler);
			uni.$off(IMSDK.IMEvents.OnJoinedGroupDeleted, this.joinedGroupChangeHandler);
			uni.$off(IMSDK.IMEvents.OnJoinedGroupAdded, this.joinedGroupChangeHandler);
		},
        // keyboard
		setKeyboardListener() {
			uni.onKeyboardHeightChange((res) => {
				this.keyboardChangeHander(res);
			});
		},
		disposeKeyboardListener() {
			uni.offKeyboardHeightChange(this.keyboardChangeHander);
		},
		keyboardChangeHander(res) {
            // 当键盘高度变化时，如果需要手动调整 footer 位置（adjust-position=false时）
            // 目前我们的布局通常是 flex，可能不需要额外设置 bottom，除非是 fixed 定位
            // 但为了确保万无一失，我们可以通知父组件或调整自身样式
            
            // 更新键盘高度，用于动态调整 padding-bottom
			//console.log('keyboardChangeHander', res.height);
            this.keyboardHeight = res.height;
            if (res.height > 0) {
                uni.setStorage({ key: 'lastKeyboardHeight', data: res.height });
            }

			// 只有当高度真正变化时才触发
			// 这里我们主要处理一些状态同步，比如表情面板的互斥
			if (res.height > 0) {
				// 键盘弹起，关闭表情和功能面板
				if (this.actionBarVisible) {
					this.actionBarVisible = false;
				}
				if (this.emojiBarVisible) {
					this.emojiBarVisible = false;
				}
                this.$emit('keyboardHeightChange', res.height);
			} else {
                this.$emit('keyboardHeightChange', 0);
            }
            
            // 滚动到底部
            if (res.height > 0) {
                setTimeout(() => {
                    this.$emit('scrollToBottom');
                }, 200);
            }
		}
	}
};
</script>

<script module="snap" lang="renderjs">
export default {
	methods: {
		getSnapFlagUpdate(newValue, oldValue, ownerVm, vm) {
			if (newValue === null) {
				return;
			}
			const {
				path
			} = newValue
			this.getVideoSnshot(path).then(base64 => {
				ownerVm.callMethod('receiveSnapBase64', {
					...newValue,
					base64
				})
			})
		},
		getVideoSnshot(item) {
			return new Promise((reslove, reject) => {
				var video = document.createElement("VIDEO");
				video.style.display = 'none';
				video.setAttribute('crossOrigin', 'anonymous');
				video.setAttribute("autoplay", "autoplay");
				video.setAttribute("muted", "muted");
				video.innerHTML = "<source src=" + item + ' type="audio/mp4">';
				var canvas = document.createElement("canvas");
				var ctx = canvas.getContext("2d");
				video.addEventListener("canplay", function() {
					var anw = document.createAttribute("width");
					anw.nodeValue = video.videoWidth;
					var anh = document.createAttribute("height");
					anh.nodeValue = video.videoHeight;
					canvas.setAttributeNode(anw);
					canvas.setAttributeNode(anh);
					ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
					var base64 = canvas.toDataURL("image/png");
					video.pause();
					reslove(base64);
				});
			});
		},
	},
}
</script>

<style lang="scss" scoped>
	.chating_footer{
	}
.custom_editor {
	img {
		vertical-align: sub;
	}
}

.forbidden_footer {
	width: 100%;
	height: 112rpx;
	color: #8e9ab0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background: #f0f2f6;
	flex-shrink: 0;
	flex-grow: 0;
}

.chat_footer {
	display: flex;
	align-items: center;
	// background-color: #e9f4ff;
	background: #f0f2f6;
	// height: 50px;
	max-height: 120px;
	padding: 24rpx 20rpx;

	.input_content {
		flex: 1;
		min-height: 30px;
		max-height: 120px;
		margin: 0 24rpx;
		border-radius: 8rpx;
		position: relative;
		font-size: 36rpx;
		.record_btn {
			// background-color: #3c9cff;
			background: #fff;
			color: black;
			height: 30px;
			line-height: 30px;
			
		}
	}

	.quote_message {
		@include vCenterBox();
		justify-content: space-between;
		margin-top: 12rpx;
		padding: 8rpx;
		// padding-top: 20rpx;
		border-radius: 6rpx;
		background-color: #fff;
		color: #666;

		.content {
			::v-deep uni-view {
				@include ellipsisWithLine(2);
			}
		}
	}

	.footer_action_area {
		display: flex;
		align-items: center;
		.emoji_action {
			margin-right: 24rpx;
		}
		.btnSend{
			font-size: 36rpx;
			color: #fff;
			border-radius:6px;
			background-color:#1ab84d ;
			padding:20rpx 26rpx;
		}

		image {
			width: 26px;
			height: 26px;
		}
	}

	.send_btn {
		height: 30px;
		line-height: 30px;
		background-color: #4a9cfc;
		padding: 0 8px;
		border-radius: 4px;
		color: #fff;
	}
}
</style>