<template>
	<view class="footer">
		<view class="footer-center">
			<input class="input-text" :placeholder="placeholder" :disabled="disabled" :maxlength="1000" type="text" v-model="inputValue"></input>
		</view>
		<view class="footer-right" @tap="sendMessge">
			<view id='msg-type'>发送</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		name: "chat-input",
		props: {
			// 状态值， 0：正常可发送信息，1：等待接收答案中
			status: {
				type: Number,
				default: 0
			},
			disabled: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: '请输入提问内容！'
			} 
		},
		data() {
			return {
				inputValue: '',
			}
		},
		
		mounted() {
			if (app.globalData.testQuestion) {
				this.inputValue = app.globalData.testQuestion
				app.globalData.testQuestion = ''
			}
		},
		methods: {
			startRecognize: function () {
				var options = {};
				var that = this;
				options.engine = 'iFly';
				that.inputValue = "";
				plus.speech.startRecognize(options, function (s) {
					console.log(s);
					that.inputValue += s;
				}, function (e) {
					console.log("语音识别失败：" + e.message);
				});
			},
			sendMessge: function () {
				if (this.status === 1) {
					return
				}
				
				var that = this;
				if (that.inputValue.trim().length <= 1) {
					wx.showToast({
						icon: 'none',
						title: '字数太少，请完善你的问题!',
						duration: 2000
					})
					return
				}
				if (that.inputValue.trim() == '') {
					that.inputValue = '';
				} else {
					//点击发送按钮时，通知父组件用户输入的内容
					this.$emit('send-message', {
						type: 'text',
						content: that.inputValue
					});
					that.inputValue = '';
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "../common/icon.css";

	.footer {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100rpx;
		min-height: 100rpx;
		overflow: hidden;
		padding: 0;
		background-color: #33373f;
		box-sizing: border-box;
	}

	.footer-right {
		width: 120rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: @mainColor;
		color: #FFF;
		border-radius:  0 8rpx 8rpx 0;
		&:active {
			background-color: lighten(@mainColor, 5%);
		}
	}
	.footer-center {
		flex: 1;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.footer-center .input-text {
		flex: 1;
		color: #FFF;
		background: #3f414e;
		border: none;
		height: 90rpx;
		padding: 0 10px !important;
		font-family: verdana !important;
		overflow: hidden;
		border-radius: 8rpx 0 0 8rpx;
	}
</style>
