<template>
    <div class="rum-upload-filelist">
        <div v-for="(item,ind) in fileList" :key="ind" class="rum-upload-file">
            <p>{{item.name}}</p>
            <span v-if="item.percentage!=100">{{Math.floor(item.percentage)}}%</span>
            <span v-if="item.percentage==100" @click="remove(ind)">
                <rum-icon type="close-round"></rum-icon>    
            </span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        fileList: {
            type: Array
        }
    },
    methods: {
        remove(i) {
            this.$emit('remove',i)
        }
    }
}
</script>

<style lang="less">
.rum-upload-filelist {
    margin-left: 4px;
    .rum-upload-file {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #444;
        font-size: 12px;
        border-radius: 3px;
        padding: 5px 2px;
        cursor: pointer;
        &:hover {
            background: #f5f5f5;
        }
    }
}
</style>
