<script setup>
    import { ref, watchEffect } from 'vue';
    import { MessagePlugin } from 'tdesign-vue-next';
    import { REQUEST_UPLOAD_FILE } from '@/config/urls';
    import auth from '@/utils/auth';

    const props = defineProps({
        modelValue: {
            type: [String, Array],
            default: '',
        },
        subject: {
            type: String,
            required: true,
        },
        multiple: {
            type: Boolean,
            default: false,
        },
    });
    const emit = defineEmits(['update:modelValue']);

    const originFile = ref([]);

    watchEffect(() => {
        if (props.multiple && props.modelValue) {
            originFile.value = [...(props.modelValue || []).map((url) => ({ name: 'image', url }))];
        } else if (props.modelValue) {
            originFile.value = [{ name: 'image', url: props.modelValue }];
        } else {
            originFile.value = [];
        }
    });

    const uploadRef = ref();

    const handleFail = () => {
        MessagePlugin.error('文件上传失败');
    };
    const handleSuccess = ({ response }) => {
        if (props.multiple) {
            const [{ data }] = response;
            const temp = [...(props.modelValue || [])];
            temp.push(data);
            emit('update:modelValue', temp);
            return;
        }
        const { data } = response;
        emit('update:modelValue', data);
    };
    const handleRemove = ({ index }) => {
        if (props.multiple) {
            const temp = [...(props.modelValue || [])];
            temp.splice(index, 1);
            emit('update:modelValue', temp);
            return;
        }
        emit('update:modelValue', '');
    };
</script>
<template>
    <t-upload
        :class="s.root"
        ref="uploadRef"
        v-model="originFile"
        :action="REQUEST_UPLOAD_FILE(subject)"
        theme="image"
        accept="image/*"
        :headers="{
            Authorization: `Bearer ${auth.getToken()}`,
        }"
        :locale="{
            triggerUploadText: {
                image: '请选择图片',
            },
        }"
        :multiple="multiple"
        @fail="handleFail"
        @success="handleSuccess"
        @remove="handleRemove"
    />
</template>

<style lang="less" module="s">
    .root {
        :global {
            .t-upload__card-name {
                display: none
            }

            .t-upload__card-image {
                width: 100%;
                height: 100%;

                .t-image {
                    object-fit: cover;
                }
            }
        }
    }
</style>
