<template>
    <div class="upload-file-wrap">
        <el-row :gutter="24">
            <el-col :span="span" v-if="isInCount">
                <div class="el-col-ctn-box-name">
                    <div class="el-col-upload-box-name">
                        <el-upload
                                class="el-upload-box-name"
                                ref="upload"
                                action=""
                                :accept="accept"
                                :show-file-list="false"
                                :http-request="httpRequest"
                        >
                            <div class="upload-file">
                                <i class="el-icon-plus uploader-file-icon"></i>
                                <div class="f14 color-text-secondary text-center">上传材料</div>
                            </div>
                        </el-upload>
                        <div class="f14 text-center color-text-regular line-height-30">{{uploadName}}</div>
                    </div>
                    
                </div>
            </el-col>
            <!--上传的图片预览-->
            <el-col :span="span" v-for="(item,i) in lists" :key="i" >
                <div class="el-col-ctn-box-name ">
                    <div class="el-col-upload-box-name">
                        <div class="upload-preview-box" @click="handlePreview(item)">
                            <img v-if="item.deletable && !readOnly"
                             class="upload-delete-icon" src="../assets/image/icon_close.png" alt=""
                             @click.stop.prevent="handleDelete(item, i)">
                            <div class="upload-file">
                                <el-image class="el-image-upload" :src="item.iconFrontSrc" fit="scale-down"></el-image>
                            </div>
                        </div>
                        
                        <div class="f14 text-center color-text-regular line-height-30">
                            <!-- {{showFileName ? item.fileName : uploadName}} -->
                            <el-input v-model.trim="item.fileName"
                                      size="small"
                                      clearable
                                      @change="handleChangeName(lists)"
                                      >
                            </el-input>
                        </div>
                    </div>
                    
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import projectConfig from "../services/projectConfig";
    export default {
        name: "uploadFile",
        props: {
            span: {
                // layout组件参数，每排排列几个
                type: Number,
                default: 5
            },
            accept: {
                type: String,
                default: '*',
            },
            imageHeight: {
                // 图片、上传框的高度
                type: String,
                default: ''
            },
            imageMode: {
                // 图片裁剪、缩放的模式,具体参考uni image
                type: String,
                default: 'aspectFit'
            },
            readOnly: {
                // 只读，true-是，false-否
                type: Boolean,
                default: false
            },
            
            fileList: {
                // 已上传的文件列表
                type: [Array, Object],
                default: () => {
                    return [
                        //{ url:文件地址, fileName: 文件名}
                    ]
                }
            },
            uploadName: {
                // 要上传的文件昵称
                type: String,
                default: '上传'
            },
            maxCount: {
                // 允许上传文件的最大总数
                type: Number,
                default: 1
            },
            selectCount: {
                // 每次上传时，允许用户选择的文件数量
                type: Number,
                default: 1
            },
            customUpload: {
                // 自定义上传按钮的样式
                type: Boolean,
                default: false
            },
            autoUpload: {
                // 是否自动上传
                type: Boolean,
                default: true
            },
            showFileName: {
                // 是否显示文件名
                type: Boolean,
                default: false
            },
            splitFileTitle: {
                // 是否在显示效果上分割文件、文件名
                type: Boolean,
                default: true
            },
        },
        data() {
            return {
                lists: [
                    //{url: 文件地址, fileName: 文件名, deletable: 是否可删除, readStatus: 是否显示阅读状态, iconFrontSrc: 图标样式}
                ],
                srcList: [],
            }
        },
        computed: {
            isInCount() {
                return (this.lists.length < this.maxCount) && !this.readOnly
            },
        },
        watch: {
            // 监听文件列表的变化，重新整理内部数据
            fileList: {
                immediate: true,
                handler() {
                    this.formatFileList()
                }
            },

        },
        methods: {
            formatFileList() {
                let fileList = this.fileList || []
                this.srcList = []
                fileList = JSON.parse(JSON.stringify(fileList))
                console.log('upload===========formatFileList()方法==========fileList：', fileList)
                const lists = fileList.map(item => {
                    let obj = Object.assign(item)
                    obj.deletable = typeof(obj.deletable) === 'boolean' ? obj.deletable : true
                    let text = obj.url || obj.fileName
                    obj.fileType = this.$util.getFileExtension(text)
                    // 统一显示文件对应的图标(前端图片地址)
                    obj.iconFrontSrc = this.$util.getIcon(obj)

                    // let previewUrl = `${projectConfig.fileHost}${obj.url}`
                    let previewUrl = `/mediate/minio/preview/${obj.url}`
                    if(obj.url.includes('http')){
                        previewUrl = obj.url
                    }
                    obj.previewUrl = previewUrl
                    if(this.$util.getFileType(text) === 'image') {
                        // 如果是图片，直接显示图片
                        obj.iconFrontSrc = obj.previewUrl
                    }
                    this.srcList.push(obj.iconFrontSrc)

                    obj.fileName = item.fileName
                    return obj
                });
                this.lists = lists
                console.log('uploadFile----:', this.lists)
            },
            async httpRequest(param) {
                console.log('httpRequest上传文件：',param)
                let fileType = this.$util.getFileExtension(param.file.name)
                if(this.accept !== '*' && this.accept.indexOf(fileType) === -1) {
                    this.$message.warning(`不能上传${fileType}格式的文件`)
                    return
                }

                try{
                    let formData = new FormData()
                    formData.append('file', param.file)
                     let uploadFileRes = await this.$fetchApi.uploadFile(formData);
                    // console.log(uploadFileRes)
                    let fileList = JSON.parse(JSON.stringify(this.fileList))
                    // let time = this.$util.getTimestamp()
                    // let fileType = this.$util.getFileExtension(uploadFileRes.url)
                    // let fileName = `${time}.${fileType}`
                    fileList.push({
                        url: uploadFileRes.url,
                        fileName:uploadFileRes.fileName
                    })
                    this.$emit('handleUploadFile', fileList)

                }catch (e) {
                    this.$message.error(e.msg)
                }
            },
            async handlePreview(item) {
                console.log(item)
                try {
                    let res = await this.$fetchApi.getMinioToken({objectName: item.url})
                    console.log(res)
                    window.open(`${item.previewUrl}?token=${res}`, '_target')
                }catch (e) {
                    this.$message.error(e.msg || e)
                }
            },
            handleChangeName(list){
                console.log('名字===',list)
                let listData = list.map((item,i) => {
                    return {
                        url: item.url,
                        fileName:item.fileName
                    }
                })
                this.$emit('handleUploadFile', listData)
            },
            handleDelete(item, i) {
                this.lists.splice(i, 1)
                let fileList = JSON.parse(JSON.stringify(this.fileList))
                fileList.splice(i, 1)
                this.$emit('handleUploadFile', fileList)
            }
        },
    }
</script>

<style lang="scss">
.el-col-ctn-box-name{
    width: 100%;
    height: 180px;
}
.el-col-upload-box-name{
    width: 120px;
    height: 180px;
    border-radius: 4px;
    overflow: hidden;
}
.el-upload-box-name{
    width: 100%;
    height: 120px;
    background: #F5F7FA;
    border: 1px dashed #EBEEF5;
    margin-bottom: 10px;
}
.el-col-ctn-box-name .el-upload,
.el-col-ctn-box-name .upload-file{
    width: 100% !important;
    
}
.el-col-ctn-box-name .upload-preview-box{
    position: relative;
    height: 120px;
    border: 1px dashed #EBEEF5;
    margin-bottom: 10px;
}
.el-col-ctn-box-name .upload-delete-icon{
    width: 30px;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 11111;
}
.el-col-ctn-box-name .upload-file{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px;
}
.el-col-ctn-box-name .uploader-file-icon{
    font-size: 32px;
    color: $color-text-secondary;
}
.el-col-ctn-box-name .el-image-upload{
    border-radius: 4px;
    padding: 5px;
    box-sizing: border-box;
}
.el-col-ctn-box-name .txt-center{
    height: 40px;
    line-height: 20px;
}
.line-height-30{
    line-height: 30px;
}

// .el-input__inner{
//     text-align: center;
// }
</style>