<template>
    <div :class="classes" :style="wrapStyles">
        <Notice
            v-for="notice in notices"
            :class="wrapClass + '-' + notice.renderType + '-' + notice.types"
            :key="notice.name"
            :prefix-cls="prefixCls"
            :styles="notice.styles"
            :type="notice.type"
            :content="notice.content"
            :duration="notice.duration"
            :render="notice.render"
            :has-title="notice.hasTitle"
            :withIcon="notice.withIcon"
            :closable="notice.closable"
            :name="notice.name"
            :transition-name="notice.transitionName"
            :background="notice.background"
            :msg-type="notice.msgType"
            :on-close="notice.onClose">
        </Notice>
    </div>
</template>
<script>
    import Notice from './notice.vue';

    import { transferIndex, transferIncrease } from 'view-design/src/utils/transfer-queue';

    const prefixCls = 'ivu-notification';
    const htPrefixCls = 'ht-base-notification';

    let seed = 0;
    const now = Date.now();

    function getUuid () {
        return 'ivuNotification_' + now + '_' + (seed++);
    }

    export default {
        name: 'Notification',
        components: { Notice },
        props: {
            prefixCls: {
                type: String,
                default: prefixCls
            },
            htPrefixCls: {
                type: String,
                default: htPrefixCls
            },
            renderType: {
                type: String,
            },
            styles: {
                type: Object,
                default: function () {
                    return {
                        top: '65px',
                        left: '50%'
                    };
                }
            },
            content: {
                type: String
            },
            className: {
                type: String
            }
        },
        data () {
            return {
                notices: [],
                tIndex: this.handleGetIndex()
            };
        },
        computed: {
            classes () {
                return [
                    `${this.prefixCls}`,
                    {
                        [`${this.className}`]: !!this.className
                    }
                ];
            },
            wrapStyles () {
                let styles = Object.assign({}, this.styles);
                styles['z-index'] = 1010 + this.tIndex;

                return styles;
            },
            wrapClass() {
                return [
                    `${this.htPrefixCls}`,
                ];

            },
        },
        methods: {
            add (notice) {
                const name = notice.name || getUuid();

                let _notice = Object.assign({
                    styles: {
                        right: '50%'
                    },
                    content: '',
                    duration: 1.5,
                    closable: false,
                    name: name
                }, notice);

                this.notices.push(_notice);
                this.tIndex = this.handleGetIndex();
            },
            close (name) {
                const notices = this.notices;
                for (let i = 0; i < notices.length; i++) {
                    if (notices[i].name === name) {
                        this.notices.splice(i, 1);
                        break;
                    }
                }
            },
            closeAll () {
                this.notices = [];
            },
            handleGetIndex () {
                transferIncrease();
                return transferIndex;
            },
        }
    };
</script>
