<script setup lang="ts">
import { ElMessage } from 'element-plus'
import AppUpload from '@/components/base/AppUpload.vue'
import AppEditor from '@/components/base/AppEditor.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { submitSuggestion } from '../api'
import { useLog } from '@/composables/useLog'
const log = useLog()

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

const formRef = $ref<FormInstance>()
const form = reactive({
  title: '',
  content: '',
  files: []
})
const rules = ref<FormRules>({
  title: [{ required: true, message: '请输入问题描述', trigger: 'blur' }],
  content: [{ required: true, message: '请输入问题详情', trigger: 'blur' }]
})
// 提交
function handleSubmit() {
  formRef?.validate().then(update)
}
// 修改
const update = () => {
  const params = Object.assign({}, form, { files: form.files.length ? JSON.stringify(form.files) : '' })
  submitSuggestion(params).then(() => {
    ElMessage({ message: '提交成功', type: 'success' })
    emit('update')
    formRef?.resetFields()
  })
  // 日志上送
  log.upload({
    event: 'suggestion_event',
    action: 'stu_suggestion_action',
    data: { commit_time: Math.floor(Date.now() / 1000) }
  })
}
</script>

<template>
  <el-dialog title="投诉建议" width="800px">
    <el-form ref="formRef" :model="form" :rules="rules" hide-required-asterisk label-position="top">
      <el-form-item label="问题描述" prop="title">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="问题详情" prop="content">
        <AppEditor v-model="form.content" :height="300" />
      </el-form-item>
      <el-form-item label="上传附件" prop="files">
        <AppUpload v-model="form.files" :limit="1">
          <template #tip>
            （可以上传 word、ppt、png、jpg、zip、rar等资源，多文件请先压缩打包成一个文件后，再上传）
          </template>
        </AppUpload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round auto-insert-space @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
