import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { getConfig, createEvent, globalMixins } from '../../ui';
import { toCssUnit } from '../../ui/src/dom';
import { openPreviewImage } from './util';
export default {
    name: 'VxeImage',
    mixins: [
        globalMixins.sizeMixin
    ],
    props: {
        src: [String, Array],
        alt: [String, Number],
        loading: String,
        title: [String, Number],
        width: [String, Number],
        height: [String, Number],
        circle: Boolean,
        zIndex: Number,
        maskClosable: {
            type: Boolean,
            default: () => getConfig().image.maskClosable
        },
        toolbarConfig: Object,
        showPreview: {
            type: Boolean,
            default: () => getConfig().image.showPreview
        },
        showPrintButton: {
            type: Boolean,
            default: () => getConfig().image.showPrintButton
        },
        showDownloadButton: {
            type: Boolean,
            default: () => getConfig().image.showDownloadButton
        },
        size: {
            type: String,
            default: () => getConfig().image.size || getConfig().size
        },
        getThumbnailUrlMethod: Function
    },
    data() {
        const reactData = {};
        return {
            xID: XEUtils.uniqueId(),
            reactData
        };
    },
    computed: Object.assign(Object.assign({}, {}), { computeImgStyle() {
            const $xeImage = this;
            const props = $xeImage;
            const { width, height } = props;
            const style = {};
            if (width && height) {
                style.maxWidth = toCssUnit(width);
                style.maxHeight = toCssUnit(height);
            }
            else {
                if (width) {
                    style.width = toCssUnit(width);
                }
                if (height) {
                    style.height = toCssUnit(height);
                }
            }
            return style;
        },
        computeImgList() {
            const $xeImage = this;
            const props = $xeImage;
            const { src } = props;
            if (src) {
                return (XEUtils.isArray(src) ? src : [src]).map(item => {
                    if (XEUtils.isString(item)) {
                        return {
                            url: item,
                            alt: ''
                        };
                    }
                    return {
                        url: item.url,
                        alt: item.alt
                    };
                });
            }
            return [];
        },
        computeImgItem() {
            const $xeImage = this;
            const imgList = $xeImage.computeImgList;
            return imgList[0];
        },
        computeImgUrl() {
            const $xeImage = this;
            const imgItem = $xeImage.computeImgItem;
            return imgItem ? `${imgItem.url || ''}` : '';
        },
        computeImgThumbnailUrl() {
            const $xeImage = this;
            const props = $xeImage;
            const getThumbnailUrlFn = props.getThumbnailUrlMethod || getConfig().image.getThumbnailUrlMethod;
            const imgUrl = $xeImage.computeImgUrl;
            return getThumbnailUrlFn ? getThumbnailUrlFn({ url: imgUrl, $image: $xeImage }) : '';
        } }),
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeImage = this;
            $xeImage.$emit(type, createEvent(evnt, { $image: $xeImage }, params));
        },
        clickEvent(evnt) {
            const $xeImage = this;
            const props = $xeImage;
            const $xeImageGroup = $xeImage.$xeImageGroup;
            const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, maskClosable, zIndex } = props;
            const imgList = $xeImage.computeImgList;
            const imgUrl = $xeImage.computeImgUrl;
            if ($xeImageGroup) {
                $xeImageGroup.handleClickImgEvent(evnt, { url: imgUrl });
            }
            else {
                if (showPreview && imgUrl) {
                    openPreviewImage({
                        urlList: imgList,
                        toolbarConfig,
                        showPrintButton,
                        showDownloadButton,
                        maskClosable,
                        zIndex,
                        events: {
                            change(eventParams) {
                                $xeImage.dispatchEvent('change', eventParams, eventParams.$event);
                            },
                            rotate(eventParams) {
                                $xeImage.dispatchEvent('rotate', eventParams, eventParams.$event);
                            }
                        }
                    });
                }
                $xeImage.dispatchEvent('click', { url: imgUrl }, evnt);
            }
        },
        //
        // Render
        //
        renderVN(h) {
            const $xeImage = this;
            const props = $xeImage;
            const { alt, loading, circle } = props;
            const imgStyle = $xeImage.computeImgStyle;
            const imgUrl = $xeImage.computeImgUrl;
            const imgThumbnailUrl = $xeImage.computeImgThumbnailUrl;
            const vSize = $xeImage.computeSize;
            return h('img', {
                ref: 'refElem',
                class: ['vxe-image', {
                        [`size--${vSize}`]: vSize,
                        'is--circle': circle
                    }],
                style: imgStyle,
                attrs: {
                    src: imgThumbnailUrl || imgUrl,
                    alt,
                    loading
                },
                on: {
                    click: $xeImage.clickEvent
                }
            });
        }
    },
    render(h) {
        return this.renderVN(h);
    }
};
