<!--
  学生绑定弹窗
  @author pangu
-->
<template>
  <el-dialog
    v-model="dialogVisible"
    title="选择学生"
    width="800px"
    :close-on-click-modal="false"
    @open="handleOpen"
  >
    <!-- 搜索区域 -->
    <el-form :model="queryParams" :inline="true" class="search-form">
      <el-form-item label="姓名">
        <el-input
          v-model="queryParams.studentName"
          placeholder="请输入学生姓名"
          clearable
          style="width: 150px"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      <el-form-item label="学号">
        <el-input
          v-model="queryParams.studentNo"
          placeholder="请输入学号"
          clearable
          style="width: 150px"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 提示信息 -->
    <el-alert
      v-if="identityType === '2'"
      type="info"
      :closable="false"
      show-icon
      style="margin-bottom: 16px"
    >
      <template #title>
        教师身份只能绑定本校学生
      </template>
    </el-alert>

    <!-- 学生列表 -->
    <el-table
      ref="tableRef"
      v-loading="loading"
      :data="studentList"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="姓名" prop="studentName" width="100" />
      <el-table-column label="学号" prop="studentNo" width="140" />
      <el-table-column label="学校" prop="schoolName" min-width="150" show-overflow-tooltip />
      <el-table-column label="年级" prop="gradeName" width="100" />
      <el-table-column label="班级" prop="className" width="80" />
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      :total="total"
      :page-sizes="[10, 20, 50]"
      layout="total, sizes, prev, pager, next"
      @size-change="getList"
      @current-change="getList"
    />

    <template #footer>
      <span class="selected-info">已选择 {{ selectedStudents.length }} 名学生</span>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm" :disabled="selectedStudents.length === 0">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { getBindableStudents } from '@/api/member'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  identityType: {
    type: String,
    default: '1'
  },
  schoolId: {
    type: [Number, String],
    default: null
  },
  excludeIds: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:visible', 'confirm'])

// 弹窗显示状态
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
})

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  studentName: '',
  studentNo: ''
})

// 数据
const studentList = ref([])
const total = ref(0)
const loading = ref(false)
const selectedStudents = ref([])

// 表格引用
const tableRef = ref(null)

// 弹窗打开时
function handleOpen() {
  selectedStudents.value = []
  queryParams.studentName = ''
  queryParams.studentNo = ''
  queryParams.pageNum = 1
  getList()
}

// 获取学生列表
async function getList() {
  loading.value = true
  try {
    const params = {
      ...queryParams,
      excludeIds: props.excludeIds.join(','),
      // 教师身份限制本校学生
      schoolId: props.identityType === '2' ? props.schoolId : undefined
    }
    
    const res = await getBindableStudents(params)
    if (res.code === 200) {
      studentList.value = res.rows || []
      total.value = res.total || 0
    }
  } catch (error) {
    console.error('获取学生列表失败:', error)
    studentList.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 搜索
function handleSearch() {
  queryParams.pageNum = 1
  getList()
}

// 重置
function resetSearch() {
  queryParams.studentName = ''
  queryParams.studentNo = ''
  handleSearch()
}

// 选择变化
function handleSelectionChange(selection) {
  selectedStudents.value = selection
}

// 确认选择
function handleConfirm() {
  emit('confirm', [...selectedStudents.value])
  dialogVisible.value = false
}
</script>

<style scoped>
.search-form {
  margin-bottom: 16px;
}

.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.selected-info {
  float: left;
  color: #909399;
  line-height: 32px;
}
</style>
