<script setup lang="ts">
import { ref } from 'vue'
import { showConfirmDialog, showSuccessToast } from 'vant'
import { submitApprovalApi } from '@/common/apis/approval'
import type { SubmitApprovalRequestData } from '@/common/apis/approval/type'
import { useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const formData = ref<SubmitApprovalRequestData>({
  orderId: Number(route.query.orderId),
  goodsId: Number(route.query.goodsId),
  returnQuantity: 1,
  returnImages: ''
})

const submitting = ref(false)
const fileList = ref<Array<{ url: string }>>([])

const validateForm = () => {
  if (!formData.value.orderId || isNaN(formData.value.orderId)) {
    showConfirmDialog({ title: '错误', message: '订单ID参数错误' })
    return false
  }
  if (!formData.value.goodsId || isNaN(formData.value.goodsId)) {
    showConfirmDialog({ title: '错误', message: '商品ID参数错误' })
    return false
  }
  if (formData.value.returnQuantity < 1) {
    showConfirmDialog({ title: '提示', message: '退还数量至少为1' })
    return false
  }
  return true
}

const handleSubmit = async () => {
  if (!validateForm()) return

  submitting.value = true
  try {
    formData.value.returnImages = fileList.value.map(f => f.url).join(',')
    
    const { code } = await submitApprovalApi(formData.value)
    
    if (code === 0) {
      showSuccessToast('提交成功')
      router.push({ name: 'approval-result', query: { id: formData.value.orderId } })
    }
  } catch (error) {
    showConfirmDialog({
      title: '提交失败',
      message: error instanceof Error ? error.message : '网络请求异常'
    })
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <div class="approval-container">
    <van-nav-bar 
      title="退货审批"
      left-text="返回"
      left-arrow
      fixed
      @click-left="() => router.go(-1)"
    />

    <div class="content-wrapper">
      <van-cell-group>
        <!-- 移除订单ID和商品ID的输入框 -->
        <van-field
          v-model="formData.returnQuantity"
          label="退还数量"
          type="number"
          :min="1"
        />
      </van-cell-group>

      <van-cell-group class="upload-section">
        <van-cell title="凭证图片">
          <template #extra>
            <van-uploader 
              v-model="fileList"
              multiple
              max-count="3"
              :after-read="() => {}"
            />
          </template>
        </van-cell>
      </van-cell-group>

      <div class="submit-bar">
        <van-button
          type="primary"
          block
          :loading="submitting"
          loading-text="提交中..."
          @click="handleSubmit"
        >
          提交申请
        </van-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.approval-container {
  padding: 12px 16px;
}

.content-wrapper {
  padding-top: 46px;
}

.upload-section {
  margin: 20px 0;
}

.submit-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: #fff;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
}
</style>