<template>
  <view class="area-input">
    <!-- 发送语音 -->
    <view class="input-container-voice">
      <image src='/static/input_voice_icon.png'></image>
    </view>
    <!-- 输入框 -->
    <textarea
      ref="textareaRef"
      class="textarea"
      type="text"
      :placeholder="placeholder"
      cursor-spacing="65"
      confirm-type='done'
      v-model="inputMessage"
      @confirm="sendMessage"
      @focus="handleFocus"
      @blur="handleBlur"
      @touchstart="handleTouchStart"
      @touchend="handleTouchEnd"
      :confirm-hold="true"
      auto-height
      :show-confirm-bar='false'
      :hold-keyboard="holdKeyboard"
      :adjust-position="true"
      maxlength="300"
    />
    <view class="input-container-send" @click="sendMessage">
      <image v-if="props.isSessionActive" src='/static/input_stop_icon.png'></image>
      <image v-else src='/static/input_send_icon.png'></image>
    </view>
  </view>
</template>

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

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

const textareaRef = ref(null)
const placeholder = ref('快告诉朵朵您在想什么~')
const inputMessage = ref(props.inputMessage || '')
const isFocused = ref(false)
const keyboardHeight = ref(0)


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

// 监听键盘高度变化
onMounted(() => {
  // 监听键盘弹起
  uni.onKeyboardHeightChange((res) => {
    keyboardHeight.value = res.height
    if (res.height > 0) {
      emit('keyboardShow', res.height)
    } else {
      emit('keyboardHide')
    }
  })
})

const sendMessage = () => {
  if (props.isSessionActive) {
    // 如果会话进行中，调用停止请求函数
    if (props.stopRequest) {
        props.stopRequest();
    }
  } else {
    // 否则发送新消息
    if (!inputMessage.value.trim()) return;
    emit('send', inputMessage.value)
    inputMessage.value = ''
    emit('update:inputMessage', inputMessage.value)

    // 发送后保持焦点（可选）
    if (props.holdKeyboard && textareaRef.value) {
      nextTick(() => {
        textareaRef.value.focus()
      })
    }
  }
}

const handleFocus = () => {
  isFocused.value = true
  emit('noHideKeyboard')
}

const handleBlur = () => {
  isFocused.value = false
}

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

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

// 手动聚焦输入框
const focusInput = () => {
  if (textareaRef.value) {
    textareaRef.value.focus()
  }
}

// 手动失焦输入框
const blurInput = () => {
  if (textareaRef.value) {
    textareaRef.value.blur()
  }
}

// 暴露方法给父组件
defineExpose({
  focusInput,
  blurInput,
  isFocused
})

</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;
		/* 确保输入框在安全区域内 */
		margin-bottom: 8px;

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