<template>
  <div class="user-page">
    <div class="page-header">
      <h1 class="page-title">用户管理</h1>
    </div>

    <div class="page-content">
      <!-- 搜索和筛选栏 -->
      <div class="toolbar">
        <div class="search-section">
          <a-input-search
              v-model:value="searchKeyword"
              placeholder="搜索学生姓名或家长手机号"
              style="width: 300px"
              @search="handleSearch"
          />

          <a-select
              v-model:value="filterSchool"
              placeholder="选择学校"
              style="width: 150px; margin-left: 8px"
              allow-clear
              show-search
              @change="handleSearch"
          >
            <a-select-option v-for="school in schoolOptions" :key="school.id" :value="school.id">
              {{ school.name }}
            </a-select-option>
          </a-select>

          <a-select
              v-model:value="filterGrade"
              placeholder="年级"
              style="width: 100px; margin-left: 8px"
              allow-clear
              @change="handleSearch"
          >
            <a-select-option v-for="grade in gradeOptions" :key="grade.id" :value="grade.id">
              {{ grade.name }}
            </a-select-option>
          </a-select>

          <a-select
              v-model:value="filterClass"
              placeholder="班级"
              style="width: 120px; margin-left: 8px"
              allow-clear
              @change="handleSearch"
          >
            <a-select-option v-for="cls in classOptions" :key="cls.id" :value="cls.id">
              {{ cls.name }}
            </a-select-option>
          </a-select>
        </div>

        <div class="action-section">
          <a-button @click="handleRefresh">
            <ReloadOutlined/>
            刷新
          </a-button>
        </div>
      </div>

      <!-- 用户列表 -->
      <UserList
          :loading="loading"
          :data-source="users"
          :pagination="pagination"
          @view-detail="handleViewDetail"
          @unbind="handleUnbind"
          @disable="handleDisable"
          @enable="handleEnable"
          @page-change="handlePageChange"
      />
    </div>

    <!-- 用户详情弹窗 -->
    <UserDetailModal
        v-model:visible="detailVisible"
        :user="currentUser"
    />
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue';
import {message, Modal} from 'ant-design-vue';
import {ReloadOutlined} from '@ant-design/icons-vue';
import {useRequest} from 'alova/client';
import {getUserList, unbindParentStudent, disableUser, enableUser} from '@/apis/users';
import {getSchoolList} from '@/apis/schools';
import type {AppUser, UserQueryParams} from '@/apis/users';
import type {School} from '@/apis/schools';

// 导入子组件
import UserList from './components/UserList.vue';
import UserDetailModal from './components/UserDetailModal.vue';

// 搜索筛选参数
const searchKeyword = ref('');
const filterSchool = ref<string>();
const filterGrade = ref<string>();
const filterClass = ref<string>();

// 列表数据
const users = ref<AppUser[]>([]);

// 分页
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`
});

// 详情弹窗
const detailVisible = ref(false);
const currentUser = ref<AppUser>();

// 筛选选项
const schoolOptions = ref<School[]>([]);
const gradeOptions = ref<any[]>([]);
const classOptions = ref<any[]>([]);

// 获取用户列表
const {loading, send: fetchUsers} = useRequest((params: UserQueryParams) => getUserList(params), {
  immediate: false
});

// 获取学校列表（用于筛选）
const {send: fetchSchools} = useRequest(() => getSchoolList(), {
  immediate: false
});

// 构建查询参数
const buildQueryParams = (): UserQueryParams => {
  return {
    page: pagination.current,
    pageSize: pagination.pageSize,
    keyword: searchKeyword.value || undefined,
    schoolId: filterSchool.value,
    gradeId: filterGrade.value,
    classId: filterClass.value
  };
};

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

// 加载用户列表
const loadUsers = async () => {
  try {
    const params = buildQueryParams();
    const result = await fetchUsers(params);

    users.value = result.list;
    pagination.total = result.total;
  } catch (error: any) {
    message.error(error.message || '获取用户列表失败');
  }
};

// 加载学校数据
const loadSchools = async () => {
  try {
    const result = await fetchSchools();
    schoolOptions.value = result.list;

    // 提取年级和班级选项
    const grades = new Map();
    const classes = new Map();

    result.list.forEach(school => {
      if (school.grades) {
        school.grades.forEach(grade => {
          grades.set(grade.id, {
            id: grade.id,
            name: grade.name,
            schoolId: grade.schoolId
          });

          if (grade.classes) {
            grade.classes.forEach(cls => {
              classes.set(cls.id, {
                id: cls.id,
                name: cls.name,
                gradeId: cls.gradeId,
                schoolId: cls.schoolId
              });
            });
          }
        });
      }
    });

    gradeOptions.value = Array.from(grades.values());
    classOptions.value = Array.from(classes.values());

  } catch (error: any) {
    message.error(error.message || '获取学校数据失败');
  }
};

// 查看详情
const handleViewDetail = (user: AppUser) => {
  currentUser.value = user;
  detailVisible.value = true;
};

// 解绑用户
const handleUnbind = (user: AppUser) => {
  Modal.confirm({
    title: '确认解绑',
    content: `确定要解绑家长"${user.nickname || user.phone}"与学生"${user.studentName}"的关系吗？`,
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    async onOk() {
      try {
        await unbindParentStudent(user.id);
        message.success('解绑成功');
        loadUsers();
      } catch (error: any) {
        message.error(error.message || '解绑失败');
      }
    }
  });
};

// 禁用用户
const handleDisable = (user: AppUser) => {
  Modal.confirm({
    title: '确认禁用',
    content: `确定要禁用用户"${user.nickname || user.phone}"吗？禁用后该用户将无法正常使用小程序。`,
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    async onOk() {
      try {
        await disableUser(user.id);
        message.success('禁用成功');
        loadUsers();
      } catch (error: any) {
        message.error(error.message || '禁用失败');
      }
    }
  });
};

// 启用用户
const handleEnable = (user: AppUser) => {
  Modal.confirm({
    title: '确认启用',
    content: `确定要启用用户"${user.nickname || user.phone}"吗？`,
    okText: '确定',
    cancelText: '取消',
    async onOk() {
      try {
        await enableUser(user.id);
        message.success('启用成功');
        loadUsers();
      } catch (error: any) {
        message.error(error.message || '启用失败');
      }
    }
  });
};

// 刷新数据
const handleRefresh = () => {
  loadUsers();
};

// 分页改变
const handlePageChange = (page: number, pageSize: number) => {
  pagination.current = page;
  pagination.pageSize = pageSize;
  loadUsers();
};

// 初始化
onMounted(() => {
  loadUsers();
  loadSchools();
});
</script>

<style scoped lang="scss">
.user-page {
  .page-header {
    background: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    
    .page-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #262626;
    }
  }

  .page-content {
    // margin-top: 24px; // 移除多余的margin
  }

  .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    .search-section {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 0;
    }

    .action-section {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;

    .search-section {
      justify-content: flex-start;
    }

    .action-section {
      justify-content: flex-end;
    }
  }
}
</style>
