<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useToast } from 'wot-design-uni'
import { dealPhotoTask } from '@/api/schedule/task'
import useUpload from '@/hooks/useUpload'

const toast = useToast()

definePage({
  style: {
    navigationBarTitleText: '拍照任务',
  },
})

// 任务和检查项ID
const taskId = ref('')
const checkId = ref('')

// 表单数据
const formData = ref({
  attachments: '',
  remark: '',
})

// 上传图片列表
const fileList = ref<any[]>([])

// 上传状态
const loading = ref(false)

// 上传问题照片
const uploadProblemPhoto: any = (file, formData, options) => {
  const { customUpload } = useUpload({
    fileType: 'image',
  })
  return customUpload(file, formData, options)
}

// 删除问题照片
function deleteProblemPhoto(index: number) {
  fileList.value.splice(index, 1)

  // 更新附件字段
  const fileNames = fileList.value.map((item: any) => item.name).filter(Boolean)
  formData.value.attachments = fileNames.join(',')
}

// 提交表单
async function submitForm() {
  // 检查是否有图片上传
  if (fileList.value.length === 0) {
    toast.info('请上传图片')
    return
  }

  // 构建请求参数
  const params = {
    id: taskId.value,
    attachment: fileList.value.map((item: any) => item.name).join(','),
    result: formData.value.remark,
  }

  // 开始提交，显示 loading
  loading.value = true

  // 调用处理任务附件接口
  try {
    const res: any = await dealPhotoTask(params)
    if (res.code === 200) {
      toast.success('提交成功')
      // 跳转回上一页
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
    else {
      toast.error(res.msg || '提交失败，请重试')
      return
    }
  }
  catch (error) {
    toast.error('提交失败，请重试')
    return
  }
  finally {
    // 提交完成，隐藏 loading
    loading.value = false
  }
}

// 页面加载时获取参数
onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  // 使用类型断言获取options
  const options = (currentPage as any).options || {}
  taskId.value = options.id || ''
  checkId.value = options.checkId || ''
})
</script>

<template>
  <view class="page min-h-screen bg-gray-100 p-4">
    <view class="rounded-lg bg-white p-4 shadow-sm">
      <!-- 上传图片 -->
      <view class="mb-6">
        <view class="mb-4 flex items-center justify-between">
          <text class="font-medium">上传图片</text>
        </view>
        <view>
          <wd-upload
            v-model:file-list="fileList"
            image-mode="aspectFill"
            :upload-method="uploadProblemPhoto"
            @delete="deleteProblemPhoto"
          />
        </view>
      </view>

      <!-- 备注 -->
      <view class="mb-6">
        <text class="mb-2 block font-medium">处理结果</text>
        <wd-textarea v-model="formData.remark" placeholder="请填写处理结果" auto-height :maxlength="120" clearable show-word-limit />
      </view>

      <!-- 提交按钮 -->
      <view class="mt-8 flex justify-center">
        <wd-button
          type="primary"
          size="large"
          :loading="loading"
          @click="submitForm"
        >
          提交
        </wd-button>
      </view>
    </view>
    <wd-toast />
  </view>
</template>

<style lang="scss" scoped>
// 保持与upload.vue一致的样式
</style>
