<template>
  <a-card :bordered="false" class="content-card">
    <template #title>
      <a-space>
        <span>用户管理</span>
        <a-tag color="cyan">共 {{ users.length }} 个用户</a-tag>
      </a-space>
    </template>
    <template #extra>
      <a-space>
        <a-button type="primary" @click="openUserModal()">
          <template #icon><icon-user-add /></template>
          新增用户
        </a-button>
        <a-button @click="loadUsers">
          <template #icon><icon-refresh /></template>
          刷新
        </a-button>
      </a-space>
    </template>
    <a-table :columns="userColumns" :data="users" :pagination="{ pageSize: 8 }" :bordered="false">
      <template #role="{ record }">
        <a-tag :color="getRoleColor(record.role)">{{ record.role }}</a-tag>
      </template>
      <template #enabled="{ record }">
        <a-switch :model-value="record.enabled" disabled />
      </template>
      <template #actions="{ record }">
        <a-space>
          <a-button size="mini" type="primary" shape="round" @click="openUserModal(record)">编辑</a-button>
          <a-popconfirm content="确定删除此用户吗？" @ok="deleteUser(record.id)">
            <a-button size="mini" status="danger" shape="round">删除</a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
  </a-card>

  <a-modal v-model:visible="userModalVisible" :title="userForm.id ? '编辑用户' : '新增用户'" :ok-text="userForm.id ? '保存' : '添加'" cancel-text="取消" @ok="submitUserModal" width="520">
    <a-form :model="userForm" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="账号" required>
            <a-input v-model="userForm.username" placeholder="请输入账号" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="密码" :required="!userForm.id">
            <a-input-password v-model="userForm.password" :placeholder="userForm.id ? '留空则不修改' : '请输入密码'" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="角色" required>
        <a-select v-model="userForm.role" placeholder="选择用户角色">
          <a-option value="CUSTOMER">顾客</a-option>
          <a-option value="MERCHANT">商家</a-option>
          <a-option value="ADMIN">管理员</a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="昵称">
        <a-input v-model="userForm.nickname" placeholder="请输入昵称" />
      </a-form-item>
      <a-form-item label="账号状态">
        <a-switch v-model="userForm.enabled" />
        <span style="margin-left: 8px">{{ userForm.enabled ? '启用' : '禁用' }}</span>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { api } from '../../api'
import { IconUserAdd, IconRefresh } from '@arco-design/web-vue/es/icon'

const users = ref([])
const userModalVisible = ref(false)
const userForm = reactive({ id: null, username: '', password: '', role: 'CUSTOMER', nickname: '', enabled: true })

const userColumns = [
  { title: 'ID', dataIndex: 'id', width: 60 },
  { title: '账号', dataIndex: 'username' },
  { title: '昵称', dataIndex: 'nickname', width: 100 },
  { title: '角色', slotName: 'role', width: 90 },
  { title: '状态', slotName: 'enabled', width: 70 },
  { title: '操作', slotName: 'actions', width: 140 }
]

const getRoleColor = (role) => {
  const colors = { 'ADMIN': 'purple', 'MERCHANT': 'blue', 'CUSTOMER': 'green' }
  return colors[role] || 'gray'
}

const loadUsers = async () => {
  users.value = await api.adminUsers()
}

const openUserModal = (row = null) => {
  if (row) {
    userForm.id = row.id
    userForm.username = row.username
    userForm.password = ''
    userForm.role = row.role
    userForm.nickname = row.nickname || ''
    userForm.enabled = row.enabled !== false
  } else {
    userForm.id = null
    userForm.username = ''
    userForm.password = ''
    userForm.role = 'CUSTOMER'
    userForm.nickname = ''
    userForm.enabled = true
  }
  userModalVisible.value = true
}

const submitUserModal = async () => {
  const username = (userForm.username || '').trim()
  const password = (userForm.password || '').trim()
  if (!username) return Message.warning('请输入账号')
  if (!userForm.id && !password) return Message.warning('请输入密码')
  await api.adminSaveUser({ ...userForm, username, password })
  Message.success(userForm.id ? '用户已更新' : '用户已新增')
  userModalVisible.value = false
  await loadUsers()
}

const deleteUser = async (id) => {
  await api.adminDeleteUser(id)
  Message.success('用户已删除')
  await loadUsers()
}

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

<style scoped>
.content-card {
  border-radius: 12px;
}

:deep(.arco-btn-primary) {
  background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
  border-color: transparent;
}

:deep(.arco-card-header) {
  border-bottom: 1px solid #f0f0f0;
}
</style>
