<template>
  <div class="chat-input-area">
    <el-input
      v-model="messageInput"
      type="textarea"
      :rows="1"
      :autosize="{ minRows: 1, maxRows: 6 }"
      placeholder="请输入消息..."
      @keyup.enter.exact.prevent="handleSend"
      resize="none"
      ref="messageInputRef"
      :disabled="isDisabled"
    />
    <el-button 
      class="send-btn" 
      @click="handleSend" 
      :disabled="isDisabled || !messageInput.trim()"
      type="primary"
    >
      发送
    </el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElInput, ElButton } from 'element-plus'

const props = defineProps({
  isDisabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['send'])

const messageInput = ref('')
const messageInputRef = ref(null)
const maxRows = 6

const handleSend = () => {
  if (!messageInput.value.trim() || props.isDisabled) return
  emit('send', messageInput.value)
  messageInput.value = ''
//   messageInputRef.value.style.height = 'auto'
}

// Expose methods
defineExpose({
  focus: () => messageInputRef.value?.focus(),
  setValue: (value) => {
    if (messageInputRef.value) {
      messageInput.value = value;
      // 触发输入事件以确保值更新
      const input = messageInputRef.value.$el?.querySelector('textarea');
      if (input) {
        input.dispatchEvent(new Event('input', { bubbles: true }));
      }
    }
  }
})

const adjustTextareaHeight = () => {
  const textarea = messageInputRef.value?.$el?.querySelector('textarea')
  textarea.style.height = 'auto'
  const newHeight = Math.min(textarea.scrollHeight, maxRows * 24)
  textarea.style.height = newHeight + 'px'
}
</script>

<style lang="scss" scoped>
.chat-input-area {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: 8px;
  background-color: var(--el-bg-color);
  position: relative;
  z-index: 1;

  .el-textarea {
    flex: 1;
    
    :deep(.el-textarea__inner) {
      border-radius: 8px;
      resize: none;
      padding: 8px 12px;
      min-height: 40px !important;
      max-height: 120px;
      line-height: 24px;
      font-size: 14px;
      
      &:disabled {
        background-color: var(--el-input-disabled-bg);
        cursor: not-allowed;
      }
    }
  }

  .send-btn {
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 14px;
    min-width: 80px;
    flex-shrink: 0;
  }
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
  .send-btn {
    min-width: 60px;
    padding: 0 12px;
  }
}
</style> 