<script setup lang="ts">
import type { DiscussListItem } from '../types'
import AppList from '@/components/base/AppList.vue'
import { getDiscussList } from '../api'
import { useFilterList } from '../composables/useFilterList'

const DiscussDialog = defineAsyncComponent(() => import('../components/DiscussDialog.vue'))

const route = useRoute()

const { competitions } = useFilterList()

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

// 列表配置
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getDiscussList,
      params: { competition_id: route.query.competition_id || '', student_name: '' }
    },
    filters: [
      {
        type: 'select',
        prop: 'competition_id',
        label: '赛项',
        placeholder: '请选择赛项',
        options: competitions.value,
        labelKey: 'name',
        valueKey: 'id'
      },
      { type: 'input', prop: 'student_name', label: '选手姓名', placeholder: '请输入选手姓名' }
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '赛项名称', prop: 'competition_name' },
      { label: '专业', prop: 'specialty_id_name' },
      { label: '班级', prop: 'class_id_name' },
      { label: '姓名', prop: 'student_name' },
      { label: '学号', prop: 'sno_number' },
      { label: '标题', prop: 'title' },
      { label: '评论数量', prop: 'replies_num', slots: 'table-replies-num' },
      { label: '更新时间', prop: 'created_time' },
      { label: '操作', slots: 'table-x', width: 100 }
    ]
  }
})

let dialogVisible = $ref(false)
const rowData = ref<DiscussListItem>()
// 评论
function handleComment(row: DiscussListItem) {
  rowData.value = row
  dialogVisible = true
}
function onUpdateSuccess() {
  appList?.refetch()
}
</script>

<template>
  <AppCard title="训练答疑">
    <AppList v-bind="listOptions" ref="appList">
      <template #table-replies-num="{ row }">
        <span :class="{ 'is-info': !!row.replies_num }">{{ row.replies_num }}</span>
      </template>
      <template #table-x="{ row }">
        <el-button text type="primary" @click="handleComment(row)" v-permission="'v1-teacher-train-discussion-comment'"
          >答疑</el-button
        >
      </template>
    </AppList>
  </AppCard>
  <DiscussDialog
    v-model="dialogVisible"
    :data="rowData"
    @update="onUpdateSuccess"
    v-if="dialogVisible && rowData"></DiscussDialog>
</template>

<style lang="scss" scoped>
.is-success {
  color: #63a103;
}
.is-info {
  color: #b18862;
}
</style>
