<template>
	<el-text v-if="!defaultValue[dictConfig.props.style] || defaultValue[dictConfig.props.style] === 'default'">
		{{ defaultValue[dictConfig.props.label] }}
	</el-text>
	<el-tag v-else :type="defaultValue[dictConfig.props.style]">{{ defaultValue[dictConfig.props.label] }}</el-tag>
</template>

<script setup>
import {ref, onMounted, computed} from 'vue'
import tools from "@/utils/tools"
import dictConfig from "@/config/dict"

const props = defineProps({
	value: null,
	type: {type: String, default: null},
	cacheKey: {type: String, default: ""}
})

let loading = ref(false)
let tableData = ref([])

const defaultValue = computed(() => {
	return tableData.value.find(
		item => item[dictConfig.props.value] === props.value
	) || {}
})

onMounted(() => {
	getData()
})

async function getData() {
	loading.value = true;
	const cacheKey = genCacheKey()
	if (cacheKey) {
		const data = tools.data.get(cacheKey)
		if (data) {
			tableData.value = data
			loading.value = false
			return
		}
	}
	const res = await dictConfig.api({key: props.type});
	tableData.value = res.data;
	if (cacheKey && tableData.value.length > 0) {
		tools.data.set(cacheKey, res.data, 7200)
	}
	loading.value = false
}

function genCacheKey() {
	if (!props.cacheKey) {
		return null;
	}
	return `${props.cacheKey || dictConfig.api.name}:` + tools.md5(`${stableStringify({key: props.type})}`).slice(0, 8).toUpperCase()
}

function stableStringify(obj) {
	if (obj === null || typeof obj !== 'object') return String(obj)
	if (Array.isArray(obj)) {
		return `[${obj.map(stableStringify).join(',')}]`
	}
	return `{${Object.keys(obj)
		.sort()
		.map(k => `"${k}":${stableStringify(obj[k])}`)
		.join(',')}}`
}
</script>
