<!-- show-enum 枚举 -->
<template>
    <el-form-item :label="name" class="c-item">
        <span v-for="j in jvList" :key="j.key">
			<b :style="{color: j.color || '#303236'}" v-if="value === j.key">{{j.value}}</b>
		</span>
    </el-form-item>
</template>

<script setup name="show-enum">
import {getCurrentInstance, onMounted, ref, watch} from "vue";
const { proxy } = getCurrentInstance();

// 形参 
defineProps({
    // 标题 
    name: {},
    // 绑定值 
    value: {},
    // type=enum时，值列表    -- 形如：{1: '正常[green]', 2: '禁用[red]'}  
    jv: {default: ''},
    // type=enum时，增加的默认项文字 
    def: {},
});

// 解析的枚举列表 
const jvList = ref([]);

// 解析枚举 
const parseJv = function(jv) {
    jv = jv || proxy.jv;
    jvList.value = [];
    for(let key in jv) {
        let value = jv[key];
        let color = '';
        // 
        if(value.indexOf('[') !== -1 && value.endsWith(']')) {
            let index = value.indexOf('[');
            color = value.substring(index + 1, value.length - 1);
            value = value.substring(0, index);
            // console.log(color + ' --- ' + value);
        }
        // 
        if(isNaN(key) === false) {
            key = parseInt(key);
        }
        // 
        jvList.value.push({
            key: key,
            value: value,
            color: color
        })
    }
};

// 初始化
onMounted(function (){
    parseJv();
});
//
// 二次变动时重新解析 
watch(() => proxy.jv, (oldVal, newVal) => {
    if(JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
        parseJv();
    }
})


</script>

<style scoped>

</style>
