<template>
	<view>
		<view class="submit">
			<view class="submit-chat">
				<!-- 文本框 -->
				<uni-icons v-if="!isRecorder" @tap="onRecorderchange" type="mic" size="29" color="#333333"></uni-icons>
				<uni-icons v-else @tap="onRecorderchange" type="mic-filled" size="29" color="#333333"></uni-icons>
				<view class="onRecorder" v-if="isRecorder" @touchstart="onStart" @touchend="onEnd"
					:id="inrecord ? 'inRecorder' : ''">
					按住说话
				</view>
				<textarea v-else cursor-spacing='20' class="chat-send" :show-confirm-bar="false"
					disable-default-padding="true" placeholder="输入你想说的话" confirm-type="send" @confirm="onSend"
					v-model="msg">
				</textarea>
				<uni-icons @tap="more" type="plus" size="30" color="#333333"></uni-icons>
			</view>
			<!-- 更多 -->
			<view class="more" :class="{displaynone:!ismore}">
				<view class="more_1">
					<view class="more-list" @tap="chooseImage">
						<uni-icons type="image-filled" size="30" color="#8183F2"></uni-icons>
						<view class="more-list-title">图片</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否处于录音状态
			inrecord: {
				type: Boolean,
				default: false
			},
			// 是否处于语音状态
			isRecorder: {
				type: Boolean,
				default: false
			},
			// 全局唯一录音管理器
			record: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				msg: "",
				ismore: false, // 是否处于更多状态
			};
		},
		methods: {
			//获取高度方法
			getElementHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.submit').boundingClientRect(data => {
					this.$emit('heights', data.height);
				}).exec();
			},
			//更多功能
			more() {
				const that = this;
				that.ismore = !that.ismore;
				that.isRecorder = false
				setTimeout(() => {
					that.getElementHeight();
				}, 10)
			},
			// 切换语音 or 键盘
			onRecorderchange() {
				const that = this
				that.$emit('onRecorderchange');
			},
			// 长按开始录入语音
			onStart() {
				const that = this
				that.$emit('onStart');
			},
			// 长按结束录入语音
			onEnd() {
				const that = this
				that.$emit('onEnd');
			},
			//文字发送
			onSend() {
				const that = this;
				if (that.msg.length > 0) {
					// 0为表情和文字
					let msg = that.msg.replace(/[\r\n]/g, "");
					let mess = {
						type: 'text',
						content: msg,
						time: new Date() - 0
					}
					that.sendmessage(mess)
					that.msg = '';
				}
			},
			// 发送图片
			chooseImage() {
				const that = this;
				let serverFile = that.$config.serverFile;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: async function(res) {
						let tempFile = JSON.parse(JSON.stringify(res.tempFilePaths));
						const arr = await that.$apifile(`/applet/upload`, 'file', tempFile[0],
							'file');
						if (arr.errcode == '0') {
							let mess = {
								type: 'image',
								content: serverFile + arr.data.uri,
								time: new Date() - 0
							}
							that.sendmessage(mess)
						} else {
							uni.showToast({
								title: arr.errmsg,
								icon: 'none'
							});
						}
					}
				});
			},
			//发送
			sendmessage(msg) {
				const that = this;
				that.$emit('toSend', msg);
				that.$set(that, `ismore`, false);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.displaynone {
		display: none;
	}

	.submit-chat {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 3vw;

		.chat-send {
			width: 75vw;
			height: 35px;
			background: #F7F7F9;
			border-radius: 2vw;
			padding: 2vw;
			margin: 0 2vw;
			font-size: var(--font14Size);
			box-sizing: border-box;
		}

		.onRecorder {
			width: 75vw;
			height: 35px;
			text-align: center;
			background: #F7F7F9;
			border-radius: 2vw;
			padding: 2vw;
			margin: 0 2vw;
			font-size: var(--font14Size);
			box-sizing: border-box;
		}

		#inRecorder {
			background: #cdcdcd;
		}

	}

	.more {
		width: 100%;
		height: 450rpx;
		background: #ecedee;
		box-shadow: 0px 11rpx 0px 0px rgba(0, 0, 0, 0.1);
		bottom: env(safe-area-inset-bottom);
		padding: 8rpx;
		box-sizing: border-box;

		.more_1 {
			display: flex;
			flex-wrap: wrap;

			.more-list {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 15vw;
				margin: 2vw;
				padding: 2vw;
				background-color: #ffffff;
				border-radius: 5px;

				.more-list-title {
					margin: 1vw 0;
					font-size: 14px;
					color: rgba(39, 40, 50, 0.5);
				}
			}
		}
	}
</style>