<template>
    <div class="app-table-details g-details">
        <div class="g-details__title">
            <slot name="title">
                {{ title }}
            </slot>
        </div>
        <table cellspacing="0" cellpadding="0" :style="tableStyle">
            <tbody>
                <tr v-for="(items, i) in cellGroup" :key="i">
                    <template v-for="(item, n) in items" :key="n">
                        <th :style="labelStyle">
                            <slot :name="item.prop + 'Label'">
                                {{ item.label }}
                            </slot>
                        </th>
                        <td :colspan="(column * 2 - items.length * 2) + 1" :style="valueStyle">
                            <slot :name="item.prop" :value="data[item.prop]">
                                {{ handleValue(item) }}
                            </slot>
                        </td>
                    </template>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { handleNoneValue } from '@/filters'

interface cellProp {
    prop: string;
    label: string;
    decimal?: number; // 保留小数点位数
    entireRow?: boolean; // 是否整行显示
    hideEmpty?: boolean; // 是否隐藏空值
}

const props = defineProps({
    title: String,
    data: {
        type: Object,
        required: true
    },
    cellProps: {
        type: Array as PropType<cellProp[]>,
        required: true
    },
    column: {
        type: Number,
        default: 1
    },
    width: {
        type: [String, Number],
        default: '100%'
    },
    // 标签宽度
    labelWidth: {
        type: Number,
        default: 0
    },
    // 标签对齐方式
    labelAlign: {
        type: String as PropType<'left' | 'center' | 'right'>,
        default: 'right'
    },
    // 边框大小
    borderWidth: {
        type: Number,
        default: 0
    },
})

const cellGroup = computed(() => {
    // const result = []
    // let index = 0
    // // 一维数组转换成二维数组
    // while (index < props.cellProps.length) {
    //     const group = props.cellProps.slice(index, index += props.column)
    //     result.push(group)
    // }
    return props.cellProps.reduce((pre, cur) => {
        const last = pre[pre.length - 1]
        if (last) {
            if (cur.entireRow || last.length === props.column) {
                pre[pre.length] = [cur]
            } else {
                last.push(cur)
            }
        } else {
            pre[0] = [cur]
        }
        return pre
    }, [] as cellProp[][])
})

const tableStyle = computed(() => ({
    width: typeof props.width === 'number' ? props.width + 'px' : props.width
}))

const valueStyle = computed(() => ({
    borderWidth: props.borderWidth + 'px',
}))

const labelStyle = computed(() => ({
    width: props.labelWidth ? props.labelWidth + 'px' : 'fit-content',
    textAlign: props.labelAlign,
    ...valueStyle.value,
}))

const handleValue = (cell: cellProp) => {
    const value = props.data[cell.prop]
    if (Number.isFinite(value) && cell.decimal) {
        return value.toFixed(cell.decimal)
    }
    return handleNoneValue(value)
}
</script>

<style lang="less">
@import './index.less';
</style>