<template>
    <div @click="showPanel" :class="bem()">
        <!-- 自定义按钮 -->
        <slot :showPanel="showPanel" :label="label" :unread="unread">
            <!-- `<gd-button rect :id="props.id">{props.label}</gd-button>` -->
            <gd-button rect>{{label}}</gd-button>
        </slot>
    </div>
</template>

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

export default {
    name: createComponentName('udesk'),
    mixins: [componentMixin],
    udesk,
    props: {
        // 默认配置 [参考](http://www.udesk.cn/doc/thirdparty/webim/#_11)
        config: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            udesk: udesk,
        };
    },
    computed: {
        label() {
            if (!this.udesk) return '';
            return this.udesk.label;
        },
        unread() {
            if (!this.udesk) return 0;
            return this.udesk.unread;
        },
    },
    watch: {
        label(v, o) {
            if (v !== o) this.$emit('label', v);
        },
        unread(v, o) {
            if (v !== o) this.$emit('unread', v);
        },
        config(c) {
            udesk.setConfig(c);
        },
    },
    mounted() {
        udesk.setConfig(this.config);
    },
    beforeDestroy() {
        this.udesk.destroy();
    },
    methods: {
        showPanel() {
            this.udesk.show();
        },
        hidePanel() {
            this.udesk.hide();
        },
    },
};
</script>
