<script setup>
import { ref } from 'vue'
import { Money, View } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores'
import { userListService } from '@/api/user'
import UserDetail from './components/UserDetail.vue'
import UserRecharge from './components/UserRecharge.vue'
const userStore = useUserStore()
const loading = ref(false)
const userList = ref()
const total = ref(0)
const params = ref({
  current: 1,
  size: 10,
  userId: userStore.user.id || 0,
  schoolId: ''
})
const getUserList = async () => {
  loading.value = true
  const {
    data: { data }
  } = await userListService(params.value)
  userList.value = data.list
  total.value = data.total
  loading.value = false
}
getUserList()

const onCurrentChange = (current) => {
  params.value.current = current
  getUserList()
}
const onSizeChange = (size) => {
  params.value.current = 1
  params.value.size = size
  getUserList()
}

// 充值金额（10 20 50 100 150 200）
const moneyRef = ref()
const addMoney = (userId, username) => {
  moneyRef.value.open(userId, username)
}

// 查看用户信息（基本信息 + 认证信息）
const userDetailRef = ref()
const userDetail = (id) => {
  userDetailRef.value.open(id)
}
</script>
<template>
  <page-container title="用户信息列表">
    <!-- 表格区域 -->
    <el-table :data="userList" stripe v-loading="loading">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="联系电话" prop="userPhone"></el-table-column>
      <el-table-column label="邮箱信息">
        <template #default="{ row }">
          {{ row.email || '用户未设置邮箱信息' }}
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template #default="{ row }">
          <span v-if="row.type === 0" style="color: blueviolet">普通用户</span>
          <span v-if="row.type === 1" style="color: skyblue">学生</span>
          <span v-if="row.type === 2" style="color: black">老师</span>
        </template>
      </el-table-column>
      <el-table-column label="账户余额（元）">
        <template #default="{ row }">
          {{ row.balance.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <span
            v-if="row.phone === '暂无用户联系方式'"
            style="color: blueviolet"
            >未认证电话号码</span
          >
          <el-button
            circle
            plain
            :icon="Money"
            title="充值"
            @click="addMoney(row.id, row.username)"
            v-if="row.phone !== '暂无用户联系方式'"
          ></el-button>
          <el-button
            circle
            plain
            v-if="row.type !== 0"
            :icon="View"
            type="success"
            title="查看用户认证信息"
            @click="userDetail(row.id)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="无数据" />
      </template>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
      v-model:current-page="params.current"
      v-model:page-size="params.size"
      :page-sizes="[10, 20, 50]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </page-container>
  <!-- 用户信息查看 -->
  <UserDetail ref="userDetailRef"></UserDetail>
  <!-- 充值金额窗口 -->
  <UserRecharge ref="moneyRef" @success="onSizeChange(5)"></UserRecharge>
</template>
