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

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

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'submit', data: {
    approveStatus: string
    approveRemark: string
    newDeadline: string
  }): void
}>()

// 表单数据
const formData = ref({
  approveStatus: '',
  approveRemark: '',
  newDeadline: ''
})

// 日历值
const calendarValue = ref('')

// 日历可见性
const showCalendar = ref(false)

// 处理日历确认事件
function handleConfirm(date: any) {
  console.log('确认日期:', date)
  
  // 处理日期值，确保是 yyyy-mm-dd HH:MM:SS 格式
  let formattedDate = ''
  if (typeof date === 'object' && date.value) {
    // 如果是时间戳对象
    const dateObj = new Date(date.value)
    formattedDate = dateObj.toISOString().split('T')[0] + ' 00:00:00'
  } else if (typeof date === 'number') {
    // 如果是时间戳数字
    const dateObj = new Date(date)
    formattedDate = dateObj.toISOString().split('T')[0] + ' 00:00:00'
  } else if (typeof date === 'string') {
    // 如果已经是字符串
    if (date.includes('T')) {
      // 如果包含 T，转换为空格分隔
      formattedDate = date.replace('T', ' ').substring(0, 19)
    } else if (date.length === 10) {
      // 如果是 yyyy-mm-dd 格式，添加时间部分
      formattedDate = date + ' 00:00:00'
    } else {
      formattedDate = date
    }
  }
  
  formData.value.newDeadline = formattedDate
  calendarValue.value = formattedDate
  showCalendar.value = false
}

// 提交表单
function submitForm() {
  if (!formData.value.approveStatus) {
    uni.showToast({
      title: '请选择审核状态',
      icon: 'none'
    })
    return
  }
  
  if (!formData.value.newDeadline) {
    uni.showToast({
      title: '请选择新截止时间',
      icon: 'none'
    })
    return
  }
  
  emit('submit', formData.value)
}

// 重置表单
function resetForm() {
  formData.value = {
    approveStatus: '',
    approveRemark: '',
    newDeadline: ''
  }
}
const handleDateConfirm = (date) => {
  // 将 Date 对象格式化为 yyyy-mm-dd
  const formatDate = (dateObj) => {
    const year = dateObj.getFullYear();
    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
    const day = String(dateObj.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  };
  
  const formatted = formatDate(date);
  displayDate.value = formatted;
  console.log('提交给后端的日期字符串:', formatted);
};
// 监听visible变化，重置表单
watch(() => props.visible, (newVal) => {
  if (!newVal) {
    resetForm()
  }
})
</script>
<template>
  <wd-popup v-model="props.visible" position="bottom" round custom-class="approve-delay-form-popup">
    <view class="popup-header">
      <text class="popup-title">延时审批</text>
      <!-- <wd-icon name="close" size="24px" @click="$emit('update:visible', false)"></wd-icon> -->
    </view>
    
    <view class="popup-content">
      <!-- 审核状态 -->
      <view class="form-item">
        <text class="form-label">审核状态：</text>
        <wd-radio-group v-model="formData.approveStatus"  shape="dot">
          <wd-radio :value="'1'">审核通过</wd-radio>
          <wd-radio :value="'2'">审核拒绝</wd-radio>
        </wd-radio-group>
      </view>
      
      <!-- 新截止时间 -->
      <view class="form-item">
        <text class="form-label">新截止时间：</text>
        <wd-calendar 
          v-model="calendarValue" 
          @confirm="handleConfirm" 
        />
      </view>
      
      <!-- 审批意见 -->
      <view class="form-item">
        <text class="form-label">审批意见：</text>
        <wd-textarea 
          v-model="formData.approveRemark" 
          placeholder="请输入审批意见" 
          rows="4"
        ></wd-textarea>
      </view>
    </view>
    
    <view class="popup-footer">
      <wd-button 
        size="medium" 
        custom-class="footer-btn cancel-btn" 
        @click="$emit('update:visible', false)"
      >
        取消
      </wd-button>
      <wd-button 
        size="medium" 
        type="primary" 
        custom-class="footer-btn confirm-btn" 
        :loading="loading"
        @click="submitForm"
      >
        确认
      </wd-button>
    </view>
  </wd-popup>
</template>

<style scoped>
.approve-delay-form-popup {
  width: 100%;
  max-height: 80vh;
  border-radius: 16rpx 16rpx 0 0;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1rpx solid #e5e7eb;
}

.popup-title {
  font-size: 32rpx;
}

.popup-content {
  padding: 24rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.form-item {
  margin-bottom: 32rpx;
}

.form-label {
  font-size: 32rpx;
  color: #000;
  font-weight: 500;
  margin-bottom: 12rpx;
  display: block;
}

.popup-footer {
  display: flex;
  padding: 24rpx;
  border-top: 1rpx solid #e5e7eb;
  gap: 16rpx;
}

.footer-btn {
  flex: 1;
}

.cancel-btn {
  border: 1rpx solid #e5e7eb;
}

.confirm-btn {
  background-color: #1989fa;
  color: #fff;
}
</style>