<template>
    <Tag 
        v-for="item in filterData()"
        :key="item[_key]"
        closable
        @close="onClose(item)"
        class="comp-tag"
        :border="'none'"
        :title="item[_value]"
    >
        <span class="comp-name">
            <span class='comp-label'>{{ item[_label] }} : </span>
            <Tooltip :content="item[_value]" >
                <span class='comp-value' >{{ item[_value] }}</span>
            </Tooltip>
        </span>
    </Tag>
</template>
<script setup>
import { Tag,Tooltip } from '@king-design/vue';
import {filter,} from 'lodash-es';
const props = defineProps({
    dataList: Array,
    _key: {
        default: 'key',
        type: String,
    },
    _value: {
        default: 'value',
        type: String,
    },
    _label: {
        default: 'label',
        type: String,
    },
});
const filterData = () => {
    return filter(props.dataList,item => item[props._value])
}
const getName = (item) => {
    return `${item[props._label]}:${item[props._value]}`
}
// 接收父组件声明的方法
const emit = defineEmits(['close'])
const onClose = (val)=>{
    emit('close', val);
}
</script>
<style lang="less" scoped>
.comp-tag {
    margin-right: 8px;
    margin-bottom: 5px;
    padding: 12px 8px;
   
}
.comp-name {
    max-width: 209px;
    word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:1; 
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.comp-label {
    color: #848F9A;
    font-size: 12px;
    padding-right: 5px;
}
.comp-value {
    color: #3C4449;
    font-size: 12px;
}
</style>