<script setup lang="ts">
import AppList from '@/components/base/AppList.vue'
import PostItem from '../components/PostItem.vue'
import PostPinned from '../components/PostPinned.vue'
import { bbsSearchByList, bbsOrderByList } from '@/utils/dictionary'
import { getPostList } from '../api'
import { useMapStore } from '@/stores/map'
import { useGetCourseList } from '@/composables/useGetCourseList'

interface Props {
  courseId?: string
  semesterId?: string
}

const props = defineProps<Props>()

const PostForm = defineAsyncComponent(() => import('../components/PostForm.vue'))
const PostView = defineAsyncComponent(() => import('./View.vue'))

const { courses, courseValue, chapters } = useGetCourseList()
const courseList = $computed(() => {
  return [{ value: '', label: '全部课程' }, ...courses.value]
})
const chapterList = $computed(() => {
  return [{ value: '', label: '全部章节' }, ...chapters.value]
})

const types = useMapStore().getMapValuesByKey('learning_discussion_type')
const currentTypes = $computed(() => {
  return [{ label: '全部类型', value: '' }, ...types]
})

const appList = $ref<InstanceType<typeof AppList> | null>(null)

const params = reactive({
  search_by: 0,
  order_by: 0,
  course_id: props.courseId || '',
  semester_id: props.semesterId || '',
  chapter_id: '',
  type: ''
})
// 列表配置
const listOptions = computed(() => {
  return {
    hasFilterButton: false,
    remote: {
      httpRequest: getPostList,
      params,
      beforeRequest(requestParams: any) {
        if (params.course_id !== requestParams.course_id) {
          requestParams.chapter_id = ''
        }
        Object.assign(params, requestParams)
        courseValue.value = requestParams.course_id
        return requestParams
      },
      callback(res: { total: number; data: any }) {
        return { total: res.total, list: res.data }
      }
    }
  }
})
const filters = $computed(() => {
  return [
    !props.courseId && {
      type: 'select',
      prop: 'course_id',
      placeholder: '请选择',
      options: courseList,
      labelKey: 'name',
      valueKey: 'course_id'
    },
    {
      type: 'select',
      prop: 'chapter_id',
      placeholder: '请选择',
      options: chapterList,
      labelKey: 'name',
      valueKey: 'id'
    },
    { type: 'select', prop: 'search_by', placeholder: '请选择', options: bbsSearchByList },
    { type: 'select', prop: 'type', placeholder: '请选择', options: currentTypes },
    { type: 'select', prop: 'order_by', placeholder: '请选择', options: bbsOrderByList }
  ]
})
// 刷新
function handleRefetch() {
  appList?.refetch()
}
const postFormVisible = $ref(false)
const clickRow = ref()
let viewVisible = $ref(false)
function handleView(data: any) {
  clickRow.value = data
  if (props.courseId && props.semesterId) {
    viewVisible = true
    return false
  }
  return true
}
function handleBack() {
  viewVisible = false
}
</script>

<template>
  <AppList :filters="filters" v-bind="listOptions" ref="appList" v-show="!viewVisible">
    <template #header-prepend>
      <el-button round type="primary" @click="postFormVisible = true" style="margin-right: 30px">我要发帖</el-button>
    </template>
    <template #body="{ data }">
      <!-- 置顶帖子 -->
      <PostPinned :courseId="courseId" :semesterId="semesterId" :onClick="handleView"></PostPinned>
      <template v-if="data.length">
        <PostItem :data="item" v-for="item in data" :key="item.id" :onClick="handleView"></PostItem>
      </template>
      <el-empty description="暂无数据" v-else />
    </template>
  </AppList>
  <PostView :id="clickRow.id" :onBack="handleBack" v-if="viewVisible && clickRow"></PostView>
  <PostForm
    :courseId="courseId"
    :semesterId="semesterId"
    v-model="postFormVisible"
    @update="handleRefetch"
    v-if="postFormVisible"></PostForm>
</template>

<style lang="scss" scoped>
:deep(.table-list-hd) {
  padding: 30px 0 12px 30px;
  background-color: #fff;
  border-radius: 6px;
  justify-content: space-between;
  .table-list-filter {
    flex: unset;
  }
  .el-select {
    width: 180px;
  }
}
:deep(.table-list-bd) {
  padding: 20px;
  background-color: #fff;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
:deep(.table-list-ft) {
  padding: 20px;
  background-color: #fff;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
</style>
