<template>
  <view class="feedback-page">
    <!-- 自定义导航栏 -->
    <nav-bar :title="$t('user.feedback')"></nav-bar>

    <view class="feedback-content">
      <view class="feedback-form">
        <!-- 问题类型 -->
        <view class="form-item">
          <text class="label required">{{ $t('user.issueType') }}</text>
          <wd-select-picker
            v-model="form.type"
            type="radio"
            :columns="issueTypeOptions"
            :placeholder="$t('common.pleaseSelect')"
            :show-confirm="false"
          />
        </view>

        <!-- 账号 -->
        <view class="form-item">
          <text class="label required">{{ $t('user.account') }}</text>
          <wd-input
            v-model="form.account"
            :placeholder="$t('user.account')"
          />
        </view>

        <!-- 订单编号（条件显示） -->
        <view v-if="form.type === '3'" class="form-item">
          <text class="label required">{{ $t('user.orderSn') }}</text>
          <wd-input
            v-model="form.relation"
            type="number"
            :placeholder="$t('user.pleaseInputOrderSn')"
            @input="handleRelationInput"
          />
        </view>

        <!-- 问题描述 -->
        <view class="form-item">
          <text class="label required">{{ $t('user.description') }}</text>
          <wd-textarea
            v-model="form.content"
            auto-height
            :placeholder="$t('user.pleaseInputDescription')"
            :maxlength="200"
            show-word-limit
          />
        </view>

        <!-- 联系电话 -->
        <view class="form-item">
          <text class="label required">{{ $t('user.contactPhone') }}</text>
          <wd-input
            v-model="form.contactInformation"
            type="number"
            :placeholder="$t('user.pleaseInputPhone')"
          />
        </view>

        <!-- 截图上传 -->
        <view class="form-item">
          <text class="label">{{ $t('user.screenshots') }}</text>
          <wd-upload
            :fileList="imageList"
            :limit="4"
            action="https://global.nuttyreading.com/oss/fileoss"
            @change="handleChangeImage"
          />
          <text class="tip-text">{{ $t('user.maxImagesCount') }}</text>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-button">
          <wd-button
            type="success"
            block
            @click="handleSubmit"
          >
            {{ $t('common.submit') }}
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { submitFeedback } from '@/api/modules/user'
import type { IFeedbackForm } from '@/types/user'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const userStore = useUserStore()

// 问题类型选项
const issueTypeOptions = computed(() => [
  { label: t('user.issueTypeAccount'), value: '1' },
  { label: t('user.issueTypePayment'), value: '2' },
  { label: t('user.issueTypeOrder'), value: '3' },
  { label: t('user.issueTypeContent'), value: '4' },
  { label: t('user.issueTypeSuggestion'), value: '5' },
  { label: t('user.issueTypeBug'), value: '6' },
  { label: t('user.issueTypeOther'), value: '7' }
])

// 表单数据
const form = ref<IFeedbackForm>({
  type: '',
  account: userStore.userInfo.email || userStore.userInfo.phone || '',
  relation: '',
  content: '',
  contactInformation: '',
  image: ''
})

// 图片列表
const imageList = ref<any[]>([])

// 错误状态
const relationError = ref(false)

/**
 * 处理订单编号输入
 */
const handleRelationInput = () => {
  relationError.value = false
}

/**
 * 上传前检查
 */
const beforeUpload = async (file: any) => {
  // TODO: 检查相机和存储权限
  
  // 检查文件大小
  if (file.size > 5 * 1024 * 1024) {
    uni.showToast({
      title: '图片大小不能超过5MB',
      icon: 'none'
    })
    return false
  }
  
  return true
}

/**
 * 上传文件变化
 */
const imageUrl = ref<any[]>([])
const handleChangeImage = ({ fileList }: any) => {
  console.log('上传文件变化:', fileList)
  imageUrl.value = []
  fileList.forEach((file:any) => {
    imageUrl.value.push(JSON.parse(file.response).url)
  })
  console.log('图片列表:', imageUrl.value)
  // this.fileList = fileList
}

/**
 * 表单验证
 */
const validateForm = (): boolean => {
  // 验证问题类型
  if (!form.value.type) {
    uni.showToast({
      title: t('common.pleaseSelect') + t('user.issueType'),
      icon: 'none'
    })
    return false
  }

  // 验证账号
  if (!form.value.account) {
    uni.showToast({
      title: t('user.pleaseInput') + t('user.account'),
      icon: 'none'
    })
    return false
  }

  // 验证订单编号（当类型为订单相关时）
  if (form.value.type === '3') {
    if (!form.value.relation) {
      relationError.value = true
      uni.showToast({
        title: t('user.pleaseInputOrderSn'),
        icon: 'none'
      })
      return false
    }
  }

  // 验证问题描述
  if (!form.value.content) {
    uni.showToast({
      title: t('user.pleaseInputDescription'),
      icon: 'none'
    })
    return false
  }

  // 验证联系电话
  if (!form.value.contactInformation) {
    uni.showToast({
      title: t('user.pleaseInputPhone'),
      icon: 'none'
    })
    return false
  }

  return true
}

/**
 * 提交反馈
 */
const handleSubmit = async () => {
  // 表单验证
  if (!validateForm()) {
    return
  }

  try {
    uni.showLoading()

    // 处理图片
    if (imageUrl.value.length > 0) {
      form.value.image = imageUrl.value.join(',')
    }

    // 提交反馈
    await submitFeedback(form.value)

    uni.hideLoading()
    
    uni.showModal({
      title: t('global.tips'),
      content: t('user.feedbackSuccess'),
      showCancel: false,
      confirmText: t('common.confirm'),
      success: () => {
        // 清空表单
        imageList.value = []
        imageUrl.value = []
        form.value = {
          type: '',
          account: userStore.userInfo.email || userStore.userInfo.phone || '',
          relation: '',
          content: '',
          contactInformation: '',
          image: ''
        }
        
        // 返回上一页
        uni.navigateBack({
          delta: 1
        })
      }
    })
  } catch (error) {
    console.error('提交反馈失败:', error)
    uni.hideLoading()
    uni.showToast({
      title: t('user.feedbackFailed'),
      icon: 'none'
    })
  }
}
</script>

<style lang="scss" scoped>
$theme-color: #54a966;

.feedback-page {
  min-height: 100vh;
  background-color: #f7faf9;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1rpx solid #e5e5e5;

  .navbar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    position: relative;

    .navbar-left {
      position: absolute;
      left: 10px;
      display: flex;
      align-items: center;
      padding: 10rpx;
    }

    .navbar-title {
      font-size: 16px;
      font-weight: 700;
      color: #333;
    }
  }
}

.feedback-content {
  padding: 20rpx;
}

.feedback-form {
  background: #fff;
  border-radius: 15rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.form-item {
  margin-bottom: 30rpx;

  .label {
    display: block;
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 15rpx;

    &.required::before {
      content: '*';
      color: red;
      margin-right: 5rpx;
    }
  }

  .error-text {
    display: block;
    font-size: 24rpx;
    color: red;
    margin-top: 10rpx;
  }

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

.submit-button {
  margin-top: 50rpx;
}
</style>
