<template>
    <view class="text-tag-container">
        <view v-for="(item, index) in localTags" :key="index" class="tag-item" :style="getTagItemStyle(item)">
            <text class="tag-text" :style="getTagTextStyle(item)">{{ item[labelColumn] }}</text>

            <u-icon v-if="showClose" name="close" color="#666666" size="14" @click="handleRemove(index)" />
        </view>
    </view>
</template>

<script>
export default {
    name: 'TextTag',
    props: {
        tags: {
            type: Array,
            default: () => []
        },
        showClose: {
            type: Boolean,
            default: true
        },
        labelColumn: {
            type: String,
            default: 'label'
        },
        // 全局tag-item样式配置
        tagItemStyle: {
            type: Object,
            default: () => ({})
        },
        // 全局tag-text样式配置
        tagTextStyle: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            localTags: [...this.tags]
        };
    },
    watch: {
        tags(newVal) {
            
            this.localTags = [...newVal];
        }
    },
    methods: {
        handleRemove(index) {
            this.localTags.splice(index, 1);
            this.$emit('remove', [...this.localTags]);
         
        },
        // 获取tag-item样式
        getTagItemStyle(item) {
            const baseStyle = {
                display: 'flex',
                alignItems: 'center',
                padding: '4px 12px',
                backgroundColor: '#f0f0f0',
                borderRadius: '16px',
                fontSize: '14px'
            };
            
            // 合并全局样式和item中的样式
            const mergedStyle = {
                ...baseStyle,
                ...this.tagItemStyle,
                ...(item.tagItemStyle || {})
            };
            
            return mergedStyle;
        },
        // 获取tag-text样式
        getTagTextStyle(item) {
            const baseStyle = {
                marginRight: '8px'
            };
            
            // 合并全局样式和item中的样式
            const mergedStyle = {
                ...baseStyle,
                ...this.tagTextStyle,
                ...(item.tagTextStyle || {})
            };
            
            return mergedStyle;
        }
    }
};
</script>

<style scoped>
.text-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-item {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    background-color: #f0f0f0;
    border-radius: 16px;
    font-size: 14px;
}

.tag-text {
    margin-right: 8px;
}
</style>