<template>
    <el-upload
        accept="doc, docx, xls, xlsx, ppt, pptx, pdf, txt, zip, rar, tar, jpg, png, gif, jpeg, webp, wmv, avi, mpg, mpeg, 3gp, mov, mp4, flv, f4v, rmvb, mkv"
        class="upload-demo" :show-file-list="false" aria-hidden="true" :headers="{ Token: userStore?.token }"
        :action="base_url + '/upload/file'" :on-success="handleAvatarSuccess" ref="upload" :limit="5" multiple>
        <el-button type="primary">
            上传
        </el-button>
    </el-upload>

    <div v-for="(item, index) in formData[value]" class="ml-5 flex ">
        <el-link :href="item.uri" type="primary" target="_blank"> {{ item.name }}</el-link>
        <span class="ml-2 cursor-pointer" @click="delFile(index)">x</span>
    </div>
</template>
<script setup lang="ts">
import { ref, defineProps } from "vue"
import configs from "@/config"
import useUserStore from "@/stores/modules/user";

const userStore = useUserStore();
const base_url = ref(configs.baseUrl + configs.urlPrefix)
const props = defineProps({
    formData: {
        type: Object,
        require: true
    },
    value: {
        type: String,
        default: 'annex'
    }
})

const handleAvatarSuccess = (response: any) => {

    props.formData[props.value] ||= []
    // @ts-ignore
    response.code != 0 ? props.formData[props.value].push({ uri: response.data.uri, name: response.data.name }) : ElMessage.error(response.msg);
};

// 删除上传的文件
const delFile = (index: number) => { props.formData[props.value].splice(index, 1) }

</script>