<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 { computed, 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>
