<template>
    <div class="certification-management">
        <x-search-bar class="mb-8-2">
            <template #default="{ gutter, colSpan }">
                <a-form :model="searchFormData" layout="inline" :label-col="{ style: { width: '100px' } }">
                    <a-row :gutter="gutter" :wrap="false">
                        <a-col :span="6">
                            <a-form-item label="用户姓名" name="userName">
                                <a-input v-model:value="searchFormData.userName" placeholder="请输入用户姓名" />
                            </a-form-item>
                        </a-col>

                        <a-col :span="6">
                            <a-form-item label="认证类型" name="certificationType">
                                <a-select v-model:value="searchFormData.certificationType" placeholder="请选择认证类型">
                                    <a-select-option value="">全部类型</a-select-option>
                                    <a-select-option v-for="item in authenticationTypeDict.options" :key="item.value"
                                        :value="item.value">
                                        {{ item.label }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>

                        <a-col :span="6">
                            <a-form-item label="认证状态" name="status">
                                <a-select v-model:value="searchFormData.status" placeholder="请选择认证状态">
                                    <a-select-option value="">全部状态</a-select-option>
                                    <a-select-option v-for="item in authenticationDict.options" :key="item.value"
                                        :value="item.value">
                                        <a-tag :color="getStatusColor(item.value)" style="margin: 0; border: none;">
                                            {{ item.label }}
                                        </a-tag>
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>

                        <a-col :span="6" class="align-right">
                            <a-space>
                                <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
                                <a-button ghost type="primary" @click="handleSearch">
                                    {{ $t('button.search') }}
                                </a-button>
                            </a-space>
                        </a-col>
                    </a-row>
                </a-form>
            </template>
        </x-search-bar>

        <!-- 普通横线标签页 -->
        <div class="table-container">
            <a-tabs v-model:activeKey="activeTab" type="line" @change="handleTabChange">
                <a-tab-pane key="all" tab="全部认证">
                    <CertificationTable 
                        :data="allData" 
                        :loading="loading"
                        :pagination="paginationState"
                        @table-change="onTableChange"
                        @edit="handleEdit"
                        @view="handleViewDetail"
                        :show-type="'all'"
                    />
                </a-tab-pane>
                
                <a-tab-pane key="USER" tab="个人认证">
                    <CertificationTable 
                        :data="personalData" 
                        :loading="loading"
                        :pagination="paginationState"
                        @table-change="onTableChange"
                        @edit="handleEdit"
                        @view="handleViewDetail"
                        :show-type="'personal'"
                    />
                </a-tab-pane>
                
                <a-tab-pane key="COMPANY" tab="企业认证">
                    <CertificationTable 
                        :data="companyData" 
                        :loading="loading"
                        :pagination="paginationState"
                        @table-change="onTableChange"
                        @edit="handleEdit"
                        @view="handleViewDetail"
                        :show-type="'company'"
                    />
                </a-tab-pane>
            </a-tabs>
        </div>

        <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { message, Tabs } from 'ant-design-vue'
import apis from '@/apis'
import { usePagination } from '@/hooks'
import EditDialog from './components/EditDialog.vue'
import CertificationTable from './components/CertificationTable.vue'
import { useI18n } from 'vue-i18n'
import { authenticationDict, authenticationTypeDict } from '@/enums/dict'

const ATabs = Tabs
const ATabPane = Tabs.TabPane

defineOptions({
    name: 'certificationManagement',
})

const { t } = useI18n()

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

// 响应式数据
const activeTab = ref('all')
const allData = ref([])
const personalData = ref([])
const companyData = ref([])
const editDialogRef = ref()

const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } = usePagination()

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

// 初始加载
getPageList()

/**
 * 获取用户列表
 */
async function getPageList() {
    try {
        showLoading()
        const { pageSize, current } = paginationState
        const { data, total } = await apis.certifications
            .getCertificationsList({
                pageSize,
                current: current,
                ...searchFormData.value,
            })
            .catch(() => {
                throw new Error()
            })
        hideLoading()
        if (data.length > 0) {
            allData.value = data
            // 按认证类型分组
            personalData.value = data.filter(item => item.certificationType === 'USER')
            companyData.value = data.filter(item => item.certificationType === 'COMPANY')
            paginationState.total = total
        } else {
            allData.value = []
            personalData.value = []
            companyData.value = []
        }
    } catch (error) {
        hideLoading()
        console.error('获取认证列表失败:', error)
    }
}

/**
 * 标签页切换
 */
function handleTabChange(activeKey) {
    activeTab.value = activeKey
}

/**
 * 编辑按钮点击
 */
function handleEdit(record) {
    if (record.certificationStatus !== 'CERTIFICATION_DFFILED') {
        message.warning('该用户认证状态不是已提交，不能操作')
        return
    }
    editDialogRef.value?.handleEdit(record.id)
}

/**
 * 查看详情
 */
function handleViewDetail(record) {
    // 可以弹出详情模态框，展示完整的认证信息
    console.log('查看详情:', record)
    // 这里可以调用详情对话框组件
}

/**
 * 分页
 */
function onTableChange({ current, pageSize }) {
    paginationState.current = current
    paginationState.pageSize = pageSize
    getPageList()
}

/**
 * 重置
 */
function handleResetSearch() {
    searchFormData.value = {}
    resetPagination()
    getPageList()
}

/**
 * 搜索
 */
function handleSearch() {
    resetPagination()
    getPageList()
}

/**
 * 编辑完成
 */
async function onOk() {
    await getPageList()
}
</script>

<style lang="less" scoped>
.certification-management {
    .table-container {
        background: #fff;
        padding: 16px 24px;
        border-radius: 8px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
                    0 1px 6px -1px rgba(0, 0, 0, 0.02),
                    0 2px 4px 0 rgba(0, 0, 0, 0.02);
    }
}

// 标签页样式
:deep(.ant-tabs) {
    .ant-tabs-nav {
        margin: 0 0 16px 0;
        
        &::before {
            border-bottom: 1px solid #f0f0f0;
        }
        
        .ant-tabs-tab {
            padding: 12px 0;
            margin: 0 32px 0 0;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
            
            &:hover {
                color: #1890ff;
            }
            
            &.ant-tabs-tab-active .ant-tabs-tab-btn {
                color: #1890ff;
                font-weight: 500;
            }
        }
        
        .ant-tabs-ink-bar {
            background: #1890ff;
            height: 2px;
        }
    }
    
    .ant-tabs-content {
        min-height: 400px;
    }
}

.align-right {
    text-align: right;
    
    .ant-space {
        justify-content: flex-end;
    }
}

.mb-8-2 {
    margin-bottom: 8px;
}
</style>