<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import type { DiscussListItem, DiscussInfo, DiscussCommentItem } from '../types'
import { Loading } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useInfiniteScroll } from '@vueuse/core'
import DiscussItem from './DiscussItem.vue'
import { getDiscuss, submitDiscussComment } from '../api'

interface Props {
  data: DiscussListItem
}
const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

const params = reactive({ id: props.data.id, page: 1, 'per-page': 10 })
let hasMore = $ref(false)
let isLoading = $ref(false)
const detail = reactive<{ info?: DiscussInfo; list: DiscussCommentItem[] }>({ info: undefined, list: [] })
function fetchInfo(isForce = false) {
  if (!props.data.id) return
  if (isForce) {
    params.page = 1
  }
  isLoading = true
  getDiscuss(params)
    .then(res => {
      detail.info = res.data.info
      detail.list = isForce ? res.data.list : [...detail.list, ...res.data.list]
      hasMore = !!res.data.list.length
    })
    .finally(() => {
      isLoading = false
    })
}
watch(
  () => props.data.id,
  () => {
    fetchInfo(true)
  },
  { immediate: true }
)

// 滚动加载
const scrollRef = ref<HTMLElement>()
useInfiniteScroll(
  scrollRef,
  () => {
    if (!hasMore || isLoading) return
    params.page++
    fetchInfo()
  },
  { distance: 10 }
)

const formRef = $ref<FormInstance>()
const form = reactive<{ content: string }>({ content: '' })
const rules = ref<FormRules>({
  content: [{ required: true, message: '请输入回复内容' }]
})

// 提交
function handleSubmit() {
  formRef?.validate().then(() => {
    const params = { ...form, id: props.data.id }
    submitDiscussComment(params).then(() => {
      ElMessage({ message: '回复成功', type: 'success' })
      emit('update')
      fetchInfo(true)
      formRef?.resetFields()
    })
  })
}
</script>

<template>
  <el-dialog title="实验话题讨论" :close-on-click-modal="false" @update:modelValue="value => $emit('update:modelValue', value)">
    <div class="discuss-scroll" ref="scrollRef">
      <DiscussItem :info="detail.info" :list="detail.list" v-if="detail.info"></DiscussItem>
      <div class="tips" v-if="isLoading">
        <el-icon class="is-loading">
          <Loading />
        </el-icon>
        加载中...
      </div>
      <div class="tips" v-if="!hasMore">没有更多了</div>
    </div>

    <el-form ref="formRef" :rules="rules" :model="form" style="margin-top: 40px" v-permission="'v1-teacher-discussion-comment'">
      <el-form-item prop="content">
        <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" :maxlength="200" />
      </el-form-item>
      <el-row justify="end">
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存回复</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<style lang="scss" scoped>
.discuss-scroll {
  max-height: 400px;
  overflow-y: auto;
}
.tips {
  padding: 20px;
  color: #555;
  text-align: center;
}
.el-icon.is-loading {
  animation: rotating 2s linear infinite;
}
</style>
