<template>
    <div class="certification-table">
        <a-table 
            :columns="columns" 
            :data-source="data" 
            :loading="loading" 
            :pagination="pagination"
            :scroll="{ x: getTableWidth() }" 
            @change="handleTableChange"
            :row-key="record => record.id"
        >
            <template #bodyCell="{ column, record }">
                <!-- 认证类型 -->
                <template v-if="column.key === 'certificationType'">
                    <a-tag :color="record.certificationType === 'COMPANY' ? 'orange' : 'green'">
                        {{ getCertificationTypeLabel(record.certificationType) }}
                    </a-tag>
                </template>
                
                <!-- 认证状态 -->
                <template v-if="column.key === 'certificationStatus'">
                    <div class="status-cell">
                        <a-tag 
                            :color="getStatusColor(record.certificationStatus)" 
                            class="status-tag"
                        >
                            {{ getStatusLabel(record.certificationStatus) }}
                        </a-tag>
                        <!-- 显示失败原因 -->
                        <div v-if="record.certificationStatus === 'CERTIFICATION_FAILED' && record.fail_reason" 
                             class="fail-reason">
                            <a-tooltip :title="record.fail_reason">
                                <info-circle-outlined style="color: #ff4d4f; margin-left: 4px;" />
                            </a-tooltip>
                        </div>
                    </div>
                </template>
                
                <!-- 个人认证字段 -->
                <template v-if="record.certificationType === 'USER'">
                    <template v-if="column.key === 'name'">
                        {{ record.name }}
                    </template>
                    <template v-if="column.key === 'idCard'">
                        {{ record.idCard }}
                    </template>
                    <template v-if="column.key === 'certificationPeriod'">
                        {{ record.certificationStart }} - {{ record.certificationEnd }}
                    </template>
                </template>
                
                <!-- 企业认证字段 -->
                <template v-if="record.certificationType === 'COMPANY'">
                    <template v-if="column.key === 'companyName'">
                        <div class="text-truncate" :title="record.companyName">
                            {{ record.companyName }}
                        </div>
                    </template>
                    <template v-if="column.key === 'unifiedSocialCreditCode'">
                        {{ record.unifiedSocialCreditCode }}
                    </template>
                    <template v-if="column.key === 'companyContact'">
                        <div v-if="record.identity === '企业法人'">
                            {{ record.name }}（法人）
                        </div>
                        <div v-else-if="record.identity === '被授权人'">
                            {{ record.name }}（被授权人）
                        </div>
                        <div v-else>
                            {{ record.name }}
                        </div>
                    </template>
                </template>
                
                <!-- 操作列 -->
                <template v-if="column.key === 'action'">
                    <a-space :size="8">
                        <a-button 
                            type="link" 
                            size="small"
                            @click="$emit('edit', record)"
                            :disabled="record.certificationStatus !== 'CERTIFICATION_DFFILED'"
                        >
                            审核
                        </a-button>
                        <a-button 
                            type="link" 
                            size="small"
                            @click="$emit('view', record)"
                        >
                            详情
                        </a-button>
                    </a-space>
                </template>
            </template>
            
            <template #emptyText>
                <div class="empty-content">
                    <a-empty description="暂无认证数据" />
                </div>
            </template>
        </a-table>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'
import { Empty, Tooltip } from 'ant-design-vue'
import { InfoCircleOutlined } from '@ant-design/icons-vue'
import { authenticationDict, authenticationTypeDict } from '@/enums/dict'

const props = defineProps({
    data: {
        type: Array,
        default: () => []
    },
    loading: {
        type: Boolean,
        default: false
    },
    pagination: {
        type: Object,
        default: () => ({})
    },
    showType: {
        type: String,
        default: 'all', // all, personal, company
        validator: (value) => ['all', 'personal', 'company'].includes(value)
    }
})

const emit = defineEmits(['table-change', 'edit', 'view'])

// 状态颜色映射
const statusColorMap = {
    PENDING_CERTIFICATION: 'orange',
    CERTIFICATION_DFFILED: 'blue',
    CERTIFICATION_PASSED: 'green',
    CERTIFICATION_FAILED: 'red',
}

// 根据显示类型动态计算列
const columns = computed(() => {
    const baseColumns = [
        { 
            title: '用户名', 
            dataIndex: 'userName', 
            width: 120,
            ellipsis: true,
            fixed: 'left'
        },
        { 
            title: '手机号', 
            dataIndex: 'phone', 
            width: 130,
            ellipsis: true
        },
        {
            title: '认证类型',
            dataIndex: 'certificationType',
            key: 'certificationType',
            width: 100,
            filters: authenticationTypeDict.options.map(item => ({
                text: item.label,
                value: item.value
            })),
            onFilter: (value, record) => record.certificationType === value,
        },
        {
            title: '认证状态',
            dataIndex: 'certificationStatus',
            key: 'certificationStatus',
            width: 140,
            filters: authenticationDict.options.map(item => ({
                text: item.label,
                value: item.value
            })),
            onFilter: (value, record) => record.certificationStatus === value,
        },
    ]
    
    // 根据显示类型添加不同的列
    if (props.showType === 'all') {
        // 全部认证：显示所有列，用条件渲染控制显示内容
        return [
            ...baseColumns,
            { 
                title: '真实姓名/企业名称', 
                dataIndex: 'name',
                key: 'name', 
                width: 150,
                ellipsis: true,
            },
            { 
                title: '证件号码/信用代码', 
                dataIndex: 'idCard',
                key: 'idCard', 
                width: 180,
                ellipsis: true,
            },
            { 
                title: '有效期/身份', 
                dataIndex: 'certificationPeriod',
                key: 'certificationPeriod', 
                width: 150,
            },
            { 
                title: '操作', 
                key: 'action', 
                fixed: 'right', 
                width: 120,
                align: 'center'
            },
        ]
    } else if (props.showType === 'personal') {
        // 个人认证：显示个人相关字段
        return [
            ...baseColumns,
            { 
                title: '真实姓名', 
                dataIndex: 'name',
                key: 'name', 
                width: 120,
                ellipsis: true,
            },
            { 
                title: '身份证号', 
                dataIndex: 'idCard',
                key: 'idCard', 
                width: 180,
                ellipsis: true,
            },
            { 
                title: '证件有效期', 
                dataIndex: 'certificationPeriod',
                key: 'certificationPeriod', 
                width: 180,
            },
            { 
                title: '证件类型', 
                dataIndex: 'documentType',
                key: 'documentType', 
                width: 100,
                customRender: ({ text }) => text === '身份证' ? text : '其他',
            },
            { 
                title: '操作', 
                key: 'action', 
                fixed: 'right', 
                width: 120,
                align: 'center'
            },
        ]
    } else if (props.showType === 'company') {
        // 企业认证：显示企业相关字段
        return [
            ...baseColumns,
            { 
                title: '企业名称', 
                dataIndex: 'companyName',
                key: 'companyName', 
                width: 200,
                ellipsis: true,
            },
            { 
                title: '统一信用代码', 
                dataIndex: 'unifiedSocialCreditCode',
                key: 'unifiedSocialCreditCode', 
                width: 180,
                ellipsis: true,
            },
            { 
                title: '联系人身份', 
                dataIndex: 'companyContact',
                key: 'companyContact', 
                width: 120,
            },
            { 
                title: '联系人姓名', 
                dataIndex: 'name',
                key: 'name', 
                width: 120,
                ellipsis: true,
            },
            { 
                title: '证件类型', 
                dataIndex: 'companyDocumentType',
                key: 'companyDocumentType', 
                width: 120,
                customRender: ({ text }) => text === '营业执照' ? text : '其他',
            },
            { 
                title: '操作', 
                key: 'action', 
                fixed: 'right', 
                width: 120,
                align: 'center'
            },
        ]
    }
    
    return baseColumns
})

// 获取表格宽度
const getTableWidth = () => {
    if (props.showType === 'personal') return 900
    if (props.showType === 'company') return 1100
    return 800
}

// 获取认证类型标签
const getCertificationTypeLabel = (type) => {
    return authenticationTypeDict.getLabel(type) || type
}

// 获取状态标签
const getStatusLabel = (status) => {
    return authenticationDict.getLabel(status) || status
}

// 获取状态颜色
const getStatusColor = (status) => {
    return statusColorMap[status] || 'default'
}

// 表格变化
const handleTableChange = (pagination, filters, sorter) => {
    emit('table-change', pagination)
}
</script>

<style lang="less" scoped>
.certification-table {
    :deep(.ant-table) {
        background: #fff;
        
        .ant-table-thead > tr > th {
            background: #fafafa;
            font-weight: 600;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .ant-table-tbody > tr > td {
            border-bottom: 1px solid #f0f0f0;
        }
        
        .ant-table-tbody > tr:hover > td {
            background: #fafafa;
        }
    }
    
    .status-cell {
        display: flex;
        align-items: center;
        
        .status-tag {
            border-radius: 12px;
            font-size: 12px;
            line-height: 20px;
            padding: 0 10px;
            font-weight: 500;
            border: none;
            
            &.ant-tag-orange {
                background: #fff7e6;
                color: #fa8c16;
            }
            
            &.ant-tag-blue {
                background: #e6f4ff;
                color: #1677ff;
            }
            
            &.ant-tag-green {
                background: #f6ffed;
                color: #52c41a;
            }
            
            &.ant-tag-red {
                background: #fff2f0;
                color: #ff4d4f;
            }
        }
        
        .fail-reason {
            margin-left: 4px;
            cursor: pointer;
        }
    }
    
    .text-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .empty-content {
        padding: 48px 0;
    }
}
</style>