<template lang="html">
<div class="upload-image-wrap" ref="uploadImage">
    <div v-if="multiple">
        <ul class="upload-image-items" v-if="currImages.length">
            <li class="upload-image-item" v-for="(item, inx) in currImages" :disabled="disabled">
                <div class="image-inner" v-resize="item"></div>
                <div class="image-after" @click.stop="deleteImage(inx)"></div>
            </li>
            <li class="upload-image-item upload-icon">
                <upload-img class="multiple" @upload-img="onUpload" @uploaded="onUploaded" @error="onUploadError">
                    <slot></slot>
                </upload-img>
            </li>
        </ul>
        <div class="upload-icon" v-else>
            <upload-img class="multiple" @upload-img="onUpload" @uploaded="onUploaded" @error="onUploadError">
                <slot></slot>
            </upload-img>
        </div>
    </div>
    <div v-else>
        <div class="upload-icon single-upload">
            <div class="single-upload-icon" v-resize="currImages">
                <span v-if="currImages">修改图片</span>
            </div>
            <div :class="{ hide: currImages != false }" class="single-upload-body">
                <upload-img class="multiple" @upload-img="onSingleUpload" @uploaded="onUploaded" @error="onUploadError">
                    <slot v-if="currImages == false"></slot>
                </upload-img>
            </div>
        </div>
    </div>
</div>
</template>

<script>
// import './webuploader'
import Resize from '@/components/Upload/utils/resizeImage'
import UploadImg from '@/components/Upload/UploadImgBox'

export default {
    data () {
        return {
            inputValue: this.value
        }
    },
    directives: {
        Resize
    },
    props: {
        value: {
            type: [Array, String]
        },
        limit: {
            type: Number
        },
        disabled: Boolean,
        multiple: Boolean
    },
    watch: {
        value (newVal) {
            this.inputValue = newVal
        }
    },
    computed: {
        currImages () {
            if (this.multiple && Array.isArray(this.inputValue)) {
                let images = [...this.inputValue]
                return images.length ? images : []
            } else {
                return this.inputValue || ''
            }
        }
    },
    methods: {
        // 上传中...
        onUpload (res) {
            if (!res.data.file_url) return
            console.log(this.inputValue)
            let content = this.inputValue.length
            let limit = Number(this.limit)
            if (limit && content >= limit) {
                this.$emit('limit', content)
            } else {
                this.inputValue.push(res.data.file_url)
                this.$emit('input', this.inputValue)
            }
        },
        onSingleUpload (res) {
            if (!res.data.file_url) return
            this.inputValue = res.data.file_url
            this.$emit('input', res.data.file_url)
        },
        // 上传完成
        onUploaded (res) {
        },

        onUploadError (error) {
            console.log(error)
        },

        deleteImage (inx) {
            this.inputValue.splice(inx, 1)
            this.$emit('input', this.inputValue)
        }
    },
    components: {
        UploadImg
    }
}
</script>

<style lang="less">
.upload-image-wrap {
    display: inline-block;
    font-size: 0;
    vertical-align: top;
    margin-top: -16px;
    .upload-image-items {
        li {
            display: inline-block;
            position: relative;
            width: 110px;
            height: 110px;
            border-radius: 3px;
            margin-top: 16px;
            margin-right: 16px;
            vertical-align: top;
            &:hover {
                .image-after {
                    display: block;
                }
            }
            .image-inner {
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-position: center center;
                background-color: #F5FBFF;
                border-radius: 4px;
                &:after {
                    content: '';
                    position: absolute;
                    top: 0px;
                    right: 0;
                    width: 30px;
                    height: 30px;
                    background: url('../../assets/image/svg/uploadSuccess.svg') 50% 50% no-repeat;
                    border-top-right-radius: 4px;
                }
            }
            .image-after {
                display: none;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgba(0, 0, 0, .5);
                border-radius: 4px;
                cursor: pointer;
                &:after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 18px;
                    height: 18px;
                    background: url('../../assets/image/svg/uploadDelete.svg') 50% 50% no-repeat;
                }
            }
            &[disabled]::before {
                position: absolute;
                width: 100%;
                height: 100%;
                content: '';
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(255, 255, 255, 0.5);
                z-index: 1;
            }
        }
    }
    .upload-icon {
        display: inline-block;
        width: 110px;
        height: 110px;
        position: relative;
        margin-top: 16px;
    }
}
.single-upload-icon {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 4px;
    overflow: hidden;
    span {
        display: inline-block;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        line-height: 25px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        background-color: rgba(0, 0, 0, .4);
        border-radius: 0 0 4px 4px;
    }
}
.single-upload-body {
    position: relative;
}
.webuploader-container.multiple {
    display: inline-block;
    overflow: hidden;
    font-size: 0;
    .webuploader-pick {
        width: 110px;
        height: 110px ;
        padding: 0;
        border-radius: 0;
        font-size: 12px;
        border-radius: 4px;
        background-color: #F5FBFF;
        border: 1px dashed #E5E5E5;
        &:after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 26px;
            height: 26px;
            background: url('../../assets/image/svg/uploadIcon.svg') 50% 50% no-repeat;
        }
    }
    .webuploader-pick-hover {
        border: 1px dashed #5CAEDC;
    }
}
.hide {
    .webuploader-pick {
        opacity: 0;
    }
    .webuploader-pick-hover {
        border: none;
    }
}
</style>