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

<template>
    <div
        v-if="data"
        class="image-list-wrap"
    >
        <div
            class="item"
            v-for="(item,index) in imgList"
            :key="index"
        >
            <XImage
                :src="item.isVideo?item.cover:item.src"
                :width="itemWidth"
                :aspect-ratio="aspectRatio"
                :cut="cut_"
                v-bind="elImageProps"
            ></XImage>

            <div
                v-if="!noPreview"
                class="ctrl-wrap"
            >
                <i
                    class="icon el-icon-search"
                    @click="onPreview(item,index)"
                />
                <i
                    v-if="isDelete"
                    class="icon el-icon-delete"
                    @click="onDelete(item,index)"
                />
            </div>

        </div>
        <template v-if="!noPreview">
            <image-viewer
                ref="imageViewer"
                :z-index="zIndex"
                v-show="showViewer"
                :append-to-body="appendToBody"
                :on-close="closeViewer"
                :url-list="viewerImgList"
            />

            <el-dialog
                :title="$$t('vmf_video_preview', '视频预览')"
                width="50%"
                :visible.sync="videoDialog.visible"
                append-to-body
                center
            >
                <XVideo
                    v-if='videoDialog.visible'
                    :src='videoDialog.url'></XVideo>
            </el-dialog>
        </template>
    </div>
</template>

<script>
import ImageViewer from 'element-ui/packages/image/src/image-viewer';
import { Utils } from 'vmf';

let prevOverflow = '';
export default {
    name: 'ImageList',
    components: { ImageViewer },
    data() {
        return {
            showViewer: false,
            videoDialog: {
                visible: false,
                url: '',
            },
        };
    },
    props: {
        // XImage props
        fit: { type: String, default: 'cover' },
        lazy: Boolean,
        scrollContainer: {
            type: [String, HTMLElement],
            default: '',
        },
        zIndex: {
            type: Number,
            default: 2000,
        },
        // 值必须是大于 0 的数值, 设置此值后组件的 display 为 block
        aspectRatio: {
            type: Number,
            default: 1,
            validator(val) {
                return val >= 0;
            },
        },
        // 自定义属性
        data: {
            type: [Array, String],
            // required: true,
            default: null,
        },
        // 当 data 为 String 时用于分割 data
        splitter: {
            type: String,
            default: ',',
        },
        itemWidth: {
            type: [Number, String],
            default: 100,
        },
        cut: {
            type: [String, Object],
            default: '',
        },
        noPreview: {
            type: Boolean,
            default: false,
        },
        appendToBody: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        elImageProps() {
            const {
                fit,
                lazy,
                scrollContainer,
                $attrs,
                // add
            } = this;
            return {
                ...$attrs,
                fit,
                lazy,
                scrollContainer,
            };
        },
        cut_() {
            const { cut } = this;
            if (cut) return cut;
            const { itemWidth } = this;
            const width = parseFloat(itemWidth);
            return { width };
        },
        itemStyle() {
            const { itemWidth } = this;
            let width = itemWidth;
            if (typeof itemWidth === 'number') {
                width += 'px';
            }
            return { width };
        },
        imgList() {
            let { data } = this;
            if (Utils.isString(data)) data = data.split(this.splitter);
            let imgIndex = 0;
            return data.reduce((pre, cur) => {
                if (cur) {
                    const isVideo = this.isVideo(cur);
                    pre.push({
                        src: cur,
                        isVideo,
                        cover: isVideo ? `${cur}?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast` : '',
                        imgIndex,
                    });
                    if (!isVideo) imgIndex += 1;
                }
                return pre;
            }, []);
        },
        viewerImgList() {
            return this.imgList.reduce((pre, cur) => {
                if (!cur.isVideo) pre.push(cur.src);
                return pre;
            }, []);
        },
        isDelete() {
            return !!this.$listeners.delete;
        },
    },
    methods: {
        isImage(name) {
            const fileExt = (name.replace(/.+\./, '') || '').toLocaleLowerCase();
            return /jpg|jpeg|png|gif|webp/.test(fileExt);
        },
        isVideo(name) {
            const fileExt = (name.replace(/.+\./, '') || '').toLocaleLowerCase();
            return /mp4|m3u8/.test(fileExt);
        },
        onPreview(item) {
            if (this.isImage(item.src)) {
                const { imageViewer } = this.$refs;
                if (!imageViewer) return;
                // console.log('onPreview', index, imageViewer);
                console.log(item.imgIndex);
                imageViewer.index = item.imgIndex;
                prevOverflow = document.body.style.overflow;
                document.body.style.overflow = 'hidden';
                this.showViewer = true;
            } else if (this.isVideo(item.src)) {
                this.videoDialog.visible = true;
                this.videoDialog.url = item.src;
            }
        },
        closeViewer() {
            document.body.style.overflow = prevOverflow;
            this.showViewer = false;
        },
        onDelete(item, index) {
            this.$emit('delete', { name: item, index });
        },
    },
};
</script>

<style lang="scss">
.image-list-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    margin-left: -$margin-small;
    margin-right: -$margin-small;

    > .item {
        position: relative;
        margin: $margin-small;
        > .x-image {
            border: 1px solid $gray5;
            border-radius: $padding-small;
            background-color: $gray3;
            overflow: hidden;
        }

        > .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);
            border-radius: $padding-small;
            padding: $padding;

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

        &:hover {
            > .ctrl-wrap {
                display: flex;
            }
        }
    }
}
</style>
