<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { getConditionList, getPostsList, delPosts, setTopPosts } from '../api'
import AddPostDialog from '../components/AddPostDialog.vue'
import { useProjectList } from '@/composables/useGetProjectList'

import { useMapStore } from '@/stores/map'
const store = useMapStore()

const departmentList: any = useProjectList('', '79806610719731712').departmentList
const router = useRouter()
const appList = ref()
const isShowAddDialog = ref(false)
const organ_id = ref('')
const semester_id = ref('')
const course_id = ref('')
const class_id = ref('')
const chapter_id = ref('')
const semesterList: any = ref([])
const classList: any = ref([])
const courseList: any = ref([])
const chapterList: any = ref([])
const listOptions = $computed(() => {
  return {
    remote: {
      params: {
        organ_id: '',
        semester_id: '',
        class_id: '',
        course_id: '',
        chapter_id: '',
        type: '',
        is_top: '',
        title: '',
        name: ''
      },
      beforeRequest(params: any, isReset: boolean) {
        params.organ_id = organ_id.value
        params.semester_id = semester_id.value
        params.course_id = course_id.value
        params.chapter_id = chapter_id.value
        params.class_id = class_id.value
        if (isReset) {
          organ_id.value = ''
          semester_id.value = ''
          course_id.value = ''
          chapter_id.value = ''
          class_id.value = ''
          semesterList.value = []
          classList.value = []
          courseList.value = []
          chapterList.value = []
        }
        return params
      },
      httpRequest: getPostsList
    },

    filters: [
      { type: 'select', prop: 'organ_id', slots: 'filter-department' },
      { type: 'select', prop: 'semester_id', slots: 'filter-semester' },
      { type: 'select', prop: 'class_id', slots: 'filter-class' },
      { type: 'select', prop: 'course_id', slots: 'filter-course' },
      { type: 'select', prop: 'chapter_id', slots: 'filter-chapter' },
      {
        type: 'select',
        prop: 'type',
        label: '帖子类型：',
        placeholder: '帖子类型',
        options: store.getMapValuesByKey('learning_discussion_type'),
        labelKey: 'label',
        valueKey: 'value'
      },
      {
        type: 'select',
        prop: 'is_top',
        label: '是否置顶：',
        placeholder: '是否置顶',
        options: [
          { label: '是', value: '1' },
          { label: '否', value: '0' }
        ]
      },
      { type: 'input', prop: 'title', label: '帖子标题：', placeholder: '帖子标题' },
      { type: 'input', prop: 'name', label: '发帖人：', placeholder: '发帖人' }
    ],
    columns: [
      { label: '序号', type: 'index', align: 'center', width: 80 },
      { label: '帖子标题', prop: 'title', align: 'center', minWidth: 100 },
      { label: '帖子类型', prop: 'type_name', align: 'center', width: 100 },
      { label: '发帖人', prop: 'sso_name', align: 'center', width: 100 },
      { label: '所属课程', prop: 'course_name', align: 'center', width: 200 },
      { label: '所属班级', prop: 'class_name', align: 'center', width: 200 },
      { label: '所属学期', prop: 'semester_name', align: 'center', width: 200 },
      { label: '所属机构/院校', prop: 'organ_name', align: 'center', width: 150 },
      { label: '回复数量', prop: 'reply_count', align: 'center', width: 100 },
      { label: '更新时间', prop: 'updated_time', align: 'center', width: 200 },
      { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right', width: 160 }
    ]
  }
})
const handleAddPosts = () => {
  isShowAddDialog.value = true
}
const handleChangeOrgan = () => {
  if (organ_id.value === '') {
    semester_id.value = ''
    course_id.value = ''
    chapter_id.value = ''
    class_id.value = ''
    semesterList.value = []
    classList.value = []
    courseList.value = []
    chapterList.value = []
    handleRefresh()
  }
  handleGetSemesterList()
  handleRefresh()
}
const handleChangeSemester = () => {
  if (semester_id.value === '') {
    course_id.value = ''
    chapter_id.value = ''
    class_id.value = ''
    classList.value = []
    courseList.value = []
    chapterList.value = []
    handleRefresh()
  }
  handleRefresh()
}
const handleChangeClass = () => {
  if (class_id.value === '') {
    course_id.value = ''
    chapter_id.value = ''
    courseList.value = []
    chapterList.value = []
    handleRefresh()
  }
  handleRefresh()
}
const handleChangeCourse = () => {
  if (course_id.value === '') {
    chapter_id.value = ''
    chapterList.value = []

    handleRefresh()
  }

  handleRefresh()
}
// 刷新页面
const handleRefresh = () => {
  appList.value.refetch()
}
watch(
  () => organ_id.value,
  value => {
    if (value !== '') {
      handleGetSemesterList()
    }
  }
)
watch(
  () => semester_id.value,
  value => {
    if (value !== '') {
      handleGetClassList()
    }
  }
)
watch(
  () => course_id.value,
  value => {
    if (value !== '') {
      handleGetchaptereList()
    }
  }
)
watch(
  () => class_id.value,
  value => {
    if (value !== '') {
      handleGetCourseList()
    }
  }
)
// 获取学期列表
const handleGetSemesterList = () => {
  const params: any = { type: 'semester', organ_id: organ_id.value }
  getConditionList(params).then((res: any) => {
    semesterList.value = res.data
  })
}
// 获取班级列表
const handleGetClassList = () => {
  const params: any = { type: 'class', organ_id: organ_id.value, semester_id: semester_id.value }
  getConditionList(params).then((res: any) => {
    classList.value = res.data
  })
}
// 获取课程列表
const handleGetCourseList = () => {
  const params: any = { type: 'course', organ_id: organ_id.value, semester_id: semester_id.value }
  getConditionList(params).then((res: any) => {
    courseList.value = res.data
  })
}
// 获取课程章节列表
const handleGetchaptereList = () => {
  const params: any = {
    type: 'chapter',
    organ_id: organ_id.value,
    semester_id: semester_id.value,
    course_id: course_id.value
  }
  getConditionList(params).then((res: any) => {
    chapterList.value = res.data
  })
}
// 删除帖子
const handleDel = (row: any) => {
  ElMessageBox.confirm('确定要删除该帖子吗？', '提示').then(() => {
    const params: any = { id: row.id, type: 'discussion' }
    delPosts(params).then(() => {
      ElMessage.success('帖子删除成功')
      handleRefresh()
    })
  })
}
// 置顶帖子
const handleSetTop = (row: any) => {
  setTopPosts({ discussion_id: row.id }).then(() => {
    console.log(row.is_top, '123')
    if (row.is_top === '0') {
      ElMessage.success('帖子置顶成功')
    } else {
      ElMessage.success('帖子取消置顶成功')
    }
    handleRefresh()
  })
}
const handleReply = (row: any) => {
  router.push({
    path: '/teach/posts/detail',
    query: {
      id: row.id
    }
  })
}
</script>

<template>
  <AppCard title="帖子管理">
    <AppList v-bind="listOptions" ref="appList" border stripe>
      <el-button type="primary" round @click="handleAddPosts" style="margin-bottom: 20px" v-permission="'v1-teaching-discussion-create'">新建帖子</el-button>
      <template #filter-department>
        <div class="name" style="font-size: 14px; color: #606266; padding-right: 12px">所属部门/学校:</div>
        <el-select @change="handleChangeOrgan" clearable v-model="organ_id" placeholder="请选择所属部门/学校">
          <el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </template>
      <template #filter-semester>
        <div class="name" style="font-size: 14px; color: #606266; padding-right: 12px">所属学期:</div>
        <el-select @change="handleChangeSemester" clearable v-model="semester_id" placeholder="请选择所属学期" no-data-text="请先选择所属部门/学校">
          <el-option v-for="item in semesterList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </template>
      <template #filter-class>
        <div class="name" style="font-size: 14px; color: #606266; padding-right: 12px">所属班级:</div>
        <el-select @change="handleChangeClass" clearable v-model="class_id" placeholder="请选择所属班级" no-data-text="请先选择所属学期">
          <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </template>
      <template #filter-course>
        <div class="name" style="font-size: 14px; color: #606266; padding-right: 12px">所属课程:</div>
        <el-select @change="handleChangeCourse" clearable v-model="course_id" placeholder="请选择所属课程" no-data-text="请先选择所属班级">
          <el-option v-for="item in courseList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </template>
      <template #filter-chapter>
        <div class="name" style="font-size: 14px; color: #606266; padding-right: 12px">所属章节:</div>
        <el-select @change="handleRefresh" clearable v-model="chapter_id" placeholder="请选择所属章节" no-data-text="请先选择所属课程">
          <el-option v-for="item in chapterList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </template>
      <template #table-operate="{ row }">
        <el-link type="primary" plain @click="handleReply(row)" v-permission="'v1-teaching-discussion-list'">添加回复</el-link>
        <el-link type="primary" plain style="margin: 0 10px" @click="handleSetTop(row)" v-permission="'v1-teaching-discussion-set-top'">{{
          row.is_top === '1' ? '取消置顶' : '置顶'
        }}</el-link>
        <el-link type="primary" plain @click="handleDel(row)" v-permission="'v1-teaching-discussion-delete'">删除</el-link>
      </template>
    </AppList>
  </AppCard>
  <AddPostDialog v-model:isShowAddDialog="isShowAddDialog" v-if="isShowAddDialog" @create="handleRefresh" />
</template>
