<template>
  <section class="chatInput">
    <!--todo 第二阶段接入音频-->
    <el-input type="textarea" placeholder="请输入你想问的内容" class="inputs" maxlength="2048" rows="2" v-model="text"
              @change="v=>$emit('update:modelValue',v)" @keydown.enter.native="handleShortKey"/>
  </section>
</template>

<script>
export default {
  name: "chatInput",
  props: {
    modelValue: {default: null}
  },
  emits: ['update:modelValue'],
  data() {
    return {
      text: ""
    }
  },
  watch: {
    modelValue(v) {
      this.text != v && (this.text = v)
    }
  },
  methods: {
    handleShortKey(e) {
      if (e.keyCode == 13) {
        this.$emit('update:modelValue', this.text)
        this.text = ""
        this.$emit('enter')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chatInput {
  z-index: 202305121621;
  min-height: 50px;
  max-height: 400px;
  max-width: 100%;
  min-width: 45%;

  :deep(.inputs) {
    textarea {
      background-color: rgb(66, 70, 86);
      color: white;
      border-color: #999;

      &:focus {
        outline: none;
      }
    }
  }
}
</style>
