<template>
    <div :class="bem()">
        <div :class="bem('title')">您想要了解:</div>
        <div :class="bem('list')">
            <div
                v-for="cell in list"
                :key="cell.id"
                :class="bem('cell', { active:  cell.id === value})"
                @click="() => onChange(cell.id)"
            >
                {{cell.title}}
            </div>
        </div>
        <div :class="bem('footer')">
            <slot>
                <Udesk :config="udeskConfig">
                    <Button :class="bem('udesk-btn')" slot-scope="props">
                        <Badge :value="unread ? props.unread : 0" :dotStyle="{top: '-2px', right: '4px'}">
                            在线客服
                        </Badge>
                    </Button>
                </Udesk>
            </slot>
        </div>
    </div>
</template>

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

export default {
    name: createComponentName('editor-help-menu-bar'),
    components: {
        Button,
        Udesk,
        Badge,
    },
    mixins: [componentMixin],
    model: {
        name: 'value',
        event: 'change',
    },
    props: {
        value: {
            type: Number,

        },
        // 展示未读消息
        unread: {
            type: Boolean,
            default: false,
        },
        list: {
            type: Array,
            default: () => [],
        },
        // udesk 配置
        udeskConfig: {
            type: Object,
            default: () => ({}),
        }
    },
    methods: {
        onChange(value) {
            if (this.value === value) {
                this.$emit('change', undefined);
            }
            else {
                this.$emit('change', value);
            }
        }
    }
};
</script>

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

.@{editor-help-menu-bar} {
    width:244px;
    height:562px;
    background:rgba(249,250,252,1);
    font-size: 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;


    & &__title {
        flex: 0 0 auto;
        width: 100%;
        background: #fff;
        font-weight:500;
        color: #4d4e50;
        font-size: 16px;
        height: 68px;
        padding: 0 20px;
        line-height: 68px;
        border-bottom: 1px solid rgba(232,236,242,1);
    }

    & &__list {
        flex: 1 1 auto;
        overflow-y: auto;
        .scrollbar();
        width: 100%;
    }

    & &__cell {
        width: 100%;
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
        background: #fff;
        color:#939495;
        padding: 0 20px;
        cursor: pointer;
        border-bottom: 1px solid rgba(232,236,242,1);
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;

        &:hover,
        &--active {
            color: #1167FE;
            background: rgba(245,245,245,1);
        }
    }

    &__footer {
        flex: 0 0 auto;
        text-align: center;
        width: 100%;
        margin: 18px 0;
    }
    & &__udesk-btn {
        width:202px;
        height: 40px;
        color: #1167FE;
        border-color: #1167FE;
    }
}
</style>
