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

import { getRelationSemCourse, relationSemCourse } from '../api'

const emit = defineEmits<Emits>()
const props = defineProps({
  isShowCourse: {
    type: Boolean
  },
  id: {
    type: String
  }
})
interface Emits {
  (e: 'update:isShowCourse', isShowCourse: boolean): void
  (e: 'create'): void
}
const appList = ref()
const semInfo: any = ref({})
const multiSelection = ref([])
// 下拉选择tree 视频分类
let { list: selectTree }: any = useGetCategoryList()
const defaultProps = { children: 'children', label: 'category_name', value: 'id' }

const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getRelationSemCourse,
      params: { semester_id: props.id, name: '', classification: '' },
      callback(data: any) {
        semInfo.value = data.info
        return { list: data.list, total: data.total }
      }
    },
    filters: [
      { type: 'select', prop: 'classification', slots: 'course-category' },
      { type: 'input', prop: 'name', label: '课程名称：', placeholder: '课程名称' }
    ],
    columns: [
      { type: 'selection' },
      { label: '序号', type: 'index', align: 'center' },
      { label: '课程名称', prop: 'name', align: 'center', width: '200' },
      { label: '所属机构', prop: 'organ_id_name', align: 'center', width: '200' },
      { label: '课程类型', prop: 'online_type_name', align: 'center', width: '200' },
      { label: '选课类型', prop: 'elective_type_name', align: 'center', width: '200' },
      { label: '课程分类', prop: 'classification_name', align: 'center', width: '310' },
      { label: '课程学分', prop: 'credit', align: 'center', width: '100' },
      {
        label: '讲师',
        prop: 'lecturers_name',
        align: 'center',
        computed(row: any) {
          if (row.row.lecturers_name.length) {
            return row.row.lecturers_name.toString()
          }
        },
        width: '200'
      },
      { label: '更新时间', prop: 'updated_time', align: 'center', width: '200' },
      { label: '操作', slots: 'table-operate', align: 'center', minWidth: '100', fixed: 'right' }
    ]
  }
})
const handleSelectChange = (val: any) => {
  multiSelection.value = val
}
const handleAddStu = () => {
  const params: any = {
    semester_id: props.id,
    courses_id: multiSelection.value.map((item: any) => item.id).toString(),
    type: 'add'
  }
  relationSemCourse(params).then(() => {
    ElMessage.success('关联课程成功')
    emit('update:isShowCourse', false)
    emit('create')
  })
}

const handleCancel = () => {
  emit('update:isShowCourse', false)
}
const handleFresh = () => {
  appList.value.refetch()
}
</script>
<template>
  <el-dialog :model-value="isShowCourse" draggable title="添加学期课程" width="50%" :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"
        @selection-change="handleSelectChange"
      >
        <el-button type="primary" round @click="handleAddStu">关联选择课程</el-button>
        <template #course-category="{ params }">
          课程分类：&nbsp;&nbsp;
          <el-tree-select
            node-key="id"
            :render-after-expand="false"
            :props="defaultProps"
            v-model="params.classification"
            :data="selectTree"
            clearable
            placeholder="课程分类"
            @change="handleFresh"
            :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
          />
        </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-space>
        </template>
      </AppList>
    </div>
  </el-dialog>
</template>
