<template>
    <quick-item>
        <udesk :config="config">
            <div :class="bem()"  slot-scope="{label, unread}">
                <badge :value="unread" is-dot>
                    <div :class="bem('icon')"/>
                </badge>
                <span>{{(label || '在线客服') === '在线客服' ? '客服' : '留言'}}</span>
            </div>
        </udesk>
    </quick-item>
</template>

<script>
import { componentMixin, createComponentName } from '../_utils/component';
import Udesk from '../Udesk';
import Badge from '../Badge';
import quickItem from './QuickItem';

export default {
    name: createComponentName('quick-link-chat'),
    components: {
        Udesk,
        Badge,
        quickItem,
    },
    mixins: [componentMixin],
    props: {
        // udesk 配置
        config: {
            type: Object,
            default() {
                return {};
            },
        },
    },
};
</script>

<style lang="less">
@import '../_styles/base.less';

@b: ~'@{prefix}-quick-link-chat';

.@{b} {
    padding: 0.75em 1.417em;
    position: relative;
    cursor: pointer;

    &__icon {
        width: 22px;
        height: 22px;
        background-image: url(../../assets/img/service.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    span{
        padding-top: 0.25em;
        display: block;
        white-space: nowrap;
        line-height: 15px;
    }

    &:hover{
        .@{b}__icon {
            background-image: url(../../assets/img/service-hover.png);
        }
    }
}
</style>
