<template>
	<span class="dict-tag">
		{{ labels.length > 0 ? labels.join(separator) : '' }}
	</span>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { getDicts } from '@/api/system/dict/data';

const props = defineProps({
	type: {
		type: String,
		required: true
	},
	value: {
		type: [String, Number, Array],
		required: true
	},
	separator: {
		type: String,
		default: '、' // 默认用中文顿号分隔
	}
});

const labelMap = ref({});
const labels = ref([]);

// 将 value 转换为数组
const parseValue = (val) => {
	if (Array.isArray(val)) {
		return val.map(String);
	} else if (typeof val === 'string') {
		return val.split(',').map((s) => s.trim());
	} else {
		return [String(val)];
	}
};

// 加载字典数据并生成标签列表
const loadLabels = async () => {
	try {
		const res = await getDicts(props.type);
		const map = res.data.reduce((acc, item) => {
			acc[item.dictValue] = item.dictLabel;
			return acc;
		}, {});
		labelMap.value = map;

		const codes = parseValue(props.value);
		labels.value = codes.map((code) => map[code] || '').filter(Boolean);
	} catch (e) {
		labels.value = [];
	}
};

onMounted(loadLabels);
watch(() => props.value, loadLabels); // 当 value 变化时重新加载
</script>

<style scoped></style>
