<!-- 公共输入框组件 -->
<script setup lang="ts">
import { ref } from 'vue'
import { Button, Textarea } from 'ant-design-vue'

defineProps({
  placeholder: {
    type: String,
    default: '在此输入你想了解的内容（Shift + Enter = 换行）',
  },
})

const emit = defineEmits(['pressEnter', 'send'])

const value = ref('')

function pressEnter(event: KeyboardEvent) {
  if (event.shiftKey)
    return false
  emit('pressEnter', value.value)
  handeleSend()
}

function handeleSend() {
  emit('send', value.value)
  value.value = ''
}
</script>

<template>
  <div class="absolute right-0 bottom-5 w-full">
    <div class="relative">
      <Textarea
        v-model:value="value"
        class="pt-4 pr-34 pb-6 pl-4"
        :placeholder="placeholder"
        :auto-size="{ minRows: 3, maxRows: 8 }"
        @press-enter="pressEnter"
      >
      </Textarea>
      <Button class="w-28 absolute right-5 bottom-3" type="primary" @click="handeleSend">
        发送
      </Button>
    </div>
  </div>
</template>

<style scoped></style>
