<script lang="ts" setup name="userManage_userDetails">
import { useRoute } from 'vue-router'

import { ElAvatar } from 'element-plus'

import { getUserChangerecored, getUserDetails } from '#/api'
import getDict from '#/hooks/useDict'
import { ArrToObj } from '#/utils/tool'
import XbTableClass from '#/utils/xbTable'

import column from './column.jsx'

const route = useRoute()
const userId = route.params.id as string
const formData: anyObj = ref({})
async function init() {
  formData.value = await getUserDetails(userId)
}
async function getTableData() {
  const res = await getUserChangerecored({
    targetUserId: userId,
    opType: 5,
  })
  xbTable.table.data = res.rows
}

const xbTable = reactive(
  new XbTableClass({
    column: column(),
    page: {
      size: 20,
      current: 1,
      total: 0,
    },
    data: [],
  }),
)
provide('xbTable', xbTable)

const educationData: anyObj = ArrToObj(getDict('education_type'))
onMounted(() => {
  init()
  getTableData()
})
</script>

<template>
  <div class="page g-container">
    <div class="basic">
      <h3>基础资料</h3>
      <div class="avatar">
        <ElAvatar class="row-user-avatar" :src="formData.avatarUrl" />
      </div>
      <el-form label-width="auto" :model="formData">
        <el-form-item label="用户姓名：">
          <span>{{ formData.name }}</span>
        </el-form-item>
        <el-form-item label="用户名称：">
          <span>{{ formData.nickName }}</span>
        </el-form-item>
        <el-form-item label="性别：">
          <span>{{
            formData.sex ? (formData.sex === 1 ? '男' : '女') : '未知'
          }}</span>
        </el-form-item>
        <el-form-item label="用户账号：">
          <span>{{ formData.account }}</span>
        </el-form-item>
        <el-form-item label="用户ID：">
          <span>{{ formData.id }}</span>
        </el-form-item>
        <el-form-item label="会员时长：">
          <span>{{ formData.vipLength || '暂无数据' }}</span>
        </el-form-item>
        <el-form-item label="学校：">
          <span>{{ formData.schoolName }}</span>
        </el-form-item>
        <el-form-item label="学段：">
          <span>{{ educationData[formData.education] }}</span>
        </el-form-item>
        <el-form-item label="班级：">
          <span>{{ formData.classInSchool }}</span>
        </el-form-item>
        <el-form-item label="小组：">
          <span>{{ formData.groupName || '暂无数据' }}</span>
        </el-form-item>
        <el-form-item label="会员：">
          <span>{{ formData.currentLevelName }}</span>
        </el-form-item>
        <el-form-item label="等级：">
          <span>{{ formData.level || '暂无数据' }}</span>
        </el-form-item>
        <el-form-item label="段位：">
          <span>暂无数据</span>
        </el-form-item>
        <el-form-item label="注册地址：">
          <span>{{ formData.registerAddress }}</span>
        </el-form-item>
        <el-form-item label="注册时间：">
          <span>{{ formData.createTime }}</span>
        </el-form-item>
        <el-form-item label="最近登录：">
          <span>{{ formData.lastLoginTime || '暂无数据' }}</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="basic changeRecored">
      <h3>密码设置记录</h3>
      <Table ref="tableRef" class="page-table" :pagination="false" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page {
  display: flex;

  h3 {
    margin: 0 0 16px;
  }

  :deep(.el-form-item__label) {
    color: #101010 !important;
  }

  .el-form {
    margin-left: 16px;
  }

  .el-form-item {
    margin-bottom: 0;
    color: #101010;
  }

  .basic {
    width: 276px;
    padding: 16px 20px;
    margin-right: 20px;
    background-color: #fff;
    border-radius: 8px;

    .avatar {
      text-align: center;
    }

    &.changeRecored {
      width: 900px;

      h3 {
        text-align: center;
      }
    }
  }

  .grow-record {
    .achievement {
      width: 276px;
      padding: 16px 20px;
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 8px;
    }
  }
}
</style>
