<template>
    <view class="ut-tag-dict-wrap">
        <template v-for="(item, index) in list" :key="item.value">
            <view class="dict-item-tab" :style="itemStyle(item?.elTagClass as string)">{{ item?.label }}</view>
        </template>
    </view>
</template>
<script setup lang="ts">
const props = defineProps({
    value: {
        type: [String, Array],
        default: '',
    },
    options: {
        type: Array as () => Array<DictDataOption>,
        default: () => [],
    },
});
const list = computed(() => {
    const val = props.value;
    let arr: Array<DictDataOption> = [];
    if (Array.isArray(val)) {
        val.forEach((v) => {
            const item = props.options.find((item) => item.value === v);
            if (item) {
                arr.push(item);
            }
        });
        return arr;
    } else {
        // 值是string也可能是多个‘，’分隔
        const vals = String(val).split(',');
        vals.forEach((v) => {
            const item = props.options.find((item) => item.value === v);
            if (item) {
                arr.push(item);
            }
        });
        return arr;
    }
});
const itemStyle = (elTagClass: string) => {
    if (elTagClass) {
        const num = Number(elTagClass);
        if (!isNaN(num)) {
            return {};
        } else {
            try {
                const obj = JSON.parse(elTagClass);
                return obj;
            } catch (e) {
                // do nothing
            }
        }
    }
    return {};
};
</script>
<style lang="scss" scoped>
.ut-tag-dict-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 24rpx;

    .dict-item-tab {
        padding: 6rpx 16rpx;
        font-size: 20rpx;
        color: #333;
        background-color: #f7f7f7;
        border-radius: 18rpx;
        font-weight: 500;
    }
}
</style>
