<!--
  页面开发示例代码
  展示项目中页面组件的编写规范和最佳实践
-->

<script lang="ts" setup>
/**
 * 导入顺序规范：
 * 1. Vue 框架相关
 * 2. 第三方库
 * 3. 工具函数
 * 4. API 接口
 * 5. 状态管理
 * 6. 本地组件
 */
import { ref, reactive, computed, onMounted, onShow, watch } from 'vue';
import { getUserList, getRoleList, createUser, updateUser, deleteUser, type User } from '@/api/user';
import { useUserStore } from '@/store/user';
import { debounce } from '@/utils/common';
import UserForm from './components/UserForm.vue';

// ✅ 页面配置（使用 definePage 宏）
definePage({
  style: {
    navigationBarTitleText: '用户管理',
    // 可以添加其他页面配置
  },
});

/**
 * 响应式数据定义
 */

// 加载状态
const loading = ref(false);

// 用户列表
const userList = ref<User[]>([]);

// 搜索参数
const searchParams = reactive({
  keyword: '',
  status: '',
});

// 分页参数
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0,
});

// 选中的用户列表
const selectedUsers = ref<number[]>([]);

// 是否显示表单弹窗
const showUserForm = ref(false);

// 表单模式（add/edit）
const formMode = ref<'add' | 'edit'>('add');

// 当前编辑的用户
const currentUser = ref<User | null>(null);

// 角色列表（用于用户表单）
const roleList = ref([]);

/**
 * 计算属性
 */

// 表格选中状态
const isAllSelected = computed(() => {
  return userList.value.length > 0 && selectedUsers.value.length === userList.value.length;
});

const isIndeterminate = computed(() => {
  return selectedUsers.value.length > 0 && selectedUsers.value.length < userList.value.length;
});

/**
 * 方法定义
 */

// ✅ 初始化数据
/**
 * 初始化页面数据
 */
const initData = async () => {
  await Promise.all([getUserData(), getRoleData()]);
};

// ✅ 获取用户列表
/**
 * 获取用户列表数据
 */
const getUserData = async () => {
  loading.value = true;
  try {
    const result = await getUserList({
      ...searchParams,
      page: pagination.current,
      size: pagination.size,
    });
    userList.value = result.data;
    pagination.total = result.total;
    // 清空选中状态
    selectedUsers.value = [];
  } catch (error) {
    console.error('获取用户列表失败:', error);
    uni.showToast({
      title: '获取数据失败',
      icon: 'none',
    });
  } finally {
    loading.value = false;
  }
};

// ✅ 获取角色列表
/**
 * 获取角色列表（用于用户表单）
 */
const getRoleData = async () => {
  try {
    const result = await getRoleList();
    roleList.value = result;
  } catch (error) {
    console.error('获取角色列表失败:', error);
  }
};

// ✅ 防抖搜索
/**
 * 防抖搜索处理
 */
const handleSearch = debounce(() => {
  pagination.current = 1; // 重置页码
  getUserData();
}, 500);

// ✅ 搜索框输入
/**
 * 搜索框输入处理
 * @param value 输入值
 */
const handleSearchInput = (value: string) => {
  searchParams.keyword = value;
  handleSearch();
};

// ✅ 清空搜索
/**
 * 清空搜索条件
 */
const handleSearchClear = () => {
  searchParams.keyword = '';
  handleSearch();
};

// ✅ 分页改变
/**
 * 分页改变处理
 * @param page 页码
 */
const handlePageChange = (page: number) => {
  pagination.current = page;
  getUserData();
};

// ✅ 添加用户
/**
 * 打开添加用户弹窗
 */
const handleAddUser = () => {
  formMode.value = 'add';
  currentUser.value = null;
  showUserForm.value = true;
};

// ✅ 编辑用户
/**
 * 打开编辑用户弹窗
 * @param user 用户信息
 */
const handleEditUser = (user: User) => {
  formMode.value = 'edit';
  currentUser.value = { ...user };
  showUserForm.value = true;
};

// ✅ 删除用户
/**
 * 删除用户确认
 * @param user 用户信息
 */
const handleDeleteUser = (user: User) => {
  uni.showModal({
    title: '确认删除',
    content: `确定要删除用户"${user.nickname}"吗？`,
    success: async (res) => {
      if (res.confirm) {
        await confirmDelete(user.id);
      }
    },
  });
};

// ✅ 确认删除
/**
 * 确认删除用户
 * @param id 用户ID
 */
const confirmDelete = async (id: number) => {
  try {
    await deleteUser(id);
    uni.showToast({
      title: '删除成功',
      icon: 'success',
    });
    // 刷新列表
    getUserData();
  } catch (error) {
    console.error('删除用户失败:', error);
    uni.showToast({
      title: '删除失败',
      icon: 'none',
    });
  }
};

// ✅ 批量删除
/**
 * 批量删除用户
 */
const handleBatchDelete = () => {
  if (selectedUsers.value.length === 0) {
    uni.showToast({
      title: '请选择要删除的用户',
      icon: 'none',
    });
    return;
  }

  uni.showModal({
    title: '确认删除',
    content: `确定要删除选中的 ${selectedUsers.value.length} 个用户吗？`,
    success: async (res) => {
      if (res.confirm) {
        try {
          // 这里应该调用批量删除 API
          // await batchDeleteUsers(selectedUsers.value);
          uni.showToast({
            title: '批量删除成功',
            icon: 'success',
          });
          getUserData();
        } catch (error) {
          console.error('批量删除失败:', error);
          uni.showToast({
            title: '删除失败',
            icon: 'none',
          });
        }
      }
    },
  });
};

// ✅ 全选/取消全选
/**
 * 表格全选切换
 * @param checked 是否选中
 */
const handleSelectAll = (checked: boolean) => {
  if (checked) {
    selectedUsers.value = userList.value.map((user) => user.id);
  } else {
    selectedUsers.value = [];
  }
};

// ✅ 单选切换
/**
 * 单个用户选择切换
 * @param user 用户信息
 */
const handleSelectItem = (user: User) => {
  const index = selectedUsers.value.indexOf(user.id);
  if (index === -1) {
    selectedUsers.value.push(user.id);
  } else {
    selectedUsers.value.splice(index, 1);
  }
};

// ✅ 表单提交成功
/**
 * 用户表单提交成功回调
 */
const handleFormSuccess = () => {
  showUserForm.value = false;
  currentUser.value = null;
  // 刷新列表
  getUserData();
};

// ✅ 状态切换
/**
 * 切换用户状态
 * @param user 用户信息
 */
const handleToggleStatus = async (user: User) => {
  try {
    await updateUser({
      id: user.id,
      status: user.status === 0 ? 1 : 0,
    });
    uni.showToast({
      title: '状态更新成功',
      icon: 'success',
    });
    // 刷新列表
    getUserData();
  } catch (error) {
    console.error('更新状态失败:', error);
    uni.showToast({
      title: '操作失败',
      icon: 'none',
    });
  }
};

/**
 * 生命周期钩子
 */
onMounted(() => {
  initData();
});

onShow(() => {
  // 页面显示时刷新数据（可选）
});
</script>

<template>
  <view class="user-manage-page">
    <!-- ✅ 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <input
          v-model="searchParams.keyword"
          placeholder="请输入用户名或昵称"
          @input="handleSearchInput"
          @clear="handleSearchClear"
        />
      </view>
      <picker
        :value="searchParams.status"
        @change="handleStatusChange"
        :range="[{label:'全部', value:''}, {label:'正常', value:0}, {label:'禁用', value:1}]"
        range-key="label"
      >
        <view class="status-picker">
          <text>{{ searchParams.status === '' ? '全部' : searchParams.status === 0 ? '正常' : '禁用' }}</text>
          <text class="arrow">▼</text>
        </view>
      </picker>
    </view>

    <!-- ✅ 操作栏 -->
    <view class="action-bar">
      <button class="add-btn" @click="handleAddUser">添加用户</button>
      <button
        class="delete-btn"
        :disabled="selectedUsers.length === 0"
        @click="handleBatchDelete"
      >
        批量删除 ({{ selectedUsers.length }})
      </button>
    </view>

    <!-- ✅ 用户表格 -->
    <view class="user-table">
      <view class="table-header">
        <checkbox
          :checked="isAllSelected"
          :indeterminate="isIndeterminate"
          @tap="handleSelectAll"
        />
        <text class="th">用户名</text>
        <text class="th">昵称</text>
        <text class="th">状态</text>
        <text class="th">操作</text>
      </view>

      <view class="table-body" v-if="!loading && userList.length > 0">
        <view
          v-for="user in userList"
          :key="user.id"
          class="table-row"
        >
          <checkbox
            :checked="selectedUsers.includes(user.id)"
            @tap="handleSelectItem(user)"
          />
          <text class="td">{{ user.username }}</text>
          <text class="td">{{ user.nickname }}</text>
          <view class="td">
            <text
              class="status-badge"
              :class="{ 'status-active': user.status === 0 }"
              @tap="handleToggleStatus(user)"
            >
              {{ user.status === 0 ? '正常' : '禁用' }}
            </text>
          </view>
          <view class="td action-buttons">
            <button class="edit-btn" @tap="handleEditUser(user)">编辑</button>
            <button class="delete-btn" @tap="handleDeleteUser(user)">删除</button>
          </view>
        </view>
      </view>

      <!-- ✅ 加载中 -->
      <view class="loading-container" v-if="loading">
        <text>加载中...</text>
      </view>

      <!-- ✅ 空数据 -->
      <view class="empty-container" v-if="!loading && userList.length === 0">
        <text>暂无数据</text>
      </view>
    </view>

    <!-- ✅ 分页 -->
    <view class="pagination" v-if="pagination.total > 0">
      <text>共 {{ pagination.total }} 条记录</text>
      <!-- 这里可以使用 uni-app 的分页组件 -->
    </view>

    <!-- ✅ 用户表单弹窗 -->
    <user-form
      v-model="showUserForm"
      :mode="formMode"
      :user="currentUser"
      :role-list="roleList"
      @success="handleFormSuccess"
    />
  </view>
</template>

<style scoped lang="scss">
.user-manage-page {
  padding: 20rpx;
}

/* 搜索栏 */
.search-bar {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;

  .search-input {
    flex: 1;
    padding: 10rpx 20rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
  }

  .status-picker {
    display: flex;
    align-items: center;
    gap: 10rpx;
    padding: 10rpx 20rpx;
    background: #f5f5f5;
    border-radius: 8rpx;

    .arrow {
      font-size: 20rpx;
      color: #999;
    }
  }
}

/* 操作栏 */
.action-bar {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;

  .add-btn,
  .delete-btn {
    padding: 20rpx 40rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
  }

  .add-btn {
    background: #4a90ff;
    color: white;
  }

  .delete-btn {
    background: #f56c6c;
    color: white;

    &[disabled] {
      background: #ccc;
    }
  }
}

/* 表格 */
.user-table {
  background: white;
  border-radius: 8rpx;
  overflow: hidden;
}

.table-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f5f5f5;
  font-weight: 600;

  .th {
    flex: 1;
    margin-left: 20rpx;
  }
}

.table-row {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .td {
    flex: 1;
    margin-left: 20rpx;
  }

  .status-badge {
    padding: 8rpx 16rpx;
    border-radius: 4rpx;
    font-size: 24rpx;
    background: #f56c6c;
    color: white;

    &.status-active {
      background: #67c23a;
    }
  }

  .action-buttons {
    display: flex;
    gap: 10rpx;

    button {
      padding: 8rpx 16rpx;
      border-radius: 4rpx;
      font-size: 24rpx;

      &.edit-btn {
        background: #4a90ff;
        color: white;
      }

      &.delete-btn {
        background: #f56c6c;
        color: white;
      }
    }
  }
}

/* 空状态 */
.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx;
  color: #999;
}

/* 分页 */
.pagination {
  margin-top: 20rpx;
  text-align: center;
  color: #666;
}
</style>
