<template>
  <div class="user-list">
    <a-card :bordered="false">
      <!-- 搜索区域 -->
      <a-form layout="inline" :model="searchForm" @submit="handleSearch">
        <a-form-item label="用户名" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-input v-model:value="searchForm.username" placeholder="请输入用户名" allow-clear />
        </a-form-item>
        <a-form-item label="手机号" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-input v-model:value="searchForm.phone" placeholder="请输入手机号" allow-clear />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" html-type="submit">查询</a-button>
            <a-button @click="resetSearch">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <!-- 操作按钮区域 -->
      <div class="table-operations">
        <a-space>
          <a-button type="primary" @click="handleAdd">
            <template #icon>
              <plus-outlined />
            </template>
            新增用户
          </a-button>
        </a-space>
      </div>

      <!-- 表格区域 -->
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="loading"
        :pagination="pagination"
        :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
        row-key="id"
        @change="handleTableChange"
      >
        <!-- 状态列 -->
        <template #status="{ text }">
          <a-tag :color="text ? 'success' : 'error'">
            {{ text ? '启用' : '禁用' }}
          </a-tag>
        </template>

        <!-- 操作列 -->
        <template #action="{ record }">
          <a-space>
            <a-button type="link" @click="handleEdit(record)">编辑</a-button>
            <a-button type="link" @click="handleDetail(record)">详情</a-button>
            <a-button type="link" @click="handleChangePassword(record)">修改密码</a-button>
            <a-popconfirm title="确定要删除这条记录吗？" @confirm="handleDelete(record)">
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';

  const router = useRouter();

  // 搜索表单数据
  const searchForm = reactive({
    username: '',
    phone: '',
  });

  // 表格列配置
  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      width: 120,
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      width: 120,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      width: 120,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      slots: { customRender: 'status' },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 180,
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 280,
      slots: { customRender: 'action' },
    },
  ];

  // 表格数据
  const loading = ref(false);
  const tableData = ref<any[]>([]);
  const selectedRowKeys = ref<string[]>([]);
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    showQuickJumper: true,
  });

  // 获取表格数据
  const getTableData = async () => {
    loading.value = true;
    try {
      // TODO: 调用接口获取数据
      // const res = await getUserList({
      //   ...searchForm,
      //   page: pagination.current,
      //   pageSize: pagination.pageSize,
      // });
      // tableData.value = res.data.list;
      // pagination.total = res.data.total;

      // 模拟数据
      tableData.value = Array.from({ length: 10 }).map((_, index) => ({
        id: index + 1,
        username: `user${index + 1}`,
        nickname: `用户${index + 1}`,
        phone: '13800138000',
        email: `user${index + 1}@example.com`,
        status: index % 2,
        createTime: '2024-03-20 12:00:00',
      }));
      pagination.total = 100;
    } finally {
      loading.value = false;
    }
  };

  // 表格选择改变
  const onSelectChange = (keys: string[]) => {
    selectedRowKeys.value = keys;
  };

  // 表格分页、排序、筛选变化
  const handleTableChange = (pag: any) => {
    pagination.current = pag.current;
    pagination.pageSize = pag.pageSize;
    getTableData();
  };

  // 搜索
  const handleSearch = () => {
    pagination.current = 1;
    getTableData();
  };

  // 重置搜索
  const resetSearch = () => {
    searchForm.username = '';
    searchForm.phone = '';
    handleSearch();
  };

  // 新增用户
  const handleAdd = () => {
    router.push('/user/add');
  };

  // 编辑用户
  const handleEdit = (record: any) => {
    router.push(`/user/edit/${record.id}`);
  };

  // 查看详情
  const handleDetail = (record: any) => {
    router.push(`/user/detail/${record.id}`);
  };

  // 修改密码
  const handleChangePassword = (record: any) => {
    router.push(`/user/change-password/${record.id}`);
  };

  // 删除用户
  const handleDelete = async (record: any) => {
    // TODO: 调用删除接口
    message.success('删除成功');
    getTableData();
  };

  // 初始化
  getTableData();
</script>

<style lang="less" scoped>
  .user-list {
    .table-operations {
      margin: 16px 0;
    }
  }
</style>
