<template>
    <div>
        <div style="width: 100%; height: 20px;margin-top: 10px;">
            <p class="info">底层接入系统</p>
        </div>
        <el-upload action="action" list-type="picture-card" :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="item.imageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            item: {
                imageUrl: '',
            },
            allImageUrl: [],
        }
    },
    methods: {
        handleRemove(file, fileList) {
            let removeUrl = file.respone.data.url;
            this.allImageUrl = this.allImageUrl.filter(item => item != removeUrl);
        },
        handlePictureCardPreview(file) {
            this.item.imageUrl = file.url;
            this.dialogVisible = true;
        }
    }
}
</script>

<style lang="less" scoped>
.info {
    position: absolute;
    left: 50px;
    font-size: 20px;
}

/deep/.el-upload--picture-card {
    width: 300px;
    height: 200px;
    border: 1px solid #c0ccda;
    margin-right: 1300px;
    margin-top: 20px;
}

/deep/.el-upload--picture-card i {
    display: flex;
    padding-right: 20px;
    font-size: 50px;
    padding: 75px 120px;
}
</style>