<template>
    <el-card shadow="never" class="!border-none mt-4">
        <el-tabs v-model="activeTab">
            <el-tab-pane label="成交用户" name="complete">
                <ProTable ref="proTableRef" :columns="columns" :tableData="tableData" :loading="loading" :maxHeight="530">
                    <template #sex="{ row }">
                        <span>{{ sexMap[row.sex as SexEnum] }}</span>
                    </template>
                    <template #listSource="{ row }">
                        {{ ClueSourceMap[row.listSource as CluseSourceEnum] }}
                    </template>
                    <template #operation="{ row }">
                        <slot name="operation" :row="row" />
                    </template>
                </ProTable>
            </el-tab-pane>
        </el-tabs>
    </el-card>
</template>

<script setup lang="ts">
import { ClueSourceMap, CluseSourceEnum, SexEnum, sexMap } from '@/enums'
import type { PropType } from 'vue'

interface ICustomer {
    id: number
    studentName: string
    sex: SexEnum
    idCard: string
    major: string
    graduationSchool: string
    homeAddress: string
    parentName: string
    parentPhone: string
    telemarketingTeacherName: string
    recruitTeacherName: string
    listSource: CluseSourceEnum
}
defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    tableData: {
        type: Array as PropType<ICustomer[]>,
        default: () => []
    }
})

const activeTab = ref('complete')
const proTableRef = ref()
const columns = reactive([
    { prop: 'studentName', label: '学生名字', width: 180 },
    { prop: 'sex', label: '性别', width: 180 },
    { prop: 'idCard', label: '身份证号码', width: 180 },
    { prop: 'major', label: '报读专业', width: 180 },
    { prop: 'graduationSchool', label: '毕业院校', width: 180 },
    { prop: 'homeAddress', label: '家庭地址', width: 180 },
    { prop: 'parentName', label: '家长姓名', width: 180 },
    { prop: 'parentPhone', label: '家长电话', width: 180 },
    { prop: 'telemarketingTeacherName', label: '负责电销老师', width: 180 },
    { prop: 'recruitTeacherName', label: '负责招生老师', width: 180 },
    { prop: 'listSource', label: '数据来源', width: 180 },
    { prop: 'updateTime', label: '更新时间', width: 180 },
    { prop: 'operation', label: '操作', fixed: 'right', width: 250 }
])
</script>

<style scoped lang="scss">
:deep(.el-card__body) {
    padding-top: 0;
}
</style>
