<template>
	<span v-if="type==='text'">{{optionValue}}</span>
	<uni-tag v-else-if="values.includes(value)" :text="optionValue||''" :type="tagType" :inverted="true"></uni-tag>
	<uni-tag v-else :text="value||''" :inverted="true"></uni-tag>
</template>

<script setup>
	import {
		computed
	} from 'vue'
	const props = defineProps({
		options: Array,
		value: Number | String | Array,
		showValue: Boolean,
		separator: String,
		type: String,
	})

	const values = computed(() => {
		if (props.value === '' || props.value === null || typeof props.value === 'undefined') return [];
		return Array.isArray(props.value) ? props.value.map((item) => '' + item) : String(props.value).split(props
			.separator || ',');
	});
	const optionValue = computed(() => {
		let obj = (props.options || []).find(e => e.value === props.value)
		return obj?.label || ''
	});
	const tagType = computed(() => {
		let obj = (props.options || []).find(e => e.value === props.value)
		if (obj) {
			let type = obj.elTagType || ''
			if (['primary', 'success', 'warning', 'error'].includes(type)) {
				return type
			} else {
				if (type === 'info') {
					return 'default'
				} else {
					return 'primary'
				}
			}
		} else {
			return 'primary'
		}
	})
</script>


<style scoped lang="scss">
</style>