<template>
    <!-- htmlcs-disable -->
    <view class="image-collect c-row">
        <!-- 预览 -->
        <view
            v-for="(image, index) in images"
            :key="index + image.picID"
            :style="[{
                'width': imgWidth ? imgWidth + 'rem' : '',
                'margin-left': index % lineNum > 0 ? '.08rem' : '',
            }]"
            :class="['image-collect-span', !imgWidth && (imgspan === 3 ? 'c-span3' : imgspan === 4 ? 'c-span4' : 'c-span2')]"
        >
            <view class="box">
                <view
                    class="m-icon m-icon-shanchu image-collect-remove"
                    :style="delStyle"
                    :data-picid="image.picID"
                    @tap="handleRemoveImage(index)"
                />
                <view
                    class="box-inner image-collect-image WA_LOG_OTHER"
                    :style="{
                        'background-image': 'url(' + image.icon + ')',
                    }"
                    :data-index="index"
                    @tap="handleImageClick(image)"
                />
            </view>
        </view>
        <!-- loading icon -->
        <view
            v-if="isUploading"
            :class="['image-collect-span', imgspan === 3 ? 'c-span3' : imgspan === 4 ? 'c-span4' : 'c-span2']"
        >
            <view class="box">
                <view class="image-collect-loading">&#xe611;</view>
            </view>
        </view>

        <!-- 添加图片 -->
        <view
            v-if="images.length < limit"
            :style="[{
                'width': imgWidth ? imgWidth + 'rem' : '',
                'margin-left': images.length % lineNum > 0 ? '.1rem' : '0',
            }]"
            :class="['image-collect-span', !imgWidth && (imgspan === 3 ? 'c-span3' : imgspan === 4 ? 'c-span4' : 'c-span2')]"
        >
            <view
                class="box"
                @tap="imgUpload"
            >
                <view
                    class="box-inner add-wrap"
                    :style="addStyle"
                >
                    <view class="add-img-icon">
                        <img class="add-img-icon__img" src="https://med-fe.cdn.bcebos.com/gy/pic.png">
                        <view class="c-font-normal">
                            {{ images.length }}/{{ limit }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view
            v-if="images.length === 0 && !isUploading && hasTip"
            :style="tipStyle"
            class="c-color-gray c-font-13 c-span10"
        >{{ tip }}</view>
    </view>
<!-- htmlcs-enable -->
</template>

<script>
/**
* @file 多图上传
* @author wangying51
*/
import {upload} from '../../utils/upload';
import {send} from '../../utils/log';
import * as Conf from '../../utils/conf';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        // 上传地址
        url: {
            'type': String,
            'default': Conf.apiHost + '/zhuanjia/med/api/uploadpic?vn=med'
        },
        // 是否显示提示
        hasTip: {
            'type': Boolean,
            default: true
        },
        // 上传图片提示
        tip: {
            'type': String,
            'default': '点击左侧加号上传照片'
        },
        // 限制图片张数
        limit: {
            'type': Number,
            'default': 6 // 最多6张图片
        },
        multi: {// 一次选择多张
            'type': Boolean,
            'default': false
        },
        // input名称
        inputname: {
            type: [String, Number]
        },
        tipStyle: {
            type: Object
        },
        addStyle: {
            type: Object
        },
        delStyle: {
            type: Object
        },
        // 图片展示大小
        imgspan: {
            'type': Number,
            'default': 2// c-span2
        },
        // 图片默认值
        value: {
            'type': Array,
            'default': () => []
        },
        // 图片展示宽度
        imgWidth: {
            'type': Number
        },
        // 一行展示几个图片
        lineNum: {
            type: Number,
            default: 3
        }
    },
    components: {
    },
    data() {
        return {
            // 已上传图片
            images: this.value,
            isShowScan: false,
            // 是否正在上传
            isUploading: false,
            scan: '',
            curImgs: []
        };
    },
    watch: {
        value(newVal, oldVal) {
            if (newVal.length !== oldVal.length) {
                this.images = newVal;
            }
        }
    },
    methods: {
        imgUpload() {
            if (this.isUploading) {
                return;
            }
            this.curImgs = [...this.images];
            // 当前图片已超过限制，不允许再上传
            if (this.curImgs.length >= this.limit) {
                return;
            }
            // this.images = [];
            upload({
                url: this.url,
                name: 'picFile',
                multi: this.multi,
                count: this.limit - this.curImgs.length,
                onChoose: info => {
                    this.$emit('chooseImg', info);
                    this.$emit('beforeUpload');
                    this.isUploading = true;
                    send({
                        type: 'b',
                        action: 'imageCollectUpload_chooseImg'
                    });
                },
                onPreview: info => {
                    this.$emit('previewImg', info);
                },
                onUploadSuccess: info => {
                    const resp = info.resp;
                    this.images = [...this.curImgs, resp];
                    // 超出图片最大限制进行截断
                    this.images = this.images.slice(0, this.limit);
                    this.curImgs = [...this.images];
                    this.$emit('change', {
                        images: this.images,
                        inputname: this.inputname
                    });
                    this.isUploading = false;
                    send({
                        type: 'b',
                        action: 'imageCollectUpload_success'
                    });
                },
                onUploadError: err => {
                    this.$emit('error', err);
                    this.$api.showToast({
                        title: err.toast || '上传失败或图片过大，请重试~',
                        icon: 'none'
                    });
                    this.isUploading = false;
                    send({
                        type: 'b',
                        action: 'imageCollectUpload_error'
                    });
                }
            });
            send({
                type: 'b',
                action: 'imageCollectUpload_upload'
            });
        },
        handleRemoveImage(index) {
            this.images.splice(index, 1);
            this.$emit('change', {images: this.images, inputname: this.inputname, behavior: 'remove'});
            send({
                type: 'b',
                action: 'imageCollectUpload_removeImg'
            });
        },
        handleImageClick(image) {
            let urls = this.images.map(item => item.origin);
            let current = image.origin;
            this.$api.previewImage({
                current,
                urls
            });
            send({
                type: 'b',
                action: 'imageCollectUpload_previewImg'
            });
        }
    }
};
</script>
<style lang="less" scoped>
/* csshint-disable */
.image-collect {
    position: relative;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    line-height: 0;
    font-size: 0;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.1rem;
    margin-left: 0;
    &-span {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-bottom: .08rem;
    }
    &-image {
        background-position: center center;
        background-size: cover;
        border-radius: .06rem;
    }
    .box {
        position: relative;
        width: 100%;
        padding-bottom: 100%;
        &-inner {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
    }
}

.add-wrap {
    border: 1px dotted rgb(240, 240, 240);
    background: #FCFAFA;
    border-radius: 6px;
}

.image-collect-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -.09rem;
    margin-top: -.09rem;
    display: inline-block;
    width: .18rem;
    height: .18rem;
    border: 3px solid #555;
    border-bottom-color: transparent;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: loading;
    animation: loading;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}


.add-img-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    line-height: normal;
    color: #999;
    text-align: center;
    &__img {
        width: .3rem;
    }
}

.image-collect-remove {
    position: absolute;
    font-size: .1rem;
    width: .22rem;
    height: .22rem;
    line-height: .22rem;
    text-align: center;
    top: .05rem;
    right: .08rem;
    z-index: 10;
    color: #fff;
    background: #000;
    border-radius: 100%;
}

@-webkit-keyframes loading {
    from {
        transform: rotate(0);
        -webkit-transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@keyframes loading {
    from {
        transform: rotate(0);
        -webkit-transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
</style>


