<!-- Created by henian.xu on 2018/8/16. -->

<template>
    <div
        v-if="data"
        class="image-list-wrap"
    >
        <div class="image-list">
            <div
                class="item"
                :style="itemStyle"
                v-for="(item,index) in imgList"
                :key="index"
            >
                <div
                    class="inner"
                    :style="`background-image: url('${$options.filters.imgCropping(item,{width:thumbnailWidth})}');`"
                />
                <div
                    v-if="!noPreview"
                    class="ctrl-wrap"
                >
                    <i
                        class="icon el-icon-search"
                        @click="onPreview(item)"
                    />
                    <i
                        v-if="isDelete"
                        class="icon el-icon-delete"
                        @click="onDelete(item,index)"
                    />
                </div>
            </div>
        </div>
        <el-dialog
            :visible.sync="previewDialog.visible"
            append-to-body
        >
            <!--<img
                width="100%"
                :src="previewDialog.url"
                alt="">-->
            <div
                class="img-preview"
                :style="`background-image: url('${$options.filters.imgCropping(previewDialog.url,{width:previewWidth})}');background-size: ${backgroundSize};`"
            />
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'ImageList',
    data() {
        return {
            previewDialog: {
                visible: false,
                url: '',
            },
        };
    },
    props: {
        data: {
            type: [Array, String],
            // required: true,
            default: null,
        },
        // 当 data 为 String 时用于分割 data
        splitter: {
            type: String,
            default: ',',
        },
        itemWidth: {
            type: [Number, String],
            default: 100,
        },
        noPreview: {
            type: Boolean,
            default: false,
        },
        thumbnailWidth: {
            type: Number,
            default: 200,
        },
        previewWidth: {
            type: Number,
            default: 600,
        },
        backgroundSize: {
            type: String,
            default: 'contain',
        },
    },
    computed: {
        itemStyle() {
            const { itemWidth } = this;
            let width = itemWidth;
            if (typeof itemWidth === 'number') {
                width += 'px';
            }
            return { width, margin: this.imgList.length === 1 ? '0' : '' };
        },
        imgList() {
            const { data, splitter } = this;
            if (Array.isArray(data)) return data;
            return data.split(splitter);
        },
        isDelete() {
            return !!this.$listeners.delete;
        },
    },
    methods: {
        onPreview(file) {
            // console.log('onPreview');
            this.previewDialog = {
                visible: true,
                url: file,
            };
        },
        onDelete(item, index) {
            this.$emit('delete', { name: item, index });
        },
    },
};
</script>

<style lang="scss">
$itemWidth: 100px !default;
.image-list-wrap {
    vertical-align: middle;
}

.image-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    > .item {
        position: relative;
        width: $itemWidth;
        border: 1px solid $gray5;
        background-color: $gray3;
        border-radius: 3px;
        margin-right: $margin;
        margin-bottom: $margin;
        > .inner {
            width: 100%;
            padding-top: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        > .ctrl-wrap {
            display: none;
            /*display: flex;*/
            flex-direction: row;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
            padding: $padding;

            > .el-progress {
                > .el-progress__text {
                    color: #fff;
                }
            }
            > .icon {
                color: #fff;
                margin: 0 $margin-small;
            }
        }

        &:hover {
            > .ctrl-wrap {
                display: flex;
            }
        }
    }
    > .ELUpload {
        position: relative;
        width: $itemWidth;
        > .el-upload {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 0;
            padding: 50% 0;
            border: 1px dashed $color-border;
            border-radius: 3px;
            font-size: 20px;
        }
    }
}

.img-preview {
    height: 500px;
    background: center no-repeat;
    background-size: contain;
}
</style>
