<template>
  <view class="area-input">
    <!-- 发送语音 -->
    <view class="input-container-voice">
      <image src='/static/input_voice_icon.png'></image>
    </view>
    <!-- 输入框 -->
    <textarea
      class="textarea"
      type="text"
      :placeholder="placeholder"
      cursor-spacing="65"
      confirm-type='done'
      v-model="inputMessage"
      @confirm="sendMessage"
      @touchend="handleNoHideKeyboard"
      :confirm-hold="true"
      auto-height
      :show-confirm-bar='false'
      :hold-keyboard="holdKeyboard"
      maxlength="300"
    />
    <view class="input-container-send" @click="sendMessage">
      <image src='/static/input_send_icon.png'></image>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  inputMessage: String,
  holdKeyboard: Boolean
})
const emit = defineEmits(['update:inputMessage', 'send', 'noHideKeyboard'])

const placeholder = ref('快告诉朵朵您在想什么~')
const inputMessage = ref(props.inputMessage || '')

// 保持和父组件同步
watch(() => props.inputMessage, (val) => {
  inputMessage.value = val
})

const sendMessage = () => {
  if (!inputMessage.value.trim()) return;
  emit('send', inputMessage.value)
  inputMessage.value = ''
  emit('update:inputMessage', inputMessage.value)
}

const handleNoHideKeyboard = () => {
  emit('noHideKeyboard')
}

</script>

<style scoped lang="scss">
	.area-input {
		display: flex;
		align-items: center;
		border-radius: 22px;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 20px 0px rgba(52,25,204,0.05);
		margin: 0 12px;
				
		.input-container-voice {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
			flex-shrink: 0;
			align-self: flex-end;
			
			image {
				width: 22px;
				height: 22px;
			}
		}
		
		.input-container-send {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
			flex-shrink: 0;
			align-self: flex-end;
			
			image {
				width: 28px;
				height: 28px;
			}
		}
		
		.textarea {
			flex: 1;
			max-height: 92px;
			min-height: 22px;
			font-size: 16px;
			line-height: 22px;
			margin-bottom: 2px;
			align-items: center;
		}
	}
</style>