<script setup lang="ts">
import { Promotion, Close } from '@element-plus/icons-vue'
import { imageBg } from '@/page/chat'
import { dialog } from '@/components/mj/mj-dialog'
import { $font_color } from '@/styles/variate'

defineProps<{
  loading: boolean
}>()

const emit = defineEmits<{
  (e: 'stop'): void
  (e: 'submit', content: string): void
}>()

// 输入框内容
const prompt = ref('')

function submit() {
  emit('submit', prompt.value)
  prompt.value = ''
}

function stop() {
  dialog.show({
    title: '结束回答',
    content: '是否要让AI立刻结束回答？',
    ok: () => {
      emit('stop')
    },
  })
}
</script>

<template>
  <div class="sender">
    <ImgBg :src="imageBg" />
    <ElInput
      v-model="prompt"
      class="input"
      type="textarea"
      placeholder="请输入消息..."
      :disabled="loading"
      @keyup.enter.ctrl="submit"
    />
    <div class="buttons">
      <ElButton v-if="loading" type="danger" :icon="Close" size="large" circle @click="stop" />
      <ElButton
        v-else
        :color="$font_color"
        :icon="Promotion"
        :loading="loading"
        :disabled="loading || !prompt"
        size="large"
        circle
        @click="submit"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use '@/page/chat/index.scss' as *;

$padding: 20px;
$text_h: 5vh;
$btn_r: $padding * 2;

.sender {
  padding: $padding;
  background: linear-gradient(198.1deg, #7eacfe 70.5%, #8ffdf6 96.89%);
  overflow: hidden;
  align-items: center;
  position: relative;
  display: flex;
  border-bottom-left-radius: $border_radius;
  border-bottom-right-radius: $border_radius;

  // 公共
  :deep(.el-textarea__inner) {
    resize: none;
    font-size: $font_size;
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: $border_radius;
    background-color: #ebfdff;
    height: $text_h;
    padding-top: 1vh;
    padding-left: $padding;
    padding-right: $padding * 2 + $btn_r;
  }

  .buttons {
    right: $btn_r;
    position: absolute;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
