<template>
  <div>
    <el-card shadow="never">
      <template #header><span>意见反馈</span></template>
      <el-form :model="form" label-width="80" size="large">
        <el-form-item label="类别">
          <el-select v-model="form.type" style="width:200px">
            <el-option label="功能建议" value="feature" />
            <el-option label="问题反馈" value="bug" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="form.content" type="textarea" :rows="5" placeholder="请详细描述你的建议或问题..." />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.contact" placeholder="手机号或邮箱（选填）" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" style="margin-top:16px">
      <template #header><span>常见问题</span></template>
      <el-collapse>
        <el-collapse-item title="如何使用智能翻译？" name="1">
          <p style="font-size:13px;color:#666">在工作台点击"智能翻译"，输入需要翻译的外贸文本，选择目标语言即可。还支持回复建议和信息提取功能。</p>
        </el-collapse-item>
        <el-collapse-item title="如何管理客户？" name="2">
          <p style="font-size:13px;color:#666">在"客户管理"页面可以新增、编辑、删除客户，支持按状态筛选和关键词搜索。还可以查看客户的健康度分析和跟进记录。</p>
        </el-collapse-item>
        <el-collapse-item title="如何开具发票？" name="3">
          <p style="font-size:13px;color:#666">在"个人中心 - 发票管理"页面提交开票申请，填写抬头和金额。管理员审核通过后即可获取发票。</p>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { submitFeedback } from '@/api'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const form = reactive({ type: 'feature', content: '', contact: '' })

async function submit() {
  if (!form.content) { ElMessage.warning('请输入反馈内容'); return }
  loading.value = true
  try {
    await submitFeedback(form)
    ElMessage.success('感谢你的反馈！')
    form.content = ''
    form.contact = ''
  } catch (e) { ElMessage.error(e?.detail || '提交失败') }
  finally { loading.value = false }
}
</script>
