<template>
    <el-card class="!border-none" shadow="never">
        <el-page-header content="用户详情" @back="$router.back()" />
    </el-card>
    <el-card shadow="never" class="mt-4 card !border-none" :body-style="{ padding: '20px 0px' }">
        <template #header>
            <span class="text-lg font-semibold">基本资料</span>
        </template>

        <div class="top-container">
            <div class="avatar">
                <div class="mb-2 ml-3">用户头像</div>
                <el-image
                    style="width: 80px; height: 80px; border-radius: 50%"
                    :src="userInfo.avatar"
                    :preview-src-list="[userInfo.avatar]"
                    :fit="'cover'"
                />
            </div>
        </div>

        <el-form label-position="right" label-width="auto" :model="userInfo" class="px-2 mt-6">
            <div class="flex">
                <el-form-item class="flex-w30" label="用户昵称:">
                    {{ userInfo.nickname || '-' }}
                </el-form-item>
                <el-form-item class="flex-w30" label="用户账号:">
                    {{ userInfo.username || '-' }}
                </el-form-item>
            </div>
            <div class="flex">
                <el-form-item class="flex-w30" label="手机号码:">
                    {{ userInfo.mobile || '-' }}
                </el-form-item>
                <el-form-item class="flex-w30" label="用户来源:">
                    {{ userInfo.channel || '-' }}
                </el-form-item>
            </div>
            <div class="flex">
                <el-form-item class="flex-w30" label="分销员ID:">
                    {{ userInfo.distNum || '-' }}
                </el-form-item>
                <el-form-item class="flex-w30" label="分销员名称:">
                    {{ userInfo.distName || '-' }}
                </el-form-item>
                <el-form-item class="flex-w30" label="组别:">
                    {{ userInfo.distGroup || '-' }}
                </el-form-item>
            </div>
            <div class="flex">
                <!-- <el-form-item class="flex-w30" label="注册时间:">
                    {{ userInfo.createTime || '-' }}
                </el-form-item> -->
                <el-form-item class="flex-w30" label="绑定时间:">
                    {{ userInfo.bindTime || '-' }}
                </el-form-item>
                <el-form-item class="flex-w30" label="解绑时间:">
                    {{ userInfo.unBindTime || '-' }}
                </el-form-item>
                <el-form-item class="flex-w30" label="最近登录时间:">
                    {{ userInfo.lastLoginTime || '-' }}
                </el-form-item>
            </div>
        </el-form>
    </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { apiUserDetail } from '@/api/user'

const route = useRoute()

interface UserInfoObj {
    id: number | string //	int	id
    sn: string //	string	用户编码
    nickname: string //	string	用户昵称
    avatar: string //	string	用户头像
    mobile: number | string //	string	手机号码
    sex: number //	int	用户性别
    sex_desc: string //	string	性别描述
    realName: string //	string	真实姓名
    lastLoginTime: string //	string	最近登录时间
    channel: string //	int	用户来源
    createTime: string //	string	注册时间
    username?: string // 用户账号
    money: string
    distName: string
    distNum: string
    distGroup: string
    bindTime: string //	string	绑定时间
    unBindTime: string //	string	解绑时间
}

const userInfo = ref<UserInfoObj>({
    id: '',
    sn: '',
    nickname: '',
    avatar: '',
    mobile: '',
    sex: 0,
    sex_desc: '',
    realName: '',
    lastLoginTime: '',
    channel: '',
    createTime: '',
    money: '',
    distributorName: '',
    distNum: '',
    groupName: '',
    bindTime: '',
    unBindTime: ''
})
// 初始化用户数据
const initUserInfoFunc = async (): Promise<void> => {
    const res: any = await apiUserDetail({ id: route.query.id })
    userInfo.value = res
}

initUserInfoFunc()
</script>

<style lang="scss">
.card {
    padding: 0 20px;

    .top-container {
        display: flex;
        background-color: #f6f6f6;
        padding: 20px 80px;

        .avatar {
            flex: 0 0 350px;
        }

        .account {
            flex: 0 0 20%;
            text-align: center;
            padding-left: 12px;
        }
    }
}

.flex-w30 {
    width: 30%;
}

.flex-w20 {
    width: 20%;
}
</style>
