<template>
    <view v-if="display.show" class="fb-list-field">
        <view v-if="fieldInfo.position === 'Title'" class="title-field">
            <view class="field-item field-label" :style="fieldInfo.showLabel? 'margin-right: 5px;' : ''">{{display.label}}</view>
            <view class="field-item field-value">{{display.text}}</view>
        </view>
        <view v-else-if="fieldInfo.position === 'Status'" class="status-field" :style="`background-color: ${display.color || '#1456F0'};`">
            <view class="field-item field-label" :style="fieldInfo.showLabel? 'margin-right: 5px;' : ''">{{display.label}}</view>
            <view class="field-item field-value">{{display.text}}</view>
        </view>
        <view v-else class="content-field">
            <view class="field-item field-label" :style="fieldInfo.showLabel? 'margin-right: 5px;' : ''">{{display.label}}</view>
            <view class="field-item field-value" :style="`color: ${display.color || '#999'};`">{{display.text}}</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import type { ListFieldInfo } from '../../types/components/list';
import { getByPaths } from '../../commons/utils/dataPath';
import { lookupStore } from '../../commons/store/lookup';

interface ListFieldItemInfo {
    fieldInfo: ListFieldInfo
    itemValue: any
}


const { fieldInfo, itemValue } = defineProps<ListFieldItemInfo>()

let getDisplayText;
let getColor: (value: any) => string | undefined = (_: any) => '';
if(fieldInfo.valueEnum && (fieldInfo.valueType === 'select' || fieldInfo.valueType === 'radio' )) {
    getDisplayText = (value:any) =>  fieldInfo.valueEnum?.[value]?.text
    getColor = (value:any) =>  fieldInfo.valueEnum?.[value]?.color
} else if(fieldInfo.valueType === 'switch' && fieldInfo.fieldProps) {
    const mappings = {
        checkedChildren: fieldInfo.fieldProps.checkedChildren,
        unCheckedChildren: fieldInfo.fieldProps.unCheckedChildren,
        checkedColor: fieldInfo.fieldProps.checkedColor,
        unCheckedColor: fieldInfo.fieldProps.unCheckedColor,
    }
    getDisplayText = (value:any) =>  value ? mappings.checkedChildren : mappings.unCheckedChildren;
    getColor = (value:any) =>  value ? mappings.checkedColor : mappings.unCheckedColor;
} else if(fieldInfo.valueType === 'Lookup' && fieldInfo.lookup) {
    const store = lookupStore();
    const mappings = ref<{ [key: string|number]: any } | undefined>({});
    const fetchLookupData = async () => {
        const lookupData = await store.getLookupData(fieldInfo.lookup!)
        mappings.value = lookupData?.lookupMappings
    }
    onMounted(() => {
        fetchLookupData()
    })
    getDisplayText = (value:any) => {
        return mappings.value?.[value];
    }
} else {
    getDisplayText = (value:any) =>  value;
}

const display = computed(() => {
    const label = fieldInfo.showLabel ? `${fieldInfo.title}:` : '';
    const value = getByPaths(itemValue, fieldInfo.dataIndex)
    let text = getDisplayText(value);
    let color = getColor(value);
    let show = true;
    if(text === undefined || text === null) {
        if(fieldInfo.showIfNull) {
            text = fieldInfo.nullText;
        } else {
            show = false;
        }
    }
    return { text, label, color, show }
})
</script>

<style lang="less" scoped>

.fb-list-field{
    .title-field {
        display: flex;
        .field-item {
            font-weight: bold;
            font-size: 16px;
        }
    }
    
    .status-field {
        display: flex;
        border-radius: 10px;
        padding: 2px 8px;
        
        .field-item {
            font-size: 12px;
            line-height: 16px;
            color: #fff;
        }
    }
    
    .content-field {
        display: flex;

        .field-item {
            font-size: 12px;
            line-height: 16px;
            color: #999;

            .field-value {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 200px;
            }
        }
    }
}
</style>