<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '意见反馈',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50 p-4">
    <view class="bg-white rounded-2xl shadow-sm p-4">
      <!-- 标题输入 -->
      <view class="mb-4">
        <text class="text-sm text-gray-600 mb-2 block">反馈标题</text>
        <input
          v-model="feedbackTitle"
          class="w-full h-12 px-4 bg-gray-50 rounded-lg text-gray-800 placeholder-gray-400"
          placeholder="请输入反馈标题"
          maxlength="50"
        />
      </view>

      <!-- 内容输入 -->
      <view class="mb-4">
        <text class="text-sm text-gray-600 mb-2 block">反馈内容</text>
        <textarea
          v-model="feedbackContent"
          class="w-full h-40 px-4 py-3 bg-gray-50 rounded-lg text-gray-800 placeholder-gray-400"
          placeholder="请详细描述您遇到的问题或建议..."
          maxlength="500"
        />
        <text class="text-xs text-gray-400 text-right block mt-1">
          {{ feedbackContent.length }}/500
        </text>
      </view>

      <!-- 提交按钮 -->
      <button
        class="w-full h-12 bg-gradient-to-r from-sky-400 to-indigo-400 text-white rounded-lg text-base flex items-center justify-center shadow-sm hover:shadow-md transition-shadow"
        :disabled="!isValid"
        :class="{ 'opacity-50': !isValid }"
        @click="submitFeedback"
      >
        提交反馈
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { addFeedbackAPI } from '@/service/feedback'

const feedbackTitle = ref('')
const feedbackContent = ref('')

// 验证表单是否有效
const isValid = computed(() => {
  return feedbackTitle.value.trim().length > 0 && feedbackContent.value.trim().length > 0
})

// 提交反馈
const submitFeedback = async () => {
  if (!isValid.value) return

  try {
    uni.showLoading({ title: '提交中...' })
    await addFeedbackAPI({
      feedbackTitle: feedbackTitle.value.trim(),
      feedbackContent: feedbackContent.value.trim(),
    })

    uni.hideLoading()
    uni.showToast({
      title: '提交成功',
      icon: 'success',
    })

    // 延迟返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: '提交失败，请重试',
      icon: 'none',
    })
  }
}
</script>
