<template>
    <div class="user-detail-container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h2>用户信息详情</h2>
            <el-button type="primary" @click="refreshAll">刷新数据</el-button>
        </div>

        <!-- 基本信息 -->
        <el-card class="info-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <span>基本信息</span>
                    <el-button type="primary" text @click="getUserBasicInfo">刷新</el-button>
                </div>
            </template>
            <div v-loading="loading.basic">
                <el-descriptions v-if="userBasicInfo" :column="2" border>
                    <el-descriptions-item label="邀请码">
                        {{ userBasicInfo.invitationCode }}
                    </el-descriptions-item>
                    <el-descriptions-item label="用户名">
                        {{ userBasicInfo.userName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号">
                        {{ userBasicInfo.mobile }}
                    </el-descriptions-item>
                    <el-descriptions-item label="状态">
                        <el-tag :type="userBasicInfo.status === '0' ? 'success' : 'danger'">
                            {{ userBasicInfo.status === '0' ? '正常' : '禁用' }}
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="注册时间">
                        {{ userBasicInfo.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="最后登录时间">
                        {{ userBasicInfo.updateTime }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-empty v-else description="暂无数据" :image-size="50"></el-empty>
            </div>
        </el-card>

        <!-- 用户积分 -->
        <el-card class="info-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <span>用户积分</span>
                    <el-button type="primary" text @click="getUserPointsInfo">刷新</el-button>
                </div>
            </template>
            <div v-loading="loading.points">
                <div v-if="userPointsInfo" class="points-container">
                    <div class="points-item">
                        <div class="points-label">总积分</div>
                        <div class="points-value">{{ userPointsInfo.totalPoints }}</div>
                    </div>
                    <div class="points-item">
                        <div class="points-label">可用积分</div>
                        <div class="points-value available">
                            {{ userPointsInfo.availablePoints }}
                        </div>
                    </div>
                    <div class="points-item">
                        <div class="points-label">冻结积分</div>
                        <div class="points-value frozen">{{ userPointsInfo.frozenPoints }}</div>
                    </div>
                </div>
                <el-empty v-else description="暂无积分信息" :image-size="50"></el-empty>
            </div>
        </el-card>

        <!-- 基本信息 -->
        <el-card class="info-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <span>上级信息</span>
                    <el-button type="primary" text @click="getSupperUserBasicInfo">刷新</el-button>
                </div>
            </template>
            <div v-loading="loading.supperBasic">
                <el-descriptions v-if="supperUerInfo" :column="2" border>
                    <el-descriptions-item label="邀请码">
                        {{ supperUerInfo.invitationCode }}
                    </el-descriptions-item>
                    <el-descriptions-item label="用户名">
                        {{ supperUerInfo.userName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号">
                        {{ supperUerInfo.mobile }}
                    </el-descriptions-item>
                    <el-descriptions-item label="状态">
                        <el-tag :type="supperUerInfo.status === '0' ? 'success' : 'danger'">
                            {{ supperUerInfo.status === '0' ? '正常' : '禁用' }}
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="注册时间">
                        {{ supperUerInfo.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="最后登录时间">
                        {{ supperUerInfo.updateTime }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-empty v-else description="暂无数据" :image-size="50"></el-empty>
            </div>
        </el-card>

        <!-- 实名认证信息 -->
        <el-card class="info-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <span>实名认证信息</span>
                    <el-button type="primary" text @click="getRealNameAuthInfo">刷新</el-button>
                </div>
            </template>
            <div v-loading="loading.realName">
                <el-descriptions v-if="realNameAuthInfo" :column="2" border>
                    <el-descriptions-item label="真实姓名">
                        {{ realNameAuthInfo.realName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="认证状态">
                        <el-tag :type="getAuthStatusType(realNameAuthInfo.status)" size="small">
                            {{ getAuthStatusText(realNameAuthInfo.status) }}
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="认证时间">
                        {{ realNameAuthInfo.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="身份证正面">
                        <image-preview
                            :src="realNameAuthInfo.idCardFrontUrl"
                            style="width: 80px; height: 80px"
                        ></image-preview>
                    </el-descriptions-item>
                    <el-descriptions-item label="身份证反面">
                        <image-preview
                            :src="realNameAuthInfo.idCardBackUrl"
                            style="width: 80px; height: 80px"
                        ></image-preview>
                    </el-descriptions-item>
                </el-descriptions>
                <el-empty v-else description="未实名认证" :image-size="50"></el-empty>
            </div>
        </el-card>

        <!-- 银行卡信息 -->
        <el-card class="info-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <span>银行卡信息</span>
                    <el-button type="primary" text @click="getBankCardInfo">刷新</el-button>
                </div>
            </template>
            <div v-loading="loading.bank">
                <el-table
                    v-if="bankCardInfo && bankCardInfo.length > 0"
                    :data="bankCardInfo"
                    style="width: 100%"
                >
                    <el-table-column prop="bankName" label="银行名称" width="120"></el-table-column>
                    <el-table-column prop="cardNumber" label="卡号">
                        <template #default="{ row }">
                            **** **** **** {{ row.cardNumber.slice(-4) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="cardType" label="卡类型" width="80">
                        <template #default="{ row }">
                            <el-tag size="small">
                                {{ row.cardType === 1 ? '借记卡' : '信用卡' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bindTime" label="绑定时间" width="160"></el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template #default="{ row }">
                            <el-tag :type="row.status === 0 ? 'success' : 'danger'" size="small">
                                {{ row.status === 0 ? '正常' : '冻结' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
                <el-empty v-else description="暂无银行卡信息" :image-size="50"></el-empty>
            </div>
        </el-card>

        <!-- 三方账号信息 -->
        <el-card class="info-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <span>第三方账号信息</span>
                    <el-button type="primary" text @click="getThirdAccountInfo">刷新</el-button>
                </div>
            </template>
            <div v-loading="loading.thirdAccount">
                <el-table
                    v-if="thirdAccountInfo && thirdAccountInfo.length > 0"
                    :data="thirdAccountInfo"
                    style="width: 100%"
                >
                    <el-table-column
                        prop="accountNumber"
                        label="账号"
                        width="120"
                    ></el-table-column>
                    <el-table-column prop="paymentType" label="卡类型" width="80">
                        <template #default="{ row }">
                            <el-tag size="small">
                                {{ row.paymentType === 1 ? '微信' : '支付宝' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="qrCodeUrl" label="收款码" width="80">
                        <template #default="{ row }">
                            <image-preview
                                :src="row.qrCodeUrl"
                                style="width: 80px; height: 80px"
                            ></image-preview>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bindTime" label="绑定时间" width="160"></el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template #default="{ row }">
                            <el-tag :type="row.status === 0 ? 'success' : 'danger'" size="small">
                                {{ row.status === 0 ? '正常' : '冻结' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
                <el-empty v-else description="暂无银行卡信息" :image-size="50"></el-empty>
            </div>
        </el-card>
    </div>
</template>

<script setup name="AppUserDetails">
import {
    listAppUser,
    getAppUser,
    delAppUser,
    addAppUser,
    updateAppUser,
    resetUserPwd,
    unblockAppUser,
} from '@/api/service/appUser';
import { listUserCard } from '@/api/service/userCard';
import { getUserVerificationBuyUserId } from '@/api/service/userVerification';
import { getUserPointsBuyUserId } from '@/api/system/userPoints';
import { listUserPayment } from '@/api/service/userPayment';

const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

// 响应式数据
const userBasicInfo = ref(null);
const supperUerInfo = ref(null);
const bankCardInfo = ref([]);
const realNameAuthInfo = ref(null);
const thirdAccountInfo = ref([]);
const userPointsInfo = ref(null);

// 加载状态
const loading = ref({
    basic: false,
    bank: false,
    realName: false,
    thirdAccount: false,
    points: false,
    supperBasic: false,
});

// 模拟API调用函数 - 实际项目中替换为真实的API调用
const mockApiCall = (data, delay = 1000) => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(data);
        }, delay);
    });
};

// 获取用户基本信息
const getUserBasicInfo = async () => {
    loading.value.basic = true;
    try {
        getAppUser(route.query.userId).then(res => {
            userBasicInfo.value = res.data;
            getSupperUserBasicInfo(res.data.supUserId);
        });
    } catch (error) {
    } finally {
        loading.value.basic = false;
    }
};

// 获取上级用户基本信息
const getSupperUserBasicInfo = async () => {
    loading.value.supperBasic = true;
    try {
        getAppUser(userBasicInfo.value.supUserId).then(res => {
            supperUerInfo.value = res.data;
        });
    } catch (error) {
    } finally {
        loading.value.supperBasic = false;
    }
};

// 获取银行卡信息
const getBankCardInfo = async () => {
    loading.value.bank = true;
    try {
        let params = {
            pageNum: 1,
            pageSize: 20,
            userId: route.query.userId,
        };
        listUserCard(params).then(res => {
            bankCardInfo.value = res.rows;
        });
    } catch (error) {
    } finally {
        loading.value.bank = false;
    }
};

// 获取实名认证信息
const getRealNameAuthInfo = async () => {
    loading.value.realName = true;
    try {
        getUserVerificationBuyUserId(route.query.userId).then(res => {
            realNameAuthInfo.value = res.data;
        });
    } catch (error) {
    } finally {
        loading.value.realName = false;
    }
};

// 获取第三方账号信息
const getThirdAccountInfo = async () => {
    loading.value.thirdAccount = true;
    try {
        let params = {
            pageNum: 1,
            pageSize: 20,
            userId: route.query.userId,
        };
        listUserPayment(params).then(res => {
            thirdAccountInfo.value = res.rows;
        });
    } catch (error) {
    } finally {
        loading.value.thirdAccount = false;
    }
};

// 获取用户积分信息
const getUserPointsInfo = async () => {
    loading.value.points = true;
    try {
        getUserPointsBuyUserId(route.query.userId).then(res => {
            userPointsInfo.value = res.data;
        });
    } catch (error) {
    } finally {
        loading.value.points = false;
    }
};

// 实名认证状态映射
const getAuthStatusText = status => {
    const statusMap = {
        1: '待处理',
        2: '审核拒绝',
        3: '审核通过',
    };
    return statusMap[status] || '未知状态';
};

const getAuthStatusType = status => {
    const typeMap = {
        2: 'warning',
        3: 'success',
        1: 'danger',
    };
    return typeMap[status] || 'info';
};

// 刷新所有数据
const refreshAll = () => {
    getUserBasicInfo();
    getBankCardInfo();
    getRealNameAuthInfo();
    getThirdAccountInfo();
    getUserPointsInfo();
};

// 页面加载时获取数据
onMounted(() => {
    refreshAll();
});
</script>

<style scoped>
.user-detail-container {
    padding: 20px;
    margin: 0 auto;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page-header h2 {
    margin: 0;
    color: #303133;
}

.info-card {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.third-account-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.third-account-item {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 15px;
}

.account-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.account-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.account-title {
    font-weight: bold;
    color: #303133;
}

.account-content p {
    margin: 5px 0;
    color: #606266;
}

.points-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.points-item {
    text-align: center;
    padding: 15px;
    background: #f5f7fa;
    border-radius: 4px;
}

.points-label {
    font-size: 14px;
    color: #909399;
    margin-bottom: 8px;
}

.points-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
}

.points-value.available {
    color: #67c23a;
}

.points-value.frozen {
    color: #e6a23c;
}

.points-value.level {
    color: #409eff;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .third-account-container {
        grid-template-columns: 1fr;
    }

    .points-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .points-container {
        grid-template-columns: 1fr;
    }
}
</style>
