<template>
    <el-card shadow="never" class="!border-none mt-4">
        <ProTable ref="proTableRef" :columns="columns" :tableData="tableData" :loading="loading" :maxHeight="530">
            <template #listSource="{ row }">
                <span>{{ parseClueSource(row.listSource) }}</span>
            </template>
            <template #situation="{ row }">
                <div class="flex items-center gap-2">
                    <span class="w-[6px] h-[6px] rounded-[3px]" :class="conversionStyle[row.situation]"></span>
                    <span>{{ parseConversion(row.situation) }}</span>
                </div>
            </template>
            <template #operation="{ row }">
                <slot name="operation" :row="row" />
            </template>
        </ProTable>
    </el-card>
</template>

<script setup lang="ts">
import { converStatusEnum, conversionMap } from '@/enums'

const conversionStyle: Record<number, string> = {
    [converStatusEnum.UN_RECEIVED]: 'bg-green2',
    [converStatusEnum.CONVERTED_PROCESS]: 'bg-primary',
    [converStatusEnum.ADD_RELATION]: 'bg-purple',
    [converStatusEnum.EXCEPTION]: 'bg-error',
    [converStatusEnum.CONVERTED]: 'bg-success',
    [converStatusEnum.FAILED]: 'bg-error'
}
defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    tableData: {
        type: Array,
        default: () => []
    }
})
const proTableRef = ref()
const columns = reactive([
    { prop: 'studentName', label: '学生名字', width: 180 },
    { prop: 'phone', label: '联系电话', width: 180 },
    { prop: 'telemarketingTeacherName', label: '电销老师', width: 180 },
    { prop: 'recruitTeacherName', label: '招生老师', width: 180 },
    { prop: 'listSource', label: '名单来源', width: 180 },
    { prop: 'situation', label: '转化情况', width: 180 },
    { prop: 'operation', label: '操作', fixed: 'right', width: 250 }
])
const clueSource = shallowRef([{ label: '线下名单', value: 0 }])
const parseClueSource = (value: number) => {
    const item = clueSource.value.find((item: any) => item.value === value)
    return item?.label || ''
}

const parseConversion = computed(() => (value: converStatusEnum) => conversionMap[value])
</script>
<style scoped></style>
