<script setup lang="ts">
import type { GroupItem, StudentItem } from '../types'
import { ElMessage } from 'element-plus'
import { getExperimentGroupStudentList, experimentGroupAddStudent } from '../api'

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

const detail = $ref<GroupItem>(inject('detail'))

// 列表配置
const listOptions = {
  remote: {
    httpRequest: getExperimentGroupStudentList,
    params: { team_id: detail?.id }
  },
  columns: [
    { type: 'selection' },
    { label: '学号', prop: 'name' },
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'name' },
    { label: '部门/学校', prop: 'name' },
    { label: '专业', prop: 'name' },
    { label: '班级', prop: 'name' }
  ]
}

let multipleSelection = $ref<StudentItem[]>([])
function handleSelectionChange(selection: StudentItem[]) {
  multipleSelection = selection
}

function handleSubmit() {
  const students_id = multipleSelection.map(item => item.id).join(',')
  experimentGroupAddStudent({ team_id: detail.id, students_id, type: 'add' }).then(() => {
    ElMessage({ message: '添加成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
</script>
<template>
  <el-dialog title="添加小组成员" @update:modelValue="$emit('update:modelValue')">
    <AppList v-bind="listOptions" @selection-change="handleSelectionChange"></AppList>
    <el-row justify="center">
      <el-button type="primary" round :disabled="!multipleSelection.length" @click="handleSubmit"
        >添加选择学生</el-button
      >
      <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
    </el-row>
  </el-dialog>
</template>
