<template>
  <div class="userManageWrap">
    <div class="userManageCard">
      <div class="headerRow">
        <h2>用户管理</h2>
        <el-button type="primary" @click="handleAdd">新增用户</el-button>
      </div>

      <el-table :data="tableData" v-loading="loading" stripe style="width: 100%">
        <el-table-column prop="id" label="ID" width="70" />
        <el-table-column prop="tel" label="手机号" width="140" />
        <el-table-column prop="name" label="姓名" width="140" />
        <el-table-column prop="nickName" label="昵称" width="140" />
        <el-table-column prop="status" label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
              {{ row.status === 1 ? '正常' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="170" />
        <el-table-column label="操作" min-width="200" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="warning" size="small" @click="handleResetPwd(row)">重置密码</el-button>
            <el-popconfirm title="确定删除该用户？" @confirm="handleDelete(row)">
              <template #reference>
                <el-button link type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div class="paginationRow">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="loadUsers"
          @current-change="loadUsers"
        />
      </div>
    </div>

    <!-- 新增/编辑用户弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增用户' : '编辑用户'"
      width="460px"
      destroy-on-close
    >
      <el-form
        ref="userFormRef"
        :model="userForm"
        :rules="userRules"
        label-width="80px"
      >
        <el-form-item label="手机号" prop="tel">
          <el-input v-model="userForm.tel" :disabled="dialogType === 'edit'" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="userForm.name" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="userForm.nickName" />
        </el-form-item>
        <el-form-item v-if="dialogType === 'add'" label="密码" prop="password">
          <el-input v-model="userForm.password" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
      </template>
    </el-dialog>

    <!-- 重置密码弹窗 -->
    <el-dialog v-model="resetPwdVisible" title="重置密码" width="400px" destroy-on-close>
      <el-form ref="resetPwdFormRef" :model="resetPwdForm" :rules="resetPwdRules" label-width="80px">
        <el-form-item label="用户">
          <el-input :value="resetPwdForm.tel" disabled />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="resetPwdForm.newPassword" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="resetPwdVisible = false">取消</el-button>
        <el-button type="primary" @click="handleResetPwdSubmit" :loading="resettingPwd">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { fetchUserPage, createUser, editUser, deleteUser, resetUserPassword } from '@/api'

const tableData = ref<any[]>([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 新增/编辑
const dialogVisible = ref(false)
const dialogType = ref<'add' | 'edit'>('add')
const userFormRef = ref<FormInstance>()
const submitting = ref(false)
const userForm = reactive({
  id: 0,
  tel: '',
  name: '',
  nickName: '',
  password: '',
})

const userRules = reactive<FormRules>({
  tel: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6位', trigger: 'blur' },
  ],
})

// 重置密码
const resetPwdVisible = ref(false)
const resetPwdFormRef = ref<FormInstance>()
const resettingPwd = ref(false)
const resetPwdForm = reactive({
  id: 0,
  tel: '',
  newPassword: '',
})

const resetPwdRules = reactive<FormRules>({
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6位', trigger: 'blur' },
  ],
})

const loadUsers = async () => {
  loading.value = true
  try {
    const res = await fetchUserPage<any>({
      current: currentPage.value,
      size: pageSize.value,
    })
    if (res.code === 200) {
      tableData.value = res.data.records || []
      total.value = res.data.total || 0
    }
  } catch (e: any) {
    console.error('加载用户列表失败:', e)
    ElMessage.error('加载用户列表失败')
  } finally {
    loading.value = false
  }
}

const handleAdd = () => {
  dialogType.value = 'add'
  userForm.id = 0
  userForm.tel = ''
  userForm.name = ''
  userForm.nickName = ''
  userForm.password = ''
  dialogVisible.value = true
}

const handleEdit = (row: any) => {
  dialogType.value = 'edit'
  userForm.id = row.id
  userForm.tel = row.tel
  userForm.name = row.name || ''
  userForm.nickName = row.nickName || ''
  userForm.password = ''
  dialogVisible.value = true
}

const handleSubmit = async () => {
  const valid = await userFormRef.value?.validate().catch(() => false)
  if (!valid) return

  submitting.value = true
  try {
    let res: any
    if (dialogType.value === 'add') {
      res = await createUser<any>({
        tel: userForm.tel,
        name: userForm.name,
        nickName: userForm.nickName,
        password: userForm.password,
      })
    } else {
      res = await editUser<any>({
        id: userForm.id,
        name: userForm.name,
        nickName: userForm.nickName,
      })
    }
    if (res.code === 200) {
      ElMessage.success(dialogType.value === 'add' ? '新增成功' : '编辑成功')
      dialogVisible.value = false
      loadUsers()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } finally {
    submitting.value = false
  }
}

const handleResetPwd = (row: any) => {
  resetPwdForm.id = row.id
  resetPwdForm.tel = row.tel
  resetPwdForm.newPassword = ''
  resetPwdVisible.value = true
}

const handleResetPwdSubmit = async () => {
  const valid = await resetPwdFormRef.value?.validate().catch(() => false)
  if (!valid) return

  resettingPwd.value = true
  try {
    const res = await resetUserPassword<any>({
      id: resetPwdForm.id,
      newPassword: resetPwdForm.newPassword,
    })
    if (res.code === 200) {
      ElMessage.success('密码重置成功')
      resetPwdVisible.value = false
    } else {
      ElMessage.error(res.msg || '重置失败')
    }
  } finally {
    resettingPwd.value = false
  }
}

const handleDelete = async (row: any) => {
  const res = await deleteUser<any>(row.id)
  if (res.code === 200) {
    ElMessage.success('删除成功')
    loadUsers()
  } else {
    ElMessage.error(res.msg || '删除失败')
  }
}

onMounted(() => {
  loadUsers()
})
</script>

<style lang="scss" scoped>
.userManageWrap {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
  z-index: 1;
}

.userManageCard {
  background: #fff;
  border-radius: 12px;
  padding: 24px 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

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

  h2 {
    font-size: 20px;
    color: #333;
    margin: 0;
  }
}

.paginationRow {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>
