<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: 'goodsimg'}"
                :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>

const _ = require('lodash');

export default {
    name: 'DragFileUpload',
    props: {
        'id': {
            type: Object
        },
        'defaultFile': {
            type: String
        }
    },
    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) {
            const fileList = this.$refs.upload.fileList;

            this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            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('on-success', this.id, file);
        },
        handleError(){
            this.$Notice.error('上传失败');
            this.$emit('on-error', this.id, error);
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
            });
        },
        handleMaxSize(file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
            });
        },
        render: function() {
            this.show = false;
            this.$nextTick(() => {
                this.show = true;
            })
        }
    },
    mounted() {
        this.uploadList = this.$refs.upload.fileList;
    },
    watch: {
        defaultFile: function(newValue) {
            if (newValue) {
                this.defaultList = [{url: newValue}];
                this.render();
            }
        }
    }
};
</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,.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,.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>