<template>
    <view class="condition_table">
        <view class="table_line tabel_header">
            <view class="cell table_line_cell"> 知识点名称 </view>
            <view class="cell table_line_cell"> 答题频次 </view>
            <view class="cell table_line_cell"> 掌握程度 </view>
        </view>

        <view v-for="(i, idx) in tableList" :key="idx" class="table_line">
            <view class="cell table_line_cell name">
                {{ i.knowledgeName }}
            </view>
            <view class="cell table_line_cell">
                {{ i.answerCount }}
            </view>
            <view class="cell table_line_cell">
                {{ ['待点亮', '陌生', '熟悉', '已掌握'][i.masteryDegree] }}
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
interface TableListType {
    createTime: string;
    createUser: string;
    updateTime: string;
    updateUser: string;
    id: string;
    userId: string;
    subjectId: string;
    knowledgeId: string;
    knowledgeName: string;
    answerCount: number;
    correctCount: number;
    masteryDegree: number;
    recommendedNum: number;
}
const props = withDefaults(
    defineProps<{
        tableList?: TableListType[];
    }>(),
    {
        tableList: () => [],
    },
);
</script>
<style lang="scss" scoped>
.condition_table {
    border-radius: 20rpx;
    overflow: hidden;
    .tabel_header {
        font-weight: 500 !important;
        color: rgba(51, 51, 51, 1) !important;
    }
    .table_line {
        display: flex;
        border-bottom: 1px solid #d4ddf0;
        font-size: 26rpx;
        color: #666666;
        .name {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        &:nth-child(n) {
            background-color: #e8f0ff;
        }

        &:nth-child(2n) {
            background-color: #f6f9ff;
        }

        &:last-child {
            border-bottom: none;
        }

        &_cell {
            flex: 1;
            border-right: 1px solid #d4ddf0;
            height: 76rpx;
            min-width: 40rpx;
            line-height: 76rpx;
            text-align: center;

            &:nth-child(1) {
                min-width: 152rpx;
                font-size: 24rpx;
            }

            &:last-child {
                border-right: none;
            }
        }
    }
}
</style>
