<!-- Created by henian.xu on 2020/1/13. -->

<template>
    <div class="notification-box">
        <div
            class='inner'
            :style="styles">
            <i class="f-icon">&#xf038;</i>
            <div class="inner">
                <div
                    class="item"
                    v-for="item in data"
                    :key="item.id"
                >
                    {{ item.label }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Notification',
    data() {
        return {};
    },
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        color: {
            type: String,
            default: '',
        },
        backgroundColor: {
            type: String,
            default: '',
        },
        borderRadius: {
            type: String,
            default: '',
        },
    },
    computed: {
        styles() {
            const res = {};
            const { color, backgroundColor, borderRadius } = this;
            if (color) res.color = color;
            if (backgroundColor) res.backgroundColor = backgroundColor;
            if (borderRadius) res.borderRadius = borderRadius;
            return res;
        },
    },
};
</script>

<style lang="scss">
.notification-box {
    > .inner {
        padding: $padding;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        > .f-icon {
            flex: 0 0 auto;
            margin-right: $margin-small;
        }
        > .inner {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            overflow: hidden;
            > .item {
                padding: 0 $padding-small;
                white-space: nowrap;
            }
        }
    }
}
</style>
