import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { getConfig, createEvent, globalEvents, renderEmptyElement, globalMixins } from '../../ui';
import { toCssUnit } from '../../ui/src/dom';
export default {
    name: 'VxeNoticeBar',
    mixins: [
        globalMixins.sizeMixin
    ],
    props: {
        duration: [String, Number],
        direction: {
            type: String,
            default: () => getConfig().noticeBar.direction
        },
        speed: {
            type: String,
            default: () => getConfig().noticeBar.speed
        },
        content: String,
        vertical: Boolean,
        loop: {
            type: Boolean
        },
        size: {
            type: String,
            default: () => getConfig().noticeBar.size || getConfig().size
        }
    },
    inject: {
        $xeTabs: {
            from: '$xeTabs',
            default: null
        }
    },
    data() {
        const xID = XEUtils.uniqueId();
        const reactData = {
            animationStatus: false,
            animationDuration: 0
        };
        return {
            xID,
            reactData
        };
    },
    computed: Object.assign(Object.assign({}, {}), { computeNoticeText() {
            const $xeNoticeBar = this;
            const props = $xeNoticeBar;
            const { content } = props;
            return `${content || ''}`;
        },
        computeTabsResizeFlag() {
            const $xeNoticeBar = this;
            const $xeTabs = $xeNoticeBar.$xeTabs;
            return $xeTabs ? $xeTabs.reactData.resizeFlag : null;
        } }),
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeNoticeBar = this;
            $xeNoticeBar.$emit(type, createEvent(evnt, { $noticeBar: $xeNoticeBar }, params));
        },
        updateAnimationStyle() {
            const $xeNoticeBar = this;
            const props = $xeNoticeBar;
            const reactData = $xeNoticeBar.reactData;
            const { speed } = props;
            const contEl = this.$refs.refContentElem;
            if (contEl) {
                let sRate = 46;
                if (speed === 'fast') {
                    sRate = 118;
                }
                else if (speed === 'slow') {
                    sRate = 18;
                }
                reactData.animationDuration = Math.ceil(contEl.scrollWidth / sRate);
            }
        },
        animationStartEvent(evnt) {
            const $xeNoticeBar = this;
            const reactData = $xeNoticeBar.reactData;
            reactData.animationStatus = true;
            $xeNoticeBar.dispatchEvent('start', { status: true }, evnt);
        },
        animationEndEvent(evnt) {
            const $xeNoticeBar = this;
            const reactData = $xeNoticeBar.reactData;
            reactData.animationStatus = false;
            $xeNoticeBar.dispatchEvent('end', { status: false }, evnt);
        },
        //
        // Render
        //
        renderVN(h) {
            const $xeNoticeBar = this;
            const props = $xeNoticeBar;
            const slots = $xeNoticeBar.$scopedSlots;
            const reactData = $xeNoticeBar.reactData;
            const { vertical, duration, direction, loop } = props;
            const { animationDuration, animationStatus } = reactData;
            const vSize = $xeNoticeBar.computeSize;
            const noticeText = $xeNoticeBar.computeNoticeText;
            const defaultSlot = slots.default;
            const prefixSlot = slots.prefix;
            const suffixSlot = slots.suffix;
            return h('div', {
                ref: 'refElem',
                class: ['vxe-notice-bar', `is--${vertical ? 'vertical' : 'horizontal'}`, `dir--${direction || 'left'}`, {
                        [`size--${vSize}`]: vSize,
                        'is--loop': loop
                    }]
            }, [
                prefixSlot
                    ? h('div', {
                        class: 'vxe-notice-bar--prefix'
                    }, prefixSlot({}))
                    : renderEmptyElement($xeNoticeBar),
                h('div', {
                    class: 'vxe-notice-bar--content'
                }, [
                    h('div', {
                        ref: 'refContentElem',
                        class: 'vxe-notice-bar--inner'
                    }, [
                        h('div', {
                            class: ['vxe-notice-bar--wrapper', `is--${animationStatus ? 'progress' : 'end'}`],
                            style: {
                                animationDuration: duration ? toCssUnit(duration, 's') : `${animationDuration}s`
                            }
                        }, defaultSlot ? defaultSlot({}) : noticeText)
                    ])
                ]),
                suffixSlot
                    ? h('div', {
                        class: 'vxe-notice-bar--suffix'
                    }, suffixSlot({}))
                    : renderEmptyElement($xeNoticeBar)
            ]);
        }
    },
    watch: {
        computeTabsResizeFlag() {
            const $xeNoticeBar = this;
            $xeNoticeBar.updateAnimationStyle();
        }
    },
    mounted() {
        const $xeNoticeBar = this;
        globalEvents.on($xeNoticeBar, 'resize', $xeNoticeBar.updateAnimationStyle);
        $xeNoticeBar.updateAnimationStyle();
    },
    beforeDestroy() {
        const $xeNoticeBar = this;
        globalEvents.off($xeNoticeBar, 'resize');
    },
    render(h) {
        return this.renderVN(h);
    }
};
