<script setup lang="ts">
import type { ExperimentItem, ClassItem, GroupItem } from '../types'
import { CirclePlus } from '@element-plus/icons-vue'
import StudentGroupFormDialog from './StudentGroupFormDialog.vue'
import AppList from '@/components/base/AppList.vue'
import { getExperimentClassGroupsList } from '../api'

interface Props {
  data: ClassItem
}
const props = defineProps<Props>()

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

const appList = $ref<InstanceType<typeof AppList> | null>(null)
// 列表配置
const listOptions = {
  remote: {
    httpRequest: getExperimentClassGroupsList,
    params: { experiment_id: detail?.id, class_id: props.data?.id },
    callback(data: GroupItem[]) {
      return { list: data, total: data.length }
    }
  },
  columns: [
    { label: '序号', type: 'index', width: 60 },
    { label: '小组名称', prop: 'name' },
    { label: '成员人数', prop: 'student_num' },
    { label: '操作', slots: 'table-x', width: 120 }
  ]
}
const dialogVisible = $ref(false)

// 刷新
function handleRefetch() {
  appList?.refetch()
}
</script>
<template>
  <el-dialog title="学生分组">
    <el-descriptions :column="2">
      <el-descriptions-item label="实验名称：">{{ detail.name }}</el-descriptions-item>
      <el-descriptions-item label="所属机构：">{{ detail.organ_id_name }}</el-descriptions-item>
      <el-descriptions-item label="班级名称：">{{ data.name }}</el-descriptions-item>
      <el-descriptions-item label="学生人数：">{{ data.student_nums }}</el-descriptions-item>
    </el-descriptions>
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <el-button
          type="primary"
          round
          :icon="CirclePlus"
          @click="dialogVisible = true"
          v-permission="'v1-backend-experiment-team-add'"
          >新增分组</el-button
        >
      </template>
      <template #table-x="{ row }">
        <el-button type="primary" link>
          <router-link
            :to="`/admin/system/experiment/group/${row.id}`"
            target="_blank"
            v-permission="'v1-backend-experiment-team-view'"
            >小组成员</router-link
          >
        </el-button>
      </template>
    </AppList>
    <StudentGroupFormDialog
      append-to-body
      v-model="dialogVisible"
      :data="data"
      @update="handleRefetch"
      v-if="dialogVisible"
    ></StudentGroupFormDialog>
  </el-dialog>
</template>
