<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(() => {
    switch (props.type) {
        case "blue-green":
            return "bg-teal-100/40";
        // return 'bg-gradient-to-r from-blue-50 via-green-50 to-teal-50'
        case "orange-yellow":
            return "bg-gradient-to-r from-orange-50 via-yellow-50 to-yellow-100";
        case "red-purple":
            return "bg-gradient-to-r from-red-50 via-purple-50 to-purple-100";
        default:
            return "bg-gradient-to-r from-purple-50 via-pink-50 to-red-50";
    }
});

// 动态计算表头的背景颜色和文本颜色
const headerClass = computed(() => {
    switch (props.type) {
        case "blue-green":
            return "bg-teal-200";
        // return 'bg-gradient-to-r from-blue-200 via-green-200 to-teal-200'
        case "orange-yellow":
            return "bg-gradient-to-r from-orange-200 via-yellow-200 to-yellow-200";
        case "red-purple":
            return "bg-gradient-to-r from-red-200 via-purple-200 to-purple-200";
        default:
            return "bg-gradient-to-r from-purple-200 via-pink-200 to-red-200";
    }
});
// 斑马纹样式，偶数行带颜色，奇数行没有颜色，且从第二行开始
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>
