<script lang="ts" setup>
import { checkPermission } from '@/utils/permission'
import { ElMessage, ElMessageBox } from 'element-plus'
import AddSemCourse from './AddSemCourse.vue'
import { getSemCourse, relationSemCourse, setAliasName } from '../api'
const emit = defineEmits<Emits>()
const props = defineProps({
  isShowSemCourseDialog: {
    type: Boolean
  },
  id: {
    type: String
  }
})
interface Emits {
  (e: 'update:isShowSemCourseDialog', isShowSemCourseDialog: boolean): void
}
const appList = ref()
const id: any = ref('')
const isShowCourse = ref(false)
const semInfo: any = ref({})
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getSemCourse,
      params: { semester_id: props.id, name: '' },
      callback(data: any) {
        semInfo.value = data.info
        return { list: data.list, total: data.total }
      }
    },
    filters: [{ type: 'input', prop: 'name', label: '课程名称：', placeholder: '课程名称' }],
    columns: [
      { label: '序号', type: 'index', align: 'center', minWidth: '100' },
      { label: '课程名称', prop: 'name', align: 'center', minWidth: '100' },
      {
        label: '别名',
        prop: 'alias_name',
        slots: 'alias_name',
        align: 'center',
        width: '200px',
        computed(row: any) {
          if (row.row.alias_name === '') {
            return (row.row.alias_name = row.row.name)
          }
        }
      },
      { label: '课程类型', prop: 'online_type_name', align: 'center', minWidth: '100' },
      { label: '选课类型', prop: 'elective_type_name', align: 'center', minWidth: '100' },
      { label: '课程分类', prop: 'classification_name', align: 'center', minWidth: '350' },
      { label: '课程学分', prop: 'credit', align: 'center', minWidth: '100' },
      {
        label: '讲师',
        prop: 'lecturers_name',
        align: 'center',
        computed(row: any) {
          if (row.row.lecturers_name.length) {
            return row.row.lecturers_name.toString()
          }
        },
        minWidth: '200'
      },
      { label: '更新时间', prop: 'updated_time', align: 'center', minWidth: '200' },
      { label: '操作', slots: 'table-operate', align: 'center', minWidth: '150', fixed: 'right' }
    ]
  }
})
const handleAddCourse = () => {
  isShowCourse.value = true
  id.value = props.id
}
const handleDel = (row: any) => {
  const params: any = {
    semester_id: props.id,
    courses_id: row.id,
    type: 'delete'
  }

  ElMessageBox.confirm('确定要删除吗？', '提示').then(() => {
    relationSemCourse(params).then(() => {
      ElMessage.success('移除课程成功')
      handleFresh()
    })
  })
}

const handleCancel = () => {
  emit('update:isShowSemCourseDialog', false)
}
const handleFresh = () => {
  appList.value.refetch()
}
// 课程设置别名
const handleChangeName = (row: any) => {
  const params: any = {
    semester_id: props.id,
    course_id: row.id,
    alias_name: row.alias_name
  }
  setAliasName(params).then(() => {
    ElMessage.success('课程别名设置成功')
    handleFresh()
  })
}
</script>
<template>
  <el-dialog
    :model-value="isShowSemCourseDialog"
    draggable
    title="学期关联课程"
    width="70%"
    :before-close="handleCancel"
  >
    <div style="overflow-y: auto; height: 70vh">
      <el-descriptions>
        <el-descriptions-item label="学期名称：">{{ semInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="所属部门/学校：">{{ semInfo.organ_id_name }}</el-descriptions-item>
        <el-descriptions-item label="开始日期：">{{ semInfo.start_time }}</el-descriptions-item>
        <el-descriptions-item label="结束日期：">
          {{ semInfo.end_time }}
        </el-descriptions-item>
        <el-descriptions-item label="教学周：">{{ semInfo.length }}</el-descriptions-item>
      </el-descriptions>
      <AppList v-bind="listOptions" ref="appList" border stripe style="margin-top: 30px">
        <el-button type="primary" round @click="handleAddCourse">添加课程</el-button>
        <template #alias_name="{ row }">
          <el-input
            v-model="row.alias_name"
            @blur="handleChangeName(row)"
            :disabled="
              !checkPermission('v1-learning-semester-set-course-alias-name') ||
              row.organ_id_name === semInfo.organ_id_name
            "
            :placeholder="row.name"
          ></el-input>
        </template>
        <template #table-operate="{ row }">
          <el-space>
            <router-link :to="`/course/my/view??id=${row.id}`" target="_blank">
              <el-link type="primary" plain>查看</el-link>
            </router-link>
            <el-link plain @click="handleDel(row)">移除</el-link>
          </el-space>
        </template>
      </AppList>
    </div>
    <AddSemCourse v-model:isShowCourse="isShowCourse" v-if="isShowCourse === true" :id="id" @create="handleFresh" />
  </el-dialog>
</template>
