<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: { delayDuration: string; delayReason: string; applyFile: string }): void
}>()

const delayFormData = ref({
  delayDuration: '',
  delayReason: '',
  applyFile: ''
})

const uploadFiles = ref([])

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

function resetForm() {
  delayFormData.value = {
    delayDuration: '',
    delayReason: '',
    applyFile: ''
  }
  uploadFiles.value = []
}

function submitForm() {
  if (!delayFormData.value.delayDuration) {
    uni.showToast({ title: '请输入延时时长', icon: 'none' })
    return
  }
  if (!delayFormData.value.delayReason) {
    uni.showToast({ title: '请输入延时原因', icon: 'none' })
    return
  }
  
  emit('submit', { ...delayFormData.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)
  delayFormData.value.applyFile = 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-input 
            v-model="delayFormData.delayDuration" 
            placeholder="请输入延时时长" 
            type="number"
          />
        </view>
        
        <!-- 延时原因 -->
        <view class="mb-4">
          <text class="block mb-2 font-medium">
            <text class="text-red-500">*</text> 延时原因
          </text>
          <wd-textarea 
            v-model="delayFormData.delayReason" 
            placeholder="请输入延时原因" 
            :rows="3"
          />
        </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>