<template>
  <ChatInputMenuButtonVue
    @click="input && input.click()"
    label="图片/视频"
    :iconUrl="iconUrl"
  />

  <input
    v-show="false"
    ref="input"
    name="file"
    type="file"
    accept="video/*, image/*"
    @change="receiveImage"
  />
</template>

<script lang="ts">
import { defineComponent, nextTick, reactive, ref } from "vue";
import iconUrl from "@/assets/input_menu_album.png";
import ChatInputMenuButtonVue from "@/views/Chat/ChatInputMenuButton.vue";
import { messageStore } from "@/store/messagesStore";
import { ChatMessageTypes } from "@/types/chatMessageTypes";
import compress from "@/utils/compressor";
import { Toast } from "vant";
import { useRoute } from "vue-router";

export default defineComponent({
  components: { ChatInputMenuButtonVue },

  setup() {
    const input = ref<HTMLInputElement | null>(null);

    const route = useRoute();
    // const target = computed<string>(()=>{
    //     return route.query.targetId as string;
    // })

    const receiveImage = async (e: Event) => {
      const input = e.target as HTMLInputElement;
      const file = input.files && input.files[0];
      if (!file) return;

      // 接收图片
      if (file.name.match(/(.jpg$)|(.gif$)|(.jpeg$)|(.png$)/i)) {
        const compressedFile = await compress(file);

        // 利用 Image 获取尺寸
        const img = new Image();
        img.src = URL.createObjectURL(compressedFile);

        img.onload = () => {
          if (!compressedFile) return;

          const imageMessageContent = reactive({
            mediaUrl: "",
            height: img.height,
            width: img.width,
            rawMessage: compressedFile,
          });

          messageStore.sendMessage({
            type: ChatMessageTypes.Image,
            content: imageMessageContent,
            target: route.query.targetId as string,
          });
          URL.revokeObjectURL(img.src);
        };
      }

      // 接收视频
      else if (file.name.match(/(.mp4$)|(.mov$)|(.m4a$)/i)) {
        var video = document.createElement("video");
        video.src = URL.createObjectURL(file);
        video.onloadedmetadata = () => {
          if (file.size > 104857600) {
            alert("视频文件过大，目前仅支持发送 100MB 以内的视频");
            return;
          }

          const videoMessageContent = reactive({
            mediaUrl: "",
            height: video.videoHeight,
            width: video.videoWidth,
            time: video.duration,
            rawMessage: file,
          });

          messageStore.sendMessage({
            type: ChatMessageTypes.Video,
            content: videoMessageContent,
            target: route.query.targetId as string,
          });
          URL.revokeObjectURL(video.src);
        };
      } else {
        nextTick(() => {
          Toast.fail("未能识别的文件类型");
        });
        throw "未能识别的文件类型";
      }

      input.value = ""; // 防止 image input 第二次上传同一张图片失效
    };

    return { iconUrl, input, receiveImage };
  },
});
</script>
