<template>
    <div>
        <el-upload
            :action="upload"
            :auto-upload="true"
            :multiple="true"
            :headers="headers"
            :file-list="fileList"
            :on-success="success"
            :on-error="error"
            :data="updata"
            :on-exceed="handleExceed"
            :before-upload="uploadBeforeFile"
            v-loading.fullscreen="loading"
            :disabled="disabled"
            :class="['upload', {'disable-upload': disabled}]"
        >
            <el-button size="small" type="primary" v-if="!disabled">点击上传</el-button>
            <div slot="file" slot-scope="{file}" class="flie-list-item">
                <span class="file-name"
                    ><i class="el-icon-document"></i>{{ file.name }}</span
                >
                <span class="el-upload-list__item-actions">
                    <span
                        v-if="file.isImage"
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                    >
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                        class="el-upload-list__item-download"
                        @click="handleDownload(file)"
                    >
                        <i class="el-icon-download"></i>
                    </span>
                    <span
                        v-if="!disabled"
                        class="el-upload-list__item-remove"
                        @click="handleRemove(file)"
                    >
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
        <el-dialog
            append-to-body
            :visible.sync="updialogVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            title="附件预览"
        >
            <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
    </div>
</template>

<script>
const imgType = [
    'jpg',
    'jpg',
    'JPG',
    'jpeg',
    'JPEG',
    'png',
    'PNG',
    'bmp',
    'BMP',
    'gif',
    'GIF',
]
import {mapState} from 'vuex'
// import basicData from '@/api/basicData.js'
// import req from '@/request.js'
export default {
    props: {
        dadToSon: {
            type: Object,
            default: () => {},
        },
        limit: {
            type: Number,
            default: () => 5,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            updata: {
                bizPath: this.dadToSon.bizPath,
            },
            dialogImageUrl: '',
            updialogVisible: false,
            fileList: [],
            loading: false,
            disabledBtn: false, //按钮禁用控制
        }
    },
    mounted() {
        this.dadToSon.fileList.forEach((item) => {
            let type = item.name.split('.')[1]
            item.isImage = imgType.includes(type)
            item.name = item.name || item.attachmentName || ''
            item.url = item.url || item.attachmentPath || ''
        })
        this.fileList = this.dadToSon.fileList
    },
    watch: {
        dadToSon: {
            handler: function (newVal) {
                newVal.fileList.forEach((item) => {
                    let type = item.name.split('.')[1]
                    item.isImage = imgType.includes(type)
                    item.name = item.name || item.attachmentName || ''
                    item.url = item.url || item.attachmentPath || ''
                })
                this.fileList = newVal.fileList
            },
            immediate: true,
            deep: true,
        },
    },
    created() {},
    computed: mapState({
        deleteUrl: function () {
            return (
                window.context.yhxt +
                '/bizMigrantBuildersInformation/v1/updateMigrantWorkersInformation'
            )
        },
        headers: (state) => {
            return {Authorization: `Bearer ${state.login.currentUser.token}`}
        },
        upload: function () {
            return window.context.yhxt + '/bizAccessory/v1/minioUpload'
        },
    }),
    methods: {
        handleExceed(file, fileList) {
            if (file.length > this.limit) {
                this.$message.warning(
                    `上传个数超过限制个数，最多上传${this.limit}个！！！`
                )
            }
        },
        uploadBeforeFile() {
            this.loading = true
        },
        error() {
            this.loading = false
        },
        success(response, file, fileList) {
            console.log(response, file, fileList, 'ddddddddd')
            this.loading = false
            this.$message({
                type: response.state == true ? 'success' : 'warning',
                message: response.state == true ? '上传成功' : '上传失败',
            })
            let imgList = []
            fileList.forEach((item) => {
                if (!item.id) {
                    if (item.response) {
                        imgList.push(item.response.value)
                    }
                } else {
                    imgList.push(item)
                }
            })
            this.fileList = fileList
            this.$emit('sonToDad1')
            this.$emit('sonToDad', imgList)
        },
        //删除事件
        handleRemove(file) {
            let INdex = this.fileList.findIndex((item) => {
                return item.uid == file.uid
            })
            this.fileList.splice(INdex, 1)
            let imgList = []
            this.fileList.forEach((item) => {
                if (!item.id) {
                    if (item.response) {
                        imgList.push(item.response.value)
                    }
                } else {
                    imgList.push(item)
                }
            })
            this.$emit('sonToDad', imgList)
            if (file.id) {
                // basicData.deleteEnclosureManagement(file.id).then((res) => {})
            }
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.updialogVisible = true
        },
        handleDownload(file) {
            if (file.id) {
                // req.downloadGetCopy(
                //     window.context.yhxt +
                //         `/bizAccessory/v1/minIoAllDownFile?bizPath=${this.dadToSon.bizPath}&ids=${file.id}`
                // ).then((res) => {
                //     if (res) {
                //         this.$message.success('下载成功')
                //     }
                // })
            } else {
                this.$message.info('请先保存附件')
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.flie-list-item{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
}
.file-name{
    color: #fff;
    i{
        color: #409eff;
        margin-right: 4px;
    }
}
.el-upload-list__item-actions{
    display: flex;
    gap: 10px;
    span{
        cursor: pointer;
    }
    .el-icon-delete{
        color: #f56c6c;
    }
    .el-icon-download{
        color: #409eff;
    }
    .el-icon-zoom-in{
        color: #67c23a;
    }
}
.el-upload-list__item-thumbnail {
    width: 100%;
    height: 100%;
}
::v-deep.el-upload-list__item:hover {
    background-color: rgba(64, 158, 255,0.2);
}
.disable-upload{
    ::v-deep.el-upload.el-upload--picture-card{
        cursor: not-allowed;
    }
    ::v-deep.el-upload.el-upload--text{
        display: none;
    }
}

</style>
