<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import type { ExperimentDiscussType } from '../types'
import { ElMessage } from 'element-plus'
import { addExperimentDiscussComment } from '../api'

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

const emit = defineEmits<{
  (e: 'update'): void
}>()

const formRef = $ref<FormInstance>()
const form = reactive({ content: '' })
const rules = ref<FormRules>({
  content: [{ required: true, message: '请输入话题评论内容', trigger: 'blur' }]
})
let publishVisible = $ref(false)

// 提交
function handleSubmit() {
  formRef?.validate().then(handleAdd)
}
// 发布评论
function handleAdd() {
  const params = { ...form, discussion_id: props.data.id }
  addExperimentDiscussComment(params).then(() => {
    ElMessage({ message: '评论成功', type: 'success' })
    emit('update')
    formRef?.resetFields()
    publishVisible = false
  })
}
</script>

<template>
  <div style="border-top: 1px dashed #e6e6e6; border-bottom: 1px dashed #e6e6e6; padding: 20px 0">
    <el-row justify="end">
      <el-button type="primary" @click="publishVisible = true" v-if="!publishVisible">我要评论</el-button>
    </el-row>
    <el-form ref="formRef" :model="form" :rules="rules" v-if="publishVisible">
      <el-form-item prop="content">
        <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" />
      </el-form-item>
      <el-row justify="end">
        <el-button type="primary" @click="handleSubmit">发表评论</el-button>
      </el-row>
    </el-form>
  </div>
</template>
