<template>
    <div class="ht-base-badge-custorm-demo">
        <ht-base-row>
            <ht-base-col span="12">
                <div class="ht-demo-count">
                    <ht-base-badge :count="count" v-if="flag">
                        <a href="#" class="ht-demo-badge"></a>
                    </ht-base-badge>
                    <ht-base-button-group>
                        <ht-base-button @click="decline" type="text" icon="LiRa_reduce1"/>
                        <ht-base-button @click="increase" type="text" icon="LiRa_add"/>
                    </ht-base-button-group>
                </div>
            </ht-base-col>
            <ht-base-col span="12">
                <ht-base-badge :dot='isShow' v-if="flags">
                    <a href="#" class="ht-demo-badge"></a>
                </ht-base-badge>
                <ht-base-switch v-model="switch1" @on-change="change" size="large" bgattributes>
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                </ht-base-switch>
            </ht-base-col>
        </ht-base-row>
        <br/>
        <ht-base-row>
            <ht-base-col span="8">
                <ht-base-badge :count="1000" overflow-count="999" bubble/>
                <ht-base-badge :count="99" bubble/>
                <ht-base-badge :count="9" bubble/>
            </ht-base-col>
            <ht-base-col span="8">
                <ht-base-badge :count="1000" overflow-count="999" bubble placement="left"/>
                <ht-base-badge :count="99" bubble placement="left"/>
                <ht-base-badge :count="9" bubble placement="left"/>
            </ht-base-col>
            <ht-base-col span="8">
                <ht-base-badge :count="1000" overflow-count="999" bubble placement="right"/>
                <ht-base-badge :count="99" bubble placement="right"/>
                <ht-base-badge :count="9" bubble placement="right"/>
            </ht-base-col>
        </ht-base-row>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseBadgeCustormDemo',
        data() {
            return {
                switch1: false,
                count: 25,
                flag: true,
                isShow: false,
                flags: true,
            }
        },
        methods: {
            change(status) {
                this.isShow = !this.isShow;
                this.$HtBaseMessage.info('开关状态：' + status);
            },
            decline() {
                this.count--;
                if (this.count < 0) {
                    this.count = 0;
                }
            },
            increase() {
                this.count++;
            }
        },
        watch: {
            count() {
                this.flag = false;
                this.$nextTick(() => {
                    this.flag = true;
                })
            },
            isShow() {
                this.flags = false;
                this.$nextTick(() => {
                    this.flags = true;
                })
            }
        }
    }
</script>
<style lang="less">
    .ht-base-badge-custorm-demo {
        .ht-demo-count {
            display: flex;
            flex-direction: column;
            width: max-content;
            .ht-base-badge {
                margin-left: 5px;
            }
            .ht-base-button-group {
                .ht-base-button {
                    margin: 0 5px;
                }
            }
        }
        .ht-demo-badge {
            width: 40px;
            height: 40px;
            background: #f2f2f2;
            display: inline-block;
        }
        .ht-base-badge {
            margin-right: 20px;
        }
    }
</style>

