<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'

import AddTermDialog from './AddTermDialog.vue'
import AddSemester from '../../semester/components/AddSemester.vue'

import { getClassSemList, relationClassSem } from '../api'
const emit = defineEmits<Emits>()
const appList = ref()
const title = ref('')
const id: any = ref('')
const isShowTermDialog = ref(false)
const isShowAddSemDialog = ref(false)
const classInfo: any = ref({})

const props = defineProps({
  isRelatingDialog: {
    type: Boolean
  },
  id: {
    type: String
  }
})
interface Emits {
  (e: 'update:isRelatingDialog', isRelatingDialog: boolean): void
}
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getClassSemList,
      params: { class_id: props.id },
      callback(data: any) {
        classInfo.value = data.info
        return { list: data.list, total: data.total }
      }
    },
    columns: [
      { label: '序号', type: 'index', align: 'center' },
      { label: '学期名称', prop: 'name', align: 'center' },
      { label: '学期开始时间', prop: 'start_time', align: 'center' },
      { label: ' 学期结束时间', prop: 'end_time', align: 'center' },
      { label: '教学周', prop: 'length', align: 'center' },
      { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' }
    ]
  }
})
const handleAddTerm = () => {
  isShowTermDialog.value = true
  title.value = '添加班级关联学期'
  id.value = props.id
}
const handleDel = (row: any) => {
  const params: any = {
    class_id: props.id,
    semesters_id: row.id,
    type: 'delete'
  }
  ElMessageBox.confirm('确定要删除吗？', '提示').then(() => {
    relationClassSem(params).then(() => {
      ElMessage.success('移除学期成功')
      handleFresh()
    })
  })
}
const handleDetail = (row: any) => {
  isShowAddSemDialog.value = true
  id.value = row.id
  title.value = '查看详情'
}
const handleCancel = () => {
  emit('update:isRelatingDialog', false)
}
const handleFresh = () => {
  appList.value.refetch()
}
</script>
<template>
  <el-dialog :model-value="isRelatingDialog" draggable title="班级关联学期" width="70%" :before-close="handleCancel">
    <div style="overflow-y: auto; height: 70vh">
      <el-descriptions>
        <el-descriptions-item label="班级代码：">{{ classInfo?.code }}</el-descriptions-item>
        <el-descriptions-item label="班级名称：">{{ classInfo?.name }}</el-descriptions-item>
        <el-descriptions-item label="所属部门/学校：">{{ classInfo?.organ_id_name }}</el-descriptions-item>
        <el-descriptions-item label="班  主  任：">
          {{ classInfo?.teacher_id_name }}
        </el-descriptions-item>
        <el-descriptions-item label="所属专业：">{{ classInfo?.specialty_id_name }}</el-descriptions-item>
        <el-descriptions-item label="入学年份：">{{ classInfo?.start_year_name }}</el-descriptions-item>
      </el-descriptions>
      <AppList v-bind="listOptions" ref="appList" border stripe style="margin-top: 30px">
        <template #header-aside>
          <el-button type="primary" round @click="handleAddTerm">添加学期</el-button>
        </template>
        <template #table-operate="{ row }">
          <el-space>
            <el-link type="primary" plain @click="handleDetail(row)">查看</el-link>
            <el-link plain @click="handleDel(row)">移除</el-link>
          </el-space>
        </template>
      </AppList>
    </div>
    <AddTermDialog
      v-model:isShowTermDialog="isShowTermDialog"
      v-if="isShowTermDialog === true"
      :id="id"
      :title="title"
      @create="handleFresh"
    />
    <AddSemester
      v-if="isShowAddSemDialog === true"
      v-model:isShowAddSemDialog="isShowAddSemDialog"
      :id="id"
      :title="title"
      :isEdit="'2'"
    />
  </el-dialog>
</template>
