<script setup>
import { Page } from '@vben/common-ui';
import { Button, Table, Modal, Form, Input, Select, message } from 'ant-design-vue';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { ref, h } from 'vue';

// 模拟用户数据
const users = ref([
  {
    id: 1,
    username: 'admin',
    email: 'admin@example.com',
    phone: '13800138000',
    roles: ['admin'],
  },
  {
    id: 2,
    username: 'user1',
    email: 'user1@example.com',
    phone: '13800138001',
    roles: ['user'],
  },
]);

// 表格列定义
const columns = [
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '用户权限',
    dataIndex: 'roles',
    key: 'roles',
    customRender: ({ text }) => text.join(', '),
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    customRender: ({ record }) => {
      return h('div', { class: 'action-buttons' }, [
        h(Button, {
          type: 'link',
          onClick: () => handleEdit(record)
        }, () => [h(EditOutlined), ' 编辑']),
        h(Button, {
          type: 'link',
          danger: true,
          onClick: () => handleDelete(record)
        }, () => [h(DeleteOutlined), ' 删除'])
      ]);
    }
  },
];

// 表单相关
const formRef = ref();
const formState = ref({
  username: '',
  password: '',
  email: '',
  phone: '',
  roles: [],
});
const modalVisible = ref(false);
const isEdit = ref(false);
const currentUserId = ref(null);

// 角色选项
const roleOptions = [
  { label: '管理员', value: 'admin' },
  { label: '普通用户', value: 'user' },
];

// 处理添加用户
const handleAdd = () => {
  isEdit.value = false;
  formState.value = {
    username: '',
    password: '',
    email: '',
    phone: '',
    roles: [],
  };
  modalVisible.value = true;
};

// 处理编辑用户
const handleEdit = (record) => {
  isEdit.value = true;
  currentUserId.value = record.id;
  formState.value = {
    username: record.username,
    password: '',
    email: record.email,
    phone: record.phone,
    roles: record.roles,
  };
  modalVisible.value = true;
};

// 处理删除用户
const handleDelete = (record) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除用户 ${record.username} 吗？`,
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      message.success('删除成功');
    },
  });
};

// 处理表单提交
const handleSubmit = () => {
  formRef.value.validate().then(() => {
    message.success(isEdit.value ? '编辑成功' : '添加成功');
    modalVisible.value = false;
  });
};

// 表单验证规则
const rules = {
  username: [{ required: true, message: '请输入用户名' }],
  password: [{ required: true, message: '请输入密码' }],
  email: [
    { required: true, message: '请输入邮箱' },
    { type: 'email', message: '请输入正确的邮箱格式' },
  ],
  phone: [
    { required: true, message: '请输入手机号' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式' },
  ],
  roles: [{ required: true, message: '请选择用户权限' }],
};
</script>

<template>
  <Page title="用户管理">
    <div class="table-operations">
      <Button type="primary" @click="handleAdd">
        <PlusOutlined /> 添加用户
      </Button>
    </div>

    <Table
      :columns="columns"
      :data-source="users"
      :row-key="record => record.id"
      :pagination="false"
    />

    <Modal
      :title="isEdit ? '编辑用户' : '添加用户'"
      v-model:visible="modalVisible"
      @ok="handleSubmit"
      :maskClosable="false"
    >
      <Form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
      >
        <Form.Item label="用户名" name="username">
          <Input v-model:value="formState.username" placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item label="密码" name="password">
          <Input.Password v-model:value="formState.password" placeholder="请输入密码" />
        </Form.Item>
        <Form.Item label="邮箱" name="email">
          <Input v-model:value="formState.email" placeholder="请输入邮箱" />
        </Form.Item>
        <Form.Item label="手机号" name="phone">
          <Input v-model:value="formState.phone" placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item label="用户权限" name="roles">
          <Select
            v-model:value="formState.roles"
            mode="multiple"
            placeholder="请选择用户权限"
            :options="roleOptions"
          />
        </Form.Item>
      </Form>
    </Modal>
  </Page>
</template>

<style lang="scss" scoped>
.table-operations {
  margin-bottom: 16px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}
</style>