import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { getConfig, createEvent, globalMixins } from '@vxe-ui/core';
import { openPreviewImage } from './util';
import VxeImageComponent from './image';
export default {
    name: 'VxeImageGroup',
    mixins: [
        globalMixins.sizeMixin
    ],
    props: {
        urlList: [Array, String],
        showPreview: {
            type: Boolean,
            default: () => getConfig().imageGroup.showPreview
        },
        imageStyle: Object,
        zIndex: Number,
        size: {
            type: String,
            default: () => getConfig().imageGroup.size || getConfig().size
        },
        toolbarConfig: Object,
        showPrintButton: {
            type: Boolean,
            default: () => getConfig().imageGroup.showPrintButton
        },
        showDownloadButton: {
            type: Boolean,
            default: () => getConfig().imageGroup.showDownloadButton
        },
        getThumbnailUrlMethod: Function
    },
    provide() {
        const $xeImageGroup = this;
        return {
            $xeImageGroup
        };
    },
    data() {
        const xID = XEUtils.uniqueId();
        const reactData = {};
        return {
            xID,
            reactData
        };
    },
    computed: Object.assign(Object.assign({}, {}), { computeImgList() {
            const $xeImageGroup = this;
            const props = $xeImageGroup;
            const { urlList } = props;
            if (urlList) {
                return (XEUtils.isArray(urlList) ? urlList : [urlList]).map(item => {
                    if (XEUtils.isString(item)) {
                        return {
                            url: item,
                            alt: ''
                        };
                    }
                    return {
                        url: item.url,
                        alt: item.alt
                    };
                });
            }
            return [];
        },
        computeImgStyleOpts() {
            const $xeImageGroup = this;
            const props = $xeImageGroup;
            return Object.assign({}, getConfig().imageGroup.imageStyle, props.imageStyle);
        },
        computeGetThumbnailUrlMethod() {
            const $xeImageGroup = this;
            const props = $xeImageGroup;
            return props.getThumbnailUrlMethod || getConfig().imageGroup.getThumbnailUrlMethod;
        } }),
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeImageGroup = this;
            $xeImageGroup.$emit(type, createEvent(evnt, { $imageGroup: $xeImageGroup }, params));
        },
        handleClickImgEvent(evnt, params) {
            const $xeImageGroup = this;
            const props = $xeImageGroup;
            const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, zIndex } = props;
            const { url } = params;
            const imgList = $xeImageGroup.computeImgList;
            if (showPreview && url) {
                openPreviewImage({
                    activeIndex: Math.max(0, XEUtils.findIndexOf(imgList, item => item.url === url)),
                    urlList: imgList,
                    toolbarConfig,
                    showPrintButton,
                    showDownloadButton,
                    zIndex,
                    events: {
                        change(eventParams) {
                            $xeImageGroup.dispatchEvent('change', eventParams, eventParams.$event);
                        },
                        rotate(eventParams) {
                            $xeImageGroup.dispatchEvent('rotate', eventParams, eventParams.$event);
                        }
                    }
                });
            }
            $xeImageGroup.dispatchEvent('click', { url, urlList: imgList }, evnt);
        },
        //
        // Render
        //
        renderVN(h) {
            const $xeImageGroup = this;
            const imgList = $xeImageGroup.computeImgList;
            const vSize = $xeImageGroup.computeSize;
            const imgStyleOpts = $xeImageGroup.computeImgStyleOpts;
            const getThumbnailUrlMethod = $xeImageGroup.computeGetThumbnailUrlMethod;
            return h('div', {
                class: ['vxe-image-group', {
                        [`size--${vSize}`]: vSize
                    }]
            }, imgList
                ? imgList.map((item, index) => {
                    return h(VxeImageComponent, {
                        key: index,
                        props: {
                            src: item.url,
                            alt: item.alt,
                            width: imgStyleOpts.width,
                            height: imgStyleOpts.height,
                            getThumbnailUrlMethod
                        }
                    });
                })
                : []);
        }
    },
    render(h) {
        return this.renderVN(h);
    }
};
