<template>
  <div>
    <a-input
      v-model:value="content"
      size="large"
      placeholder="请输入聊天内容"
      :auto-size="{ minRows: 2, maxRows: 5 }"
    >
      <template #addonBefore>
        <a-space>
          <a-upload
            :multiple="false"
            :file-list="fileList"
            :before-upload="beforeUpload"
            @change="fileChange"
          >
            <PictureOutlined :style="{ fontSize: '25px' }" />
          </a-upload>
          <a-popover
            v-model:visible="showEmoji"
            title="表情"
            trigger="click"
            placement="topRight"
          >
            <template #content>
              <div
                style="
                  width: 500px;
                  height: 500px;
                  overflow-y: auto;
                  overflow-x: hidden;
                "
              >
                <a-row :gutter="[16, 16]">
                  <a-col
                    @click="chooseEmoji(item)"
                    v-for="(item, index) in emoji"
                    :key="index"
                    :span="2"
                  >
                    <span style="cursor: pointer">{{ item }}</span>
                  </a-col>
                </a-row>
              </div>
            </template>
            <SmileOutlined :style="{ fontSize: '25px' }" />
          </a-popover>
        </a-space>
      </template>
      <template #addonAfter>
        <a-button @click="sendMessage" @pressEnter="sendMessage" type="primary"
          >发送</a-button
        >
      </template>
    </a-input>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { PictureOutlined, SmileOutlined } from '@ant-design/icons-vue';
  import { ChatMessage } from '@/api/love/chat/model';
  import type { UploadChangeParam } from 'ant-design-vue';
  import { uploadOss } from '@/api/system/file';
  import emoji from '../emoji';

  const emit = defineEmits<{
    (e: 'send', message: ChatMessage): void;
  }>();
  const content = ref<string>('');
  const fileList = ref([]);
  const showEmoji = ref(false);
  const beforeUpload = (file) => {
    return false; // 手动上传
  };
  const fileChange = (info: UploadChangeParam) => {
    uploadOss(info.file).then((res) => {
      emit('send', {
        content: res.url,
        type: 'image'
      });
    });
  };

  const chooseEmoji = (item) => {
    content.value += item;
    showEmoji.value = false;
  };
  const sendMessage = () => {
    emit('send', {
      content: content.value,
      type: 'text'
    });
    content.value = '';
  };
</script>
<style scoped lang="less"></style>
