<!-- td-enum 枚举 -->
<template>
    <el-table-column :label="name" :width="width" :min-width="minWidth">
        <template #default="s">
            <!-- enum 普通枚举 -->
            <template v-if="type === 'enum'">
                <template v-for="j in jvList" :key="j.key">
                    <b :style="{color: j.color || '#606266'}" v-if="s.row[prop] === j.key">{{j.value}}</b>
                </template>
            </template>
            <!-- switch 开关 -->
            <template v-if="type === 'switch'">
                <el-switch
                    v-model="s.row[prop]" 
                    v-if='jvList.length >= 2'
                    :active-value="jvList[0].key" 
                    :inactive-value="jvList[1].key"
                    :active-color="jvList[0].color || '#409EFF'" 
                    :inactive-color="jvList[1].color || '#ccc'"
                    @change="onChange(s)"
                    :before-change="beforeChange.bind(this, s)"
                >
                </el-switch>
                <template v-for="j in jvList" :key="j.key">
                    <span :style="{color: '#999'}" style="margin-left: 5px;" v-if="s.row[prop] === j.key">{{j.value}}</span>
                </template>
            </template>
        </template>
    </el-table-column>
</template>

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

defineProps({
    // 类型 
    type: {
        default: 'enum'
    },
    // label提示文字
    name: {},
    label: {},
    // 绑定的属性  
    prop: {},
    // 宽度 
    width: {},
    // 最小宽度
    minWidth: {},
    // type=menu时，值列表    -- 形如：{1: '正常[green]', 2: '禁用[red]'}  
    jv: {default: ''},
    // 空值时显示的文字
    not: {default: '无'}
})

// 解析的枚举列表 
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
        })
    }
};

// 切换时
const onChange = function (s) {
    // console.log('change...', JSON.stringify(s.row));
    proxy.$emit('change', s);
}

// 切换前 
const beforeChange = function (s) {
    return new Promise((resolve, reject)=>{
        s.resolve = resolve;
        proxy.$emit('before-change', s);
    })
}

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


</script>

<style scoped>

</style>
