<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  visible: boolean
  loading: boolean
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'submit', data: { processContent: string; attachments: string }): void
}>()

const handleFormData = ref({
  processContent: '',
  attachments: ''
})

const uploadFiles = ref([])

function handleCancel() {
  emit('update:visible', false)
  resetForm()
}

function resetForm() {
  handleFormData.value = {
    processContent: '',
    attachments: ''
  }
  uploadFiles.value = []
}

function submitForm() {
  if (!handleFormData.value.processContent) {
    uni.showToast({ title: '请输入处理内容', icon: 'none' })
    return
  }
  
  emit('submit', { ...handleFormData.value })
  resetForm()
}

function handleFileSuccess(data: any) {
  const fileNames = data.fileList.map((f: any) => {
    try {
      const response = JSON.parse(f.response)
      return response.data.fileName
    } catch (error) {
      console.error('解析文件响应失败:', error)
      return ''
    }
  }).filter(Boolean)
  handleFormData.value.attachments = fileNames.join(',')
}
</script>

<template>
  <wd-popup
    v-model="props.visible"
    position="bottom"
    round
    :overlay="true"
    :close-on-click-overlay="true"
    overlay-class="popup-overlay"
    class="filter-popup-container">
    <view class="filter-popup" style="min-height: 500rpx;">
      <view class="p-4">
        <view class="text-lg font-medium mb-4">处理工单</view>
        
        <!-- 处理内容 -->
        <view class="mb-4">
          <text class="block mb-2 font-medium">
            <text class="text-red-500">*</text> 处理内容
          </text>
          <wd-textarea 
            v-model="handleFormData.processContent" 
            placeholder="请输入处理内容" 
            :rows="4"
          />
        </view>
        
        <!-- 附件上传 -->
        <view class="mb-4">
          <text class="block mb-2 font-medium">附件</text>
          <wd-upload
            v-model:file-list="uploadFiles" 
            action="/common/upload"
            accept="image/*"
            @success="handleFileSuccess"
            @remove="(file, fileList) => uploadFiles = fileList"
            multiple
            max-count="5"
          />
        </view>
      </view>
      <view class="flex justify-end m-6">
        <wd-button size="large" type="info" @click="handleCancel" style="margin-right: 16rpx;">取消</wd-button>
        <wd-button size="large" type="primary" @click="submitForm" :loading="props.loading">确定</wd-button>
      </view>
    </view>
  </wd-popup>
</template>

<style scoped>
.p-4 {
  padding: 32rpx;
}

.mb-4 {
  margin-bottom: 32rpx;
}

.text-lg {
  font-size: 32rpx;
}

.font-medium {
  font-weight: 500;
}

.block {
  display: block;
}

.text-red-500 {
  color: #ff4d4f;
}

.flex {
  display: flex;
}

.justify-end {
  justify-content: flex-end;
}

.m-6 {
  margin: 48rpx;
}

.filter-popup-container {
  z-index: 9999;
}

.filter-popup {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
}
</style>