<template>
    <div>
        <el-upload
            action="#"
            list-type="picture-card"
            :before-upload="beforeUpload"
            :auto-upload="true"
        >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                <!-- <img class="el-upload-list__item-thumbnail" :src="imgUrl" alt /> -->
                <span class="el-upload-list__item-actions">
                    <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                    >
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                    >
                        <i class="el-icon-download"></i>
                    </span>
                    <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                    >
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="imgUrl" alt />
        </el-dialog>
    </div>
</template>


<script>
import { reqUploadImg } from "@/api/material.js";
// http://192.168.1.5:8016/files/2ceed3f6bfbfd9fc6d6c9b8c455158ec-1000.jpg  $attrs.value
// http://192.168.1.5:8016/files/v2-996be5e52e4b43d08ae6ca8cae80b0fd_r.jpg
// http://192.168.1.5:8016/files/v2-a862735c06feb9edce4369859daf5c12_r.jpg
export default {
    data() {
        return {
            dialogVisible: false,
            disabled: false
        };
    },
    props: {
        value: String
    },
    watch: {
        value(v, ov) {
            console.log(v);
        }
    },
    computed: {
        imgUrl() {
            return this.value;
        }
    },
    created() {},
    methods: {
        beforeUpload(file) {
            let formData = new FormData();
            formData.append("photo", file, encodeURIComponent(file.name));
            reqUploadImg(formData)
                .then(res => {
                    console.log(res);
                    // this.$attrs.value = res
                    // this.value = res;
                    this.$emit("on-msg", res);
                    // this.$set(this, 'value', res)
                    console.log();
                })
                .catch(err => {
                    console.log(err);
                });
            return false;
        },
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            this.imgUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        }
    }
};
</script>


<style lang="scss" scope>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
