<template>
    <div class="ht-base-tag-hot-demo">
        <strong :style="{ marginRight: 8 }">Categories:</strong>
        <template v-for=" tag in tags">
            <ht-base-tag :key="tag"
                         :name="tag"
                         checkable
                         color="primary"
                         :checked="selectedTags.indexOf(tag) > -1"
                         @on-change="handleChange">{{tag}}
            </ht-base-tag>
        </template>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseTagHotDemo',
        data() {
            return {
                tags: ['Movies', 'Books', 'Music', 'Sports'],
                selectedTags: [],
            }
        },
        methods: {
            handleChange(checked, name) {
                const {selectedTags} = this
                const nextSelectedTags = checked
                    ? [...selectedTags, name]
                    : selectedTags.filter(t => t !== name)
                this.$HtBaseMessage.info({
                    content:'You are interested in: '+ nextSelectedTags
                })
                this.selectedTags = nextSelectedTags
            },
        },
    }
</script>
<style>
    .ht-base-tag-hot-demo {

    }
</style>

