<template>
    <div v-if="show">
        <div class="upload-image-item" v-if="uploadList[0]">
            <template v-if="uploadList[0].status === 'finished' || uploadList[0].url">
                <img :src="uploadList[0].url">
                <div class="upload-image-item-cover">
                    <Icon type="ios-eye-outline" size="30" @click.native="handleView(uploadList[0].url)"></Icon>
                    <Icon type="ios-trash-outline" size="30" @click.native="handleRemove(uploadList[0])"></Icon>
                </div>
            </template>
            <template v-else>
                <Progress v-if="uploadList[0].showProgress" :percent="uploadList[0].percentage" hide-info></Progress>
            </template>
        </div>

        <Upload v-show="!uploadList[0]"
                ref="upload"
                :show-upload-list="false"
                :data="{bucket: bucket}"
                :on-success="handleSuccess"
                :on-error="handleError"
                :default-file-list="defaultList"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                type="drag"
                action="/Api/upload/image"
                style="display: inline-block;width:120px;">
            <div style="width: 120px;height:120px;line-height: 140px;">
                <Icon type="plus-round" size="50"></Icon>
            </div>
        </Upload>

        <Modal title="查看图片" v-model="visible">
            <img :src="imgUrl" v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>
<script>
import _ from 'lodash';

export default {
    name: 'drag-file-upload',
    props: {
        id: {
            type: Object
        },
        defaultFile: {
            type: String
        },
        bucket: {
            type: String,
            default() {
                return 'goodsimg';
            }
        }
    },
    data() {
        let _this = this;

        return {
            imgUrl: '',
            visible: false,
            show: true,
            uploadList: [],
            defaultList: _this.defaultFile ? [{url: _this.defaultFile}] : []
        };
    },
    methods: {
        handleView(url) {
            this.imgUrl = url;
            this.visible = true;
        },
        handleRemove(file) {
            let files = this.$refs.upload.fileList;

            this.$refs.upload.fileList.splice(files.indexOf(file), 1);
            this.uploadList = this.$refs.upload.fileList;
            this.$emit('on-remove', this.id);
        },
        handleSuccess(response, file, files) {
            if (_.get(response, 'data.imagesList.length', 0)) {
                file.url = response.data.imagesList[0];
            }

            this.uploadList = files;
            this.$emit('success', this.id, file);
        },
        handleError() {
            this.$Notice.error('上传失败');
            this.$emit('error', this.id);
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
            });
        },
        handleMaxSize(file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
            });
        }

    },
    mounted() {
        this.uploadList = this.$refs.upload.fileList;
    },
    watch: {
        defaultFile: function(newValue) {
            if (newValue) {
                this.defaultList = [{url: newValue}];
            }
        }
    }
};
</script>
<style>
.upload-image-item {
    display: inline-block;
    width: 120px;
    height: 120px;
    text-align: center;
    line-height: 120px;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
}

.upload-image-item img {
    width: 120px;
    height: 120px;
}

.upload-image-item-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
}

.upload-image-item:hover .upload-image-item-cover {
    display: block;
}

.upload-image-item-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
</style>