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';
function createInternalData() {
    return {
    // dgTime: 0,
    // mdTime: 0
    };
}
function createReactData() {
    return {};
}
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],
        minWidth: [String, Number],
        minHeight: [String, Number],
        maxWidth: [String, Number],
        maxHeight: [String, Number],
        circle: Boolean,
        draggable: {
            type: Boolean,
            default: () => getConfig().image.draggable
        },
        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 = createReactData();
        return Object.assign(Object.assign({}, {}), { xID: XEUtils.uniqueId(), reactData });
    },
    computed: Object.assign(Object.assign({}, {}), { computeWrapperStyle() {
            const $xeImage = this;
            const props = $xeImage;
            const { width, height, circle } = props;
            const stys = {};
            if (circle) {
                // 圆形只能生效一个
                if (width) {
                    stys.height = toCssUnit(width);
                }
                else if (height) {
                    stys.width = toCssUnit(height);
                }
            }
            else {
                if (width) {
                    stys.width = toCssUnit(width);
                }
                if (height) {
                    stys.height = toCssUnit(height);
                }
            }
            return stys;
        },
        computeImgStyle() {
            const $xeImage = this;
            const props = $xeImage;
            const { width, height, minWidth, minHeight, maxHeight, maxWidth } = props;
            const stys = {};
            if (width && height) {
                stys.maxWidth = toCssUnit(width);
                stys.maxHeight = toCssUnit(height);
            }
            else {
                if (width) {
                    stys.width = toCssUnit(width);
                }
                if (height) {
                    stys.height = toCssUnit(height);
                }
                if (minWidth) {
                    stys.minWidth = toCssUnit(minWidth);
                }
                if (minHeight) {
                    stys.minHeight = toCssUnit(minHeight);
                }
                if (maxWidth) {
                    stys.maxWidth = toCssUnit(maxWidth);
                }
                if (maxHeight) {
                    stys.maxHeight = toCssUnit(maxHeight);
                }
            }
            return stys;
        },
        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 internalData = $xeImage.internalData;
            const $xeImageGroup = $xeImage.$xeImageGroup;
            const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, maskClosable, zIndex } = props;
            const { mdTime, dgTime } = internalData;
            if (mdTime && dgTime && dgTime > mdTime) {
                return;
            }
            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);
            }
        },
        mousedownEvent() {
            const $xeImage = this;
            const internalData = $xeImage.internalData;
            internalData.mdTime = Date.now();
        },
        handleDragstartEvent(evnt) {
            const $xeImage = this;
            const internalData = $xeImage.internalData;
            internalData.dgTime = Date.now();
            $xeImage.dispatchEvent('dragstart', {}, evnt);
        },
        handleDragEvent(evnt) {
            const $xeImage = this;
            $xeImage.dispatchEvent(evnt.type, {}, evnt);
        },
        //
        // Render
        //
        renderVN(h) {
            const $xeImage = this;
            const props = $xeImage;
            const { alt, loading, circle, draggable } = props;
            const wrapperStyle = $xeImage.computeWrapperStyle;
            const imgStyle = $xeImage.computeImgStyle;
            const imgUrl = $xeImage.computeImgUrl;
            const imgThumbnailUrl = $xeImage.computeImgThumbnailUrl;
            const vSize = $xeImage.computeSize;
            let imgDrag;
            if (!XEUtils.eqNull(draggable)) {
                imgDrag = !!(draggable === true || draggable === 'true');
            }
            return h('div', {
                class: ['vxe-image', {
                        [`size--${vSize}`]: vSize,
                        'is--circle': circle
                    }],
                style: wrapperStyle
            }, [
                h('img', {
                    ref: 'refElem',
                    class: 'vxe-image-img',
                    style: imgStyle,
                    attrs: {
                        src: imgThumbnailUrl || imgUrl,
                        alt,
                        loading,
                        draggable: imgDrag
                    },
                    on: {
                        mousedown: $xeImage.mousedownEvent,
                        click: $xeImage.clickEvent,
                        dragstart: $xeImage.handleDragstartEvent,
                        drag: $xeImage.handleDragEvent,
                        dragend: $xeImage.handleDragEvent
                    }
                })
            ]);
        }
    },
    created() {
        const $xeImage = this;
        $xeImage.internalData = createInternalData();
    },
    beforeDestroy() {
        const $xeImage = this;
        const reactData = $xeImage.reactData;
        const internalData = $xeImage.internalData;
        XEUtils.assign(reactData, createReactData());
        XEUtils.assign(internalData, createInternalData());
    },
    render(h) {
        return this.renderVN(h);
    }
};
