<template>
    <div class="ht-base-tag-add-local-demo">
        <template v-for="(tag, index) in tags">
            <Tooltip v-if="tag.length > 20" :key="tag" :content="tag" max-width="200">
                <ht-base-tag type="border" :key="tag" :closable="index !== 0" @on-close="handleClose">
                    {{`${tag.slice(0, 20)}...`}}
                </ht-base-tag>
            </Tooltip>
            <ht-base-tag type="border" v-else :key="tag" :closable="index !== 0" @on-close="handleClose">
                {{tag}}
            </ht-base-tag>
        </template>
        <ht-base-input
                v-if="inputVisible"
                ref="input"
                type="text"
                size="small"
                :style="{ width: '78px' }"
                :value="inputValue"
                @on-change="handleInputChange"
                @on-blur="handleInputConfirm"
                @on-keyup.enter="handleInputConfirm"
        />
        <ht-base-button v-else icon="LiRa_add" type="dashed" size="small" @click="showInput">添加标签</ht-base-button>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseTagAddLocalDemo',
        data() {
            return {
                tags: ['标签一', '标签二', '超长的标签文本，过长就会显示小气泡，超长的标签文本，过长就会显示小气泡'],
                inputVisible: false,
                inputValue: '',
            }
        },
        methods: {
            handleClose(event, name) {
                const index = this.tags.indexOf(name);
                this.tags.splice(index, 1);
            },

            showInput() {
                this.inputVisible = true
                this.$nextTick(function () {
                    this.$refs.input.focus()
                })
            },

            handleInputChange(e) {
                this.inputValue = e.target.value
            },

            handleInputConfirm() {
                const inputValue = this.inputValue
                let tags = this.tags
                if (inputValue && tags.indexOf(inputValue) === -1) {
                    tags = [...tags, inputValue]
                }
                Object.assign(this, {
                    tags,
                    inputVisible: false,
                    inputValue: '',
                })
            },
        },
    }
</script>
<style>
    .ht-base-tag-add-local-demo {

    }
</style>

