<template>
    <div class="vx-file-selector">
        <Upload
            ref="upload"
            :show-upload-list="false"
            :on-success="handleSuccess"
            :accept="accept"
            :format="format"
            :max-size="102400"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :before-upload="handleBeforeUpload"
            :data="extraData"
            name="file"
            type="drag"
            :action="'/data-service/uploader/single/attachment?token='+$token"
        >
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>单击或拖动文件到这里上传</p>
            </div>
        </Upload>
        <div class="vx-file-selector__list" v-for="(item, index) in uploadList" :key="index">
            <template>
                <span>{{item.name}}</span>
                <!-- <div class="demo-upload-list-cover"> -->
                <Icon class="img-delete" type="md-close" @click.native="handleRemove(index)"></Icon>
                <!-- </div> -->
            </template>
        </div>
    </div>
</template>
<script>
export default {
    name: 'FileSelector',
    data() {
        return {
            uploadList: [],
            extraData: {
                tenant_id: this.$tenantId,
                parentFolder: ''
            }
        }
    },
    props: {
        prop: String,
        config: Object
    },
    computed: {
        format() {
            if (this.config.fileFormat) {
                return this.config.fileFormat.split(',')
            }
            return ['xls','xlsx','doc','docx','pdf','txt']
        },
        accept() {
            return this.config.fileAccept || '.xls,.xlsx,.doc,.docx,.pdf,.txt'
        }
    },
    components: {},
    methods: {
        /*获取数据*/
        getValue() {
            let names = this.uploadList.map(item => {
                return item.name
            }).join()
            let obj = {
                parent_folder: this.extraData.parentFolder,
            }
            obj[this.prop] = names
            return obj
        },

        formValueChange(value) {
            this.extraData.parentFolder = value.parent_folder
            this.uploadList = value[this.prop] ? value[this.prop].split(',').map(name => {
                return {
                    name
                }
            }) : []
        },

        handleRemove(index) {
            this.uploadList.splice(index, 1)
        },

        handleSuccess(res, file) {
            if (!this.extraData.parentFolder) {
                this.extraData.parentFolder = res.message
            }
            this.uploadList.push({name: file.name})
        },

        handleFormatError(file) {
            let name = this.config.fileFormat ? this.config.fileFormat : 'xls,xlsx,doc,docx,pdf,txt'
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: file.name + ' 格式不正确,只支持' + name
            })
        },
        handleMaxSize(file) {
            this.$Notice.warning({
                title: '超过文件尺寸限制',
                desc: file.name + ' 太大，超过10M.'
            })
        },
        handleBeforeUpload() {
            let len = this.config.maxLen || 10
            const check = this.uploadList.length < len
            if (!check) {
                this.$Notice.warning({
                    title: `最多上传${len}个文件`
                })
            }
            return check
        }
    },
    mounted() {
        // this.uploadList = this.$refs.upload.fileList
    }
}
</script>
<style lang="less">
.vx-file-selector {
    padding: 10px 10px 10px 20px;

    &__list {
        display: inline-block;
        width: 150px;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
        // overflow: hidden;
        background: #fff;
        position: relative;
        margin-top: 10px;

        &:hover {
            background-color: #f3f3f3;
        }

        .img-delete {
            position: absolute;
            top: -8px;
            right: -8px;
            color: #fff;
            font-size: 18px;
            background-color: #969799;
            border-radius: 100%;
            cursor: pointer;
        }
    }
}
</style>