<template>
  <view class="min-h-screen bg-white flex flex-col">
    <view class="flex-1 px-4 py-6 overflow-auto">
      <!-- Feedback Section -->
      <view class="mb-6">
        <view class="text-lg font-medium mb-2">您的反馈</view>
        <view class="bg-white rounded-lg border border-gray-200 p-4">
          <textarea
            v-model="feedbackText"
            class="w-full text-gray-600 focus:outline-none resize-none"
            placeholder="请描述您遇到的问题或建议..."
            :rows="4"
          />
        </view>
      </view>

      <!-- Upload Screenshot Section -->
      <view class="mb-6">
        <view class="text-lg font-medium mb-2">上传截图 (可选)</view>
        <view v-if="screenshot" class="mb-4">
          <view class="relative inline-block">
            <image
              :src="screenshot"
              class="w-24 h-24 rounded-lg object-cover"
              mode="aspectFill"
              @tap="previewImage"
            />
            <view
              @click="deleteImage"
              class="absolute -top-2 -right-2 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center"
            >
              <view class="text-white text-xs">×</view>
            </view>
          </view>
        </view>
        <view
          v-if="!screenshot"
          class="border border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center"
          @click="chooseImage"
        >
          <view class="text-gray-400 mb-2">
            <Photograph size="24" />
          </view>
          <view class="text-center text-gray-400">添加图片</view>
        </view>
      </view>

      <!-- Name Section -->
      <view class="mb-6">
        <view class="text-lg font-medium mb-2">您的姓名</view>
        <view class="bg-white rounded-lg border border-gray-200 p-4">
          <input
            type="text"
            v-model="name"
            class="w-full text-gray-600 focus:outline-none"
            placeholder="请输入您的姓名"
          />
        </view>
      </view>

      <!-- Contact Section -->
      <view class="mb-10">
        <view class="text-lg font-medium mb-2">联系方式</view>
        <view class="bg-white rounded-lg border border-gray-200 p-4">
          <input
            type="text"
            v-model="contact"
            class="w-full text-gray-600 focus:outline-none"
            placeholder="请输入您的手机号或微信号"
          />
        </view>
      </view>

      <!-- Submit Button -->
      <view
        @click="submitFeedback"
        class="w-full py-3 bg-blue-500 text-white text-lg font-medium rounded-lg flex items-center justify-center"
      >
        提交反馈
      </view>
    </view>

    <!-- Image Preview -->
    <nut-image-preview
      v-model:show="previewVisible"
      :images="previewImages"
      :init-no="0"
      @close="closePreview"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import { Photograph } from '@nutui/icons-vue-taro';

const feedbackText = ref('');
const screenshot = ref('');
const name = ref('');
const contact = ref('');
const previewVisible = ref(false);
const previewImages = ref([]);

/**
 * 显示提示信息
 */
const showToast = (message, type = 'success') => {
  const icon = type === 'error' ? 'error' : 'success';
  Taro.showToast({
    title: message,
    icon: icon,
    duration: 2000
  });
};

/**
 * 选择图片
 */
const chooseImage = () => {
  Taro.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: function (res) {
      const tempFilePath = res.tempFilePaths[0];
      screenshot.value = tempFilePath;
    },
    fail: function () {
      showToast('选择图片失败', 'error');
    }
  });
};

/**
 * 预览图片
 */
const previewImage = () => {
  previewImages.value = [{ src: screenshot.value }];
  previewVisible.value = true;
};

/**
 * 关闭预览
 */
const closePreview = () => {
  previewVisible.value = false;
};

/**
 * 删除图片
 */
const deleteImage = () => {
  screenshot.value = '';
};

/**
 * 提交反馈
 */
const submitFeedback = () => {
  if (!feedbackText.value) {
    showToast('请描述您遇到的问题或建议', 'error');
    return;
  }
  if (!name.value) {
    showToast('请输入您的姓名', 'error');
    return;
  }
  if (!contact.value) {
    showToast('请输入您的手机号或微信号', 'error');
    return;
  }

  // 在实际应用中，这里会处理提交逻辑，例如上传图片和发送数据到服务器
  showToast('提交成功');

  // 提交成功后清空表单
  feedbackText.value = '';
  screenshot.value = '';
  name.value = '';
  contact.value = '';
};
</script>

<style lang="less">
// 你可以在这里添加自定义样式
</style>