<template>
	<view>
		<view>
			<view class="chat_footer">
				<view class="input_content">
					<CustomEditor class="custom_editor" ref="customEditor" @ready="editorReady" @focus="editorFocus"
						@blur="editorBlur" @input="editorInput" />
				</view>

				<view class="footer_action_area">
					<image v-show="!hasContent" @click.prevent="updateActionBar"
						src="@/static/images/chating_footer_add.png" alt="" srcset="" />
					<image v-show="hasContent" @touchend.prevent="sendTextMessage" src="@/static/images/send_btn.png"
						alt="" srcset="" />
				</view>
			</view>
			<chating-action-bar @sendMessage="sendMessage" @prepareMediaMessage="prepareMediaMessage"
				v-show="actionBarVisible" />
			<u-action-sheet :safeAreaInsetBottom="true" round="12" :actions="actionSheetMenu" @select="selectClick"
				:closeOnClickOverlay="true" :closeOnClickAction="true" :show="showActionSheet"
				@close="showActionSheet = false">
			</u-action-sheet>
		</view>
	</view>
</template>

<script>
	import {mapGetters,mapActions} from "vuex";
	import {getPurePath,html2Text} from "@/util/common";
	import {offlinePushInfo} from "@/util/imCommon";
	import {ChatingFooterActionTypes,UpdateMessageTypes,} from "@/constant";
	import IMSDK, {IMMethods,MessageStatus,MessageType,} from "openim-uniapp-polyfill";
	import UParse from "@/components/gaoyia-parse/parse.vue";
	import CustomEditor from "./CustomEditor.vue";
	import ChatingActionBar from "./ChatingActionBar.vue";

	const needClearTypes = [MessageType.TextMessage];

	const rtcChoose = [
		{
			name: "视频通话",
			type: ChatingFooterActionTypes.Video,
			idx: 0,
		},
		{
			name: "语言通话",
			type: ChatingFooterActionTypes.Voice,
			idx: 1,
		},
	];

	export default {
		components: {
			CustomEditor,
			ChatingActionBar,
			UParse,
		},
		props: {
			footerOutsideFlag: Number,
		},
		data() {
			return {
				customEditorCtx: null,
				inputHtml: "",
				actionBarVisible: false,
				isInputFocus: false,
				actionSheetMenu: [],
				showActionSheet: false,
			};
		},
		computed: {
			...mapGetters([
				"storeCurrentConversation",
				"storeCurrentGroup",
				"storeBlackList",
			]),
			hasContent() {
				return html2Text(this.inputHtml) !== "";
			},
		},
		watch: {
			footerOutsideFlag(newVal) {
				this.onClickActionBarOutside();
			},
		},
		mounted() {
			this.setKeyboardListener();
		},
		beforeDestroy() {
			this.disposeKeyboardListener();
		},
		methods: {
			...mapActions("message", ["pushNewMessage", "updateOneMessage"]),
			async createTextMessage() {
				let message = "";
				const text = html2Text(this.inputHtml);
				message = await IMSDK.asyncApi(
					IMMethods.CreateTextMessage,
					IMSDK.uuid(),
					text
				);
				console.log(message);
				return message;
			},
			async sendTextMessage() {
				if (!this.hasContent) return;
				const message = await this.createTextMessage();
				this.sendMessage(message);
			},
			sendMessage(message) {
				this.pushNewMessage(message);
				if (needClearTypes.includes(message.contentType)) {
					this.customEditorCtx.clear();
				}
				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}) => {
						uni.$u.toast(errMsg);
						this.updateOneMessage({
							message: data,
							type: UpdateMessageTypes.KeyWords,
							keyWords: [
								{
									key: "status",
									value: MessageStatus.Failed,
								},
								{
									key: "errCode",
									value: errCode,
								},
							],
						});
					});
			},

			// action
			onClickActionBarOutside() {
				if (this.actionBarVisible) {
					this.actionBarVisible = false;
				}
			},
			updateActionBar() {
				this.actionBarVisible = !this.actionBarVisible;
			},
			editorReady(e) {
				this.customEditorCtx = e.context;
				this.customEditorCtx.clear();
			},
			editorFocus() {
				this.isInputFocus = true;
				this.$emit("scrollToBottom");
			},
			editorBlur() {
				this.isInputFocus = false;
			},
			editorInput(e) {
				this.inputHtml = e.detail.html;
			},
			prepareMediaMessage(type) {
				console.log(type)
				if (type === ChatingFooterActionTypes.Video) {
					this.actionSheetMenu = [...rtcChoose];
					this.showActionSheet = true;
				}
				if (type === ChatingFooterActionTypes.Album) {
					this.chooseOrShotImage(["album"]).then((paths) =>
						this.batchCreateImageMesage(paths)
					);
				}
				if (type === ChatingFooterActionTypes.Camera) {
					this.chooseOrShotImage(["camera"]).then((paths) =>
						this.batchCreateImageMesage(paths)
					);
				}
				if (type === ChatingFooterActionTypes.Location) {
					uni.chooseLocation({
						complete(res) {
							console.log(res);
						},
						fail(res) {
							console.log(res);
						}
						//latitude:1,
						//longitude:1,
					})
				}
			},

			// from comp
			batchCreateImageMesage(paths) {
				/*
				createAdvancedTextMessage
				createTextAtMessage
				createLocationMessage
				createTextMessage
				createCustomMessage
				createQuoteMessage
				createAdvancedQuoteMessage
				createCardMessage
				createImageMessage
				createImageMessage
				createImageMessageByURL
				createSoundMessage
				createSoundMessageFromFullPath
				createSoundMessageByURL
				createVideoMessage
				createVideoMessageFromFullPath
				createVideoMessageByURL
				createFileMessage
				createFileMessageFromFullPath
				createFileMessageByURL
				createMergerMessage
				createFaceMessage
				createForwardMessage
				*/
				paths.forEach(async (path) => {
					const message = await IMSDK.asyncApi(
						IMMethods.CreateImageMessageFromFullPath,
						IMSDK.uuid(),
						getPurePath(path)
					);
					this.sendMessage(message);
				});
			},
			selectClick({idx}) {
				if (idx === 0) {
					uni.$u.toast('根据相关政策,暂时禁用视频通话');
					//发送视频通话
					// this.chooseOrShotImage(["album"]).then((paths) =>
					// 	this.batchCreateImageMesage(paths)
					// );
				} else {
					uni.$u.toast('根据相关政策,暂时禁用音频通话');
					//发送音频通话
					// this.chooseOrShotImage(["camera"]).then((paths) =>
					// 	this.batchCreateImageMesage(paths)
					// );
				}
			},
			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);
						},
					});
				});
			},

			// keyboard
			keyboardChangeHander({height}) {
				if (height > 0) {
					if (this.actionBarVisible) {
						this.actionBarVisible = false;
					}
				}
			},
			setKeyboardListener() {
				uni.onKeyboardHeightChange(this.keyboardChangeHander);
			},
			disposeKeyboardListener() {
				uni.offKeyboardHeightChange(this.keyboardChangeHander);
			},
		},
	};
</script>

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

	.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;

			.record_btn {
				// background-color: #3c9cff;
				background: #fff;
				color: black;
				height: 30px;
				font-size: 24rpx;
			}
		}

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

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

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