<template>
    <div v-if="show">
        <image-purview
            v-if="uploadList[0]"
            :status="uploadList[0].status"
            :url="uploadList[0].url"
            :progress="uploadList[0].showProgress"
            :percentage="uploadList[0].percentage"
            :remove="true"
            @remove-image="handleRemove"></image-purview>

        <div class="upload-box"  v-show="!uploadList[0]">
            <Upload 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"
                    action="/Api/upload/image">
                <Icon type="ios-cloud-upload-outline" title="上传图片"></Icon>
            </Upload>
            <Icon type="ios-cloud-outline" v-if="skn" title="调用图片服务" @click.native="browseOnline"></Icon>
        </div>

        <modal-skn-image v-model="sknImageModel" :skn="skn" @selected="selected"></modal-skn-image>
    </div>
</template>
<script>
import _ from 'lodash';

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

        return {
            imgUrl: '',
            visible: false,
            show: true,
            sknImageModel: false,
            uploadList: [],
            defaultList: _this.defaultFile ? [{url: _this.defaultFile}] : []
        };
    },
    methods: {
        handleView(url) {
            this.imgUrl = url;
            this.visible = true;
        },
        handleRemove() {
            let file = this.uploadList[0];
            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。'
            });
        },
        browseOnline() {
            this.sknImageModel = true;
        },
        selected(url) {
            this.uploadList = this.defaultList = [{url}];
            this.$emit('success', this.id, {url});
        },

    },
    mounted() {
        this.uploadList = this.$refs.upload.fileList;
    },
    watch: {
        defaultFile: function(newValue) {
            if (newValue) {
                this.defaultList = [{url: newValue}];
            }
        }
    }
};
</script>
<style lang="scss">

.upload-box {
    width: 100px;
    height: 100px;
    background: #fff;
    border: 1px dashed #dddee1;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
        border-color: #2d8cf0;
    }

    .ivu-upload {
        height: 30px;
    }

    .ivu-icon {
        font-size: 30px;
        margin: 0 2px;
        color: #000;
        transition: color 0.2s ease;

        &:hover {
            color: #2d8cf0;
        }
    }
}
</style>