<script setup>
import { computed, onMounted } from "vue";

// 接收表格数据和类型的 props
const props = defineProps({
    data: {
        type: Array,
        required: true,
    },
    type: {
        type: String,
        default: "purple-pink", // 默认渐变颜色
    },
});
// 根据 type 设置不同的渐变颜色（偶数行）
const evenClass = computed(() => {
    // 统一使用主题色浅色背景
    return "bg-red-50/40";
});

// 动态计算表头的背景颜色和文本颜色
const headerClass = computed(() => {
    // 统一使用主题色浅色背景
    return "bg-red-100";
});
// 斑马纹样式，偶数行带颜色，奇数行没有颜色，且从第二行开始
function zebraClass(index) {
    return index % 2 === 1 ? evenClass.value : "";
}
</script>

<template>
    <div class="l-table overflow-x-auto">
        <table
            class="min-w-full border-collapse table-auto text-center text-size-xs"
        >
            <thead :class="headerClass">
                <tr>
                    <!-- 插槽渲染表头 -->
                    <slot name="header" />
                </tr>
            </thead>
            <tbody>
                <tr
                    v-for="(row, index) in props.data"
                    :key="index"
                    :class="zebraClass(index)"
                    class="border-t"
                >
                    <slot :row="row" />
                </tr>
            </tbody>
        </table>
    </div>
</template>

<style scoped>
/* 基础表格样式 */
th {
    font-weight: bold;
    padding: 12px;
    text-align: left;
    border: 1px solid #e5e7eb;
}

/* 表格行样式 */
td {
    padding: 12px;
    border: 1px solid #e5e7eb;
}

table {
    width: 100%;
    border-spacing: 0;
}
.l-table {
    @apply rounded-xl;
    overflow: hidden;
}
</style>
