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

import { getExperiment, experimentAddClass } from '../api'

const SelectClassDialog = defineAsyncComponent(() => import('../components/SelectClassDialog.vue'))
const StudentGroupDialog = defineAsyncComponent(() => import('../components/StudentGroupDialog.vue'))
const StudentListDialog = defineAsyncComponent(() => import('../components/StudentListDialog.vue'))

interface Props {
  id: string
}
const props = defineProps<Props>()

let detail = $ref<ExperimentItem | null>(null)
provide('detail', $$(detail))

const appList = $ref<InstanceType<typeof AppList> | null>(null)
// 列表配置
const listOptions = {
  remote: {
    httpRequest: getExperiment,
    params: { experiment_id: props.id },
    callback(data: { total: number; list: ClassItem[]; info: ExperimentItem }) {
      const { total, list, info } = data
      detail = info
      return { list, total }
    }
  },
  columns: [
    { label: '序号', type: 'index', width: 60 },
    { label: '专业名称', prop: 'specialty_id_name' },
    { label: '班级名称', prop: 'name' },
    { label: '学生人数', prop: 'student_nums' },
    { label: '更新时间', prop: 'updated_time' },
    { label: '操作', slots: 'table-x', width: 300 }
  ]
}
// 刷新
function handleRefetch() {
  appList?.refetch()
}

let rowData = $ref<ClassItem | null>(null)

// 关联班级
const selectClassVisible = $ref(false)

// 查看学生
let studentListVisible = $ref(false)
function handleViewStudent(row: ClassItem) {
  rowData = row
  studentListVisible = true
}
// 学生分组
let studentGroupVisible = $ref(false)
function handleStudentGroup(row: ClassItem) {
  rowData = row
  studentGroupVisible = true
}
// 移除班级
function handleRemoveClass(row: ClassItem) {
  ElMessageBox.confirm('确定要移除吗？', '提示').then(() => {
    experimentAddClass({ experiment_id: props.id, classes_id: row.id, type: 'delete' }).then(() => {
      ElMessage({ message: '移除成功', type: 'success' })
      appList?.refetch()
    })
  })
}
</script>

<template>
  <AppCard title="实验管理">
    <el-descriptions class="descriptions-box" v-if="detail">
      <el-descriptions-item label="实验名称：">{{ detail.name }}</el-descriptions-item>
      <el-descriptions-item label="实验课程：">{{ detail.course_name }}</el-descriptions-item>
      <el-descriptions-item label="所属机构/学校：">{{ detail.organ_id_name }}</el-descriptions-item>
    </el-descriptions>
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <el-button
          type="primary"
          :icon="CirclePlus"
          @click="selectClassVisible = true"
          v-permission="'v1-backend-experiment-class-add'"
          >关联班级</el-button
        >
      </template>
      <template #table-x="{ row }">
        <el-button
          type="primary"
          round
          @click="handleViewStudent(row)"
          v-permission="'v1-backend-experiment-class-students'"
          >查看学生</el-button
        >
        <el-button
          type="primary"
          round
          @click="handleStudentGroup(row)"
          v-permission="'v1-backend-experiment-class-teams'"
          >学生分组</el-button
        >
        <el-button type="primary" round @click="handleRemoveClass(row)" v-permission="'v1-backend-experiment-class-add'"
          >移除</el-button
        >
      </template>
    </AppList>
  </AppCard>
  <!-- 关联班级 -->
  <SelectClassDialog v-model="selectClassVisible" @update="handleRefetch" v-if="selectClassVisible"></SelectClassDialog>
  <!-- 学生分组 -->
  <StudentGroupDialog
    v-model="studentGroupVisible"
    :data="rowData"
    v-if="studentGroupVisible && rowData"
  ></StudentGroupDialog>
  <!-- 查看学生 -->
  <StudentListDialog
    v-model="studentListVisible"
    :data="rowData"
    v-if="studentListVisible && rowData"
  ></StudentListDialog>
</template>
