<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { useProjectList } from '@/composables/useGetProjectList'

import AddClass from '../components/AddClass.vue'
import ClassStudents from '../components/ClassStudents.vue'
import RelatedTerm from '../components/RelatedTerm.vue'
import { useUserStore } from '@/stores/user'
import { getClassList, updateClass } from '../api'
import ImportClass from '../components/ImportClass.vue'

const departmentList: any = useProjectList('', '79806610719731712').departmentList

// 判断当前用户是不是超级管理员
const user = useUserStore().roles
const isAdmin = !!user.find((item: any) => item.name === '超级管理员')
const appList = ref()
const id = ref('')
const title = ref('')
const isEdit = ref('')
const isShowClassDialog = ref(false)
const isShowClassStuDialog = ref(false)
const isRelatingDialog = ref(false)
const listOptions = $computed(() => {
  return {
    remote: { httpRequest: getClassList, params: { name: '', organ_id: '' } },
    filters: [
      { type: 'input', prop: 'name', label: '班级名称：', placeholder: '班级名称' },
      { type: 'select', prop: 'organ_id', slots: 'filter-department' }
    ],
    columns: [
      { label: '序号', type: 'index', align: 'center' },
      { label: '班级代码', prop: 'code', align: 'center' },
      { label: '班级名称', prop: 'name', align: 'center' },
      { label: '所属部门/学校', prop: 'organ_id_name', align: 'center' },
      { label: '人数', prop: 'student_nums', align: 'center' },
      { label: '班主任', prop: 'teacher_id_name', align: 'center' },
      { label: '专业', prop: 'specialty_id_name', align: 'center' },
      { label: '入学年份', prop: 'start_year_name', align: 'center' },
      { label: '生效状态', slots: 'status', align: 'center' },
      { label: '更新时间', prop: 'updated_time', align: 'center', width: 200 },
      { label: '操作', slots: 'table-operate', align: 'center', width: 300, fixed: 'right' }
    ]
  }
})
const handleAddClass = () => {
  isShowClassDialog.value = true
  title.value = '新增班级'
  isEdit.value = '0'
}
const handleEdit = (row: any) => {
  isShowClassDialog.value = true
  title.value = '编辑班级'
  id.value = row.id
  isEdit.value = '1'
}
const handleDetail = (row: any) => {
  isShowClassDialog.value = true
  title.value = '查看详情'
  id.value = row.id
  isEdit.value = '2'
}
const handleClassStu = (row: any) => {
  isShowClassStuDialog.value = true
  id.value = row.id
}
// 关联学期
const handleRelating = (row: any) => {
  isRelatingDialog.value = true
  id.value = row.id
}
// 更新班级状态
const handleChangeStatus = (row: any) => {
  if (row.id !== undefined) {
    const params: any = Object.assign({}, row)
    updateClass(params).then(() => {
      ElMessage.success('更新班级成功')
      handleRefresh()
    })
  }
}
const handleRefresh = () => {
  appList.value.refetch()
}
const isShowImportDialog = ref(false)
// 批量导入
const handleImport = () => {
  isShowImportDialog.value = true
}
</script>

<template>
  <AppCard title="班级管理">
    <AppList v-bind="listOptions" ref="appList" border stripe style="margin-top: 30px">
      <el-button type="primary" round @click="handleAddClass" v-permission="'v1-learning-class-create'"
        >新增班级</el-button
      >
      <el-button type="primary" round @click="handleImport">批量导入</el-button>

      <template v-if="isAdmin" #filter-department="{ params }">
        <div class="name" style="font-size: 14px; color: #606266; padding-right: 12px">所属部门/学校：</div>
        <el-select @change="handleRefresh" clearable v-model="params.organ_id" placeholder="请选择所属部门/学校">
          <el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </template>
      <template #status="{ row }">
        <el-switch
          size="large"
          v-model="row.status"
          active-value="1"
          inactive-value="0"
          inline-prompt
          style="--el-switch-on-color: #aa1941"
          @change="handleChangeStatus(row)"
          :disabled="!isAdmin"></el-switch>
      </template>
      <template #table-operate="{ row }">
        <el-space>
          <el-link type="primary" plain @click="handleDetail(row)" v-permission="'v1-learning-class-view'"
            >查看</el-link
          >
          <el-link type="primary" plain @click="handleEdit(row)" v-permission="'v1-learning-class-update'"
            >编辑</el-link
          >
          <el-link type="primary" plain @click="handleClassStu(row)" v-permission="'v1-learning-class-students'"
            >班级学生</el-link
          >
          <el-link type="primary" plain @click="handleRelating(row)" v-permission="'v1-learning-class-add-semesters'"
            >关联学期</el-link
          >
        </el-space>
      </template>
    </AppList>
  </AppCard>
  <AddClass
    v-model:isShowClassDialog="isShowClassDialog"
    v-if="isShowClassDialog === true"
    :title="title"
    :id="id"
    :isEdit="isEdit"
    @create="handleRefresh" />
  <ClassStudents v-model:isShowClassStuDialog="isShowClassStuDialog" v-if="isShowClassStuDialog === true" :id="id" />
  <RelatedTerm v-model:isRelatingDialog="isRelatingDialog" v-if="isRelatingDialog === true" :id="id" />
  <!-- 导入学生 -->
  <ImportClass v-if="isShowImportDialog" v-model:isShowImportDialog="isShowImportDialog" @create="handleRefresh" />
</template>
