<!--  -->
<template>
    <div class="metas-upload">
        <ui-input
            type="file"
            v-if="type != 'link'"
            v-show="hotData.media[type].length <= 0"
            :class="{ hide: audioInfo.length > 0 && type == 'audio' }"
            :placeholder="custom[type].uploadPlace"
            :disable="custom[type].upload"
            :scale="custom[type].scale"
            :accept="custom[type].accept"
            :multiple="custom[type].multiple"
            :maxSize="custom[type].maxSize"
            :maxLen="custom[type].maxNum"
            :othPlaceholder="custom[type].othPlaceholder"
            @update:modelValue="data => hanlderFiles(data)"
        >
        </ui-input>
        <metasWeb v-else />
        <metasImage v-if="imageList.length > 0 && type == 'image'" />
        <metasVideo v-if="videoSrc.length > 0 && type == 'video'" />
        <metasAudio v-if="audioInfo.length > 0 && type == 'audio'" />
    </div>
</template>

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, defineProps, computed, watch } from 'vue'
import { useStore } from 'vuex'
import { Loading, Dialog } from '@/global_components/'
import { custom } from './constant.js'
import metasImage from './metas/metas-image'
import metasVideo from './metas/metas-video'
import metasAudio from './metas/metas-audio'
import metasWeb from './metas/metas-web'
const store = useStore()
const imageNum = ref(0)
const props = defineProps({
    type: {
        type: String,
        default: null,
    },
})
const hotData = computed(() => store.getters['tag/hotData'])
const imageList = computed(() => {
    return hotData.value.media.image || []
})
const videoSrc = computed(() => {
    return hotData.value.media.video || []
})
const audioInfo = computed(() => {
    return hotData.value.media.audio || []
})

const hanlderFiles = data => {
    switch (props.type) {
        case 'image':
            // store.commit('tag/setImageList', data[0])
            setImageList(data[0])
            break
        case 'video':
            store.commit('tag/setVideo', data)
            break
        case 'audio':
            store.commit('tag/setAudio', data)
            break
    }
}
const setImageList = data => {
    let picLength = 0
    let list = JSON.parse(JSON.stringify(imageList.value))
    if (list.length > 0) {
        picLength = list.length
    }
    for (let i = 0; i < data.length; i++) {
        if (list.length < custom['image'].maxNum) {
            list.push('')
            var index = i + picLength
            list[index] = { src: URL.createObjectURL(data[i]), file: data[i] }
        } else {
            Dialog.toast({
                type: 'error',
                content: `${t('limit.maxLengthFile', { length: custom['image'].maxNum })}`,
            })
            break
        }
    }
    store.commit('tag/setImageList', list)
}
</script>
<style lang="scss" scoped>
.hide {
    display: none;
}
.metas-upload {
    width: 100%;
    height: 100%;
    position: relative;
    .ui-input {
        width: 100%;
        height: 100%;
    }
}
</style>
