<template>
    <!-- 附件 -->
    <el-upload
        ref="upload"
        drag
        action
        :multiple="!listItem.verify.onlyOne"
        :http-request="upload"
        :before-remove="del"
        :class="{ disabled: listItem.verify.onlyOne && formItem.value.length }"
    >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text tip">将文件拖到此处，或<em>点击上传</em></div>
        <div class="tip" slot="tip">附件在线查看只支持图片、视频、音频、txt、word、excel、ppt、pdf</div>
    </el-upload>
</template>

<script>
import { getObjectKey } from '@/assets/utils/host.js'
import { ossUpload, ossDelete } from '@/assets/utils/ossTool.js'
import ossPaths from '@/assets/ossPaths.js'
const path = ossPaths.form
export default {
    name: 'FormFile',
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    methods: {
        findIndex (file) {
            return this.$refs.upload.uploadFiles.findIndex(item => item.uid === file.uid)
        },
        // 上传附件
        upload ({ file }) {
            this.$refs.upload.uploadFiles[this.findIndex(file)].status = 'uploading'
            ossUpload({
                path,
                file,
                realname: true,
                progress: percentage => {
                    this.$refs.upload.uploadFiles[this.findIndex(file)].percentage = percentage
                    if (percentage === 100) this.$refs.upload.uploadFiles[this.findIndex(file)].status = 'success'
                }
            }).then(res => {
                this.formItem.value.splice(this.findIndex(file), 0, JSON.stringify(res))
            })
        },
        // 删除附件
        del (file, list) {
            if (file.percentage === 100) {
                const index = list.findIndex(item => item.uid === file.uid)
                ossDelete({
                    path,
                    key: getObjectKey(this.formItem.value[index])
                }).then(res => {
                    this.formItem.value.splice(index, 1)
                })
            } else {
                this.$message('请等待上传完成')
                return false
            }
        },
        // 校验
        verify () {
            return new Promise((resolve, reject) => {
                if (this.$refs.upload.uploadFiles.every(item => item.status === 'success')) {
                    resolve()
                } else {
                    this.$message('请等待上传完成')
                    reject(new Error('请等待上传完成'))
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .el-upload {
    vertical-align: top;
    .el-upload-dragger {
        width: 200px;
        height: 100px;
        .el-icon-upload {
            font-size: 48px;
            margin-top: 10px;
            margin-bottom: 0;
            vertical-align: top;
        }
    }
}
/deep/ .el-upload-list li:first-child {
    margin-top: 0;
}
.el-upload .tip {
    font-size: 12px;
    color: #606266;
}
.disabled /deep/ .el-upload {
    display: none;
}
/deep/ .el-upload-list__item {
    transition-duration: 0.2s;
}
</style>
