<template>
    <div class="ba-ip-white-display">
        <template v-if="displayIps.length">
            <div v-for="(ip, idx) in displayIps" :key="idx" class="ba-ip-white-line">{{ ip }}</div>
        </template>
        <span v-else>-</span>
    </div>
</template>

<script setup lang="ts">
import { TableColumnCtx } from 'element-plus'
import { computed } from 'vue'
import { getCellValue } from '/@/components/table/index'

interface Props {
    row: TableRow
    field: TableColumn
    column: TableColumnCtx<TableRow>
    index: number
}

const props = defineProps<Props>()

const cellValue = getCellValue(props.row, props.field, props.column, props.index)

const displayIps = computed(() => {
    if (!cellValue || !Array.isArray(cellValue)) return []
    return cellValue.map((item) => (typeof item === 'string' ? item : item?.value ?? '')).filter(Boolean)
})
</script>

<style scoped lang="scss">
.ba-ip-white-display {
    white-space: pre-line;
    line-height: 1.6;
}
.ba-ip-white-line {
    margin: 2px 0;
}
</style>
