<template>
  <view class="feedback-page">
    

    <view class="feedback-content">
      <!-- 常见问题 -->
      <view class="section">
        <view class="section-title">常见问题</view>
        <view class="faq-list">
          <view class="faq-item" v-for="(faq, index) in faqList" :key="index" @click="toggleFaq(index)">
            <view class="faq-header">
              <text class="faq-question">{{faq.question}}</text>
              <uni-icons 
                :type="expandedIndex === index ? 'up' : 'down'" 
                size="24" 
                color="#999"
              ></uni-icons>
            </view>
            <view class="faq-answer" v-if="expandedIndex === index">
              <text>{{faq.answer}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 问题类型选择 -->
      <view class="section" v-if="!showSubmitForm">
        <view class="section-title">问题类型</view>
        <view class="problem-types">
          <view 
            class="problem-type" 
            v-for="(type, index) in problemTypes" 
            :key="index"
            @click="selectProblemType(type)"
          >
            <view class="type-icon">
              <image :src="type.img" alt="问题类型图标" class="type-icon-image" mode="aspectFit"></image>
            </view>
            <text class="type-name">{{type.name}}</text>
          </view>
        </view>
      </view>

      <!-- 意见反馈表单 --> 
      <view class="section" v-if="showSubmitForm">
        <view class="section-title">意见反馈</view>
        <view class="form-group">
          <view class="form-label">反馈内容</view>
          <textarea 
            v-model="feedbackContent" 
            class="feedback-textarea" 
            placeholder="请详细描述您遇到的问题或建议"
            maxlength="500"
            rows="6"
          ></textarea>
          <view class="word-count">{{feedbackContent.length}}/500</view>
        </view>

        <!-- 图片上传 -->
        <view class="form-group">
          <view class="form-label">上传截图（选填）</view>
          <view class="image-upload">
            <view class="upload-btn" @click="chooseImage" v-if="images.length < 3">
              <uni-icons type="plus" size="40" color="#999"></uni-icons>
            </view>
            <view class="image-item" v-for="(image, index) in images" :key="index">
              <image :src="image" mode="aspectFill" class="preview-image"></image>
              <view class="delete-btn" @click="deleteImage(index)">
                <uni-icons type="close" size="20" color="white"></uni-icons>
              </view>
            </view>
          </view>
          <view class="upload-text">最多上传3张图片，每张不超过5MB</view>
        </view>

        <!-- 联系方式 -->
        <view class="form-group">
          <view class="form-label">联系方式（选填）</view>
          <input 
            v-model="contactInfo" 
            class="contact-input" 
            placeholder="请留下您的邮箱或手机号，方便我们联系您"
          />
        </view>

        <!-- 提交按钮 -->
        <button 
          class="submit-btn" 
          :disabled="!feedbackContent.trim()"
          @click="submitFeedback"
        >提交反馈</button>
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="contact-options">
      <view class="contact-item">
        <view class="contact-icon">
          <image src="/static/emile.png" alt="客服邮箱" class="contact-icon-image" mode="aspectFit"></image>
        </view>
        <view class="contact-info">
          <view class="contact-label">客服邮箱</view>
          <view class="contact-value" @click="copyEmail">support@example.com</view>
        </view>
      </view>
      <view class="contact-item">
        <view class="contact-icon">
          <uni-icons type="chat" size="32" color="#4cd964"></uni-icons>
        </view>
        <view class="contact-info">
          <view class="contact-label">在线客服</view>
          <view class="contact-value">立即联系</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 响应式数据
const expandedIndex = ref(-1)
const showSubmitForm = ref(false)
const selectedType = ref('')
const feedbackContent = ref('')
const images = ref([])
const contactInfo = ref('')

// 常见问题数据
const faqList = [
  {
    question: '如何添加新玩家？',
    answer: '在游戏开始页面，点击"添加玩家"按钮，输入玩家名称即可添加新玩家。您可以添加多个玩家参与计分。'
  },
  {
    question: '如何修改玩家分数？',
    answer: '点击玩家对应的分数区域，会弹出数字键盘，输入新的分数后点击"提交"即可更新玩家分数。'
  },
  {
    question: '如何查看历史对局记录？',
    answer: '在首页点击"历史记录"图标，进入历史记录页面即可查看所有保存的对局记录。'
  },
  {
    question: '如何清除应用缓存？',
    answer: '在"我的"页面，点击"设置"，然后选择"清除缓存"选项即可清除应用缓存数据。'
  },
  {
    question: '计分数据会同步到云端吗？',
    answer: '目前计分数据仅保存在本地，不会自动同步到云端。如需备份，请定期导出数据。'
  }
]

// 问题类型数据
const problemTypes = [
  {
    name: '功能建议',
    img: '/static/advise.png',
    color: '#ffcc00'
  },
  {
    name: 'bug反馈',
    img: '/static/bug.png',
    color: '#ff3b30'
  },
  {
    name: '界面优化',
    img: '/static/optimize.png',
    color: '#34aadc'
  },
  {
    name: '其他问题',
    img: '/static/other.png',           
    color: '#999999'
  }
]

// 切换FAQ展开状态
const toggleFaq = (index) => {
  expandedIndex.value = expandedIndex.value === index ? -1 : index
}

// 选择问题类型
const selectProblemType = (type) => {
  selectedType.value = type.name
  showSubmitForm.value = true
}

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - images.value.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      images.value = [...images.value, ...res.tempFilePaths]
    }
  })
}

// 删除图片
const deleteImage = (index) => {
  images.value.splice(index, 1)
}

// 提交反馈
const submitFeedback = () => {
  if (!feedbackContent.value.trim()) {
    uni.showToast({
      title: '请输入反馈内容',
      icon: 'none'
    })
    return
  }

  // 模拟提交
  uni.showLoading({
    title: '提交中...'
  })

  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '反馈提交成功',
      icon: 'success'
    })
    
    // 重置表单
    feedbackContent.value = ''
    images.value = []
    contactInfo.value = ''
    showSubmitForm.value = false
  }, 1500)
}

// 移除多余的返回函数，使用默认的导航返回

// 复制邮箱
const copyEmail = () => {
  uni.setClipboardData({
    data: 'support@example.com',
    success: () => {
      uni.showToast({
        title: '邮箱已复制',
        icon: 'success'
      })
    }
  })
}
</script>

<style scoped>
.feedback-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 简化的页面标题 */
  .page-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
    background-color: #fff;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    text-align: center;
  }

/* 内容区域 */
.feedback-content {
  padding: 30rpx;
}

.section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

/* 常见问题样式 */
.faq-list {
  width: 100%;
}

.faq-item {
  border-bottom: 1rpx solid #f0f0f0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
}

.faq-question {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.faq-answer {
  font-size: 26rpx;
  color: #666;
  padding: 0 0 25rpx 0;
  line-height: 1.6;
}

/* 问题类型样式 */
.problem-types {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.problem-type {
  width: 45%;
  background-color: #f8f8f8;
  border-radius: 15rpx;
  padding: 30rpx 0;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.problem-type:active {
  background-color: #e8e8e8;
  transform: scale(0.98);
}

.type-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.type-name {
  font-size: 28rpx;
  color: #333;
}

/* 表单样式 */
.form-group {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

.feedback-textarea {
  width: 100%;
  height: 240rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #333;
  background-color: #fafafa;
  resize: none;
}

.word-count {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  margin-top: 10rpx;
}

/* 优化的图片上传样式 */
  .image-upload {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -10rpx;
  }

  .upload-btn {
    width: 200rpx;
    height: 200rpx;
    border: 2rpx dashed #007aff;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10rpx;
    background-color: #f0f8ff;
    transition: all 0.2s ease;
  }

  .upload-btn:active {
    background-color: #e0e8ff;
    transform: scale(0.98);
  }

  .upload-text {
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
  }

  .image-item {
    width: 200rpx;
    height: 200rpx;
    position: relative;
    margin: 10rpx;
    border-radius: 12rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
  }

  .preview-image {
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
    object-fit: cover;
  }

  .delete-btn {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    width: 44rpx;
    height: 44rpx;
    background-color: rgba(255, 0, 0, 0.8);
    border-radius: 22rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
  }

.contact-input {
  width: 100%;
  height: 80rpx;
  font-size: 30rpx;
  color: #333;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  background-color: #fafafa;
}

.submit-btn {
  margin: 40rpx 30rpx 20rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
}

.submit-btn[disabled] {
  background-color: #cccccc;
}

/* 联系方式样式 */
.contact-options {
  padding: 0 30rpx 30rpx;
}

.contact-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-icon {
  width: 60rpx;
  height: 60rpx;
  background-color: #f0f8ff;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  overflow: hidden;
}

.contact-icon-image {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.contact-info {
  flex: 1;
}

.contact-label {
  font-size: 28rpx;
  color: #666;
  display: block;
}

.contact-value {
  font-size: 30rpx;
  color: #007aff;
  display: block;
  margin-top: 5rpx;
}
</style>