<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { addBusinessTripBack } from '@/api/attendance/trip'

// Form data and state
const formRef = ref()
const form = reactive({
  backTime: '', // 结束时间
  remark: '', // 备注
  businessTripId: '' // 出差ID
})

const beginTime = ref((new Date()).getTime()) // 出差开始时间
const showBackTimePicker = ref(false)
const nowStamp = (new Date()).getTime()
// Initialize form data
onLoad((options) => {
  if (options.id) {
    form.businessTripId = options.id
  }
  if (options.beginTime) {
    beginTime.value = (new Date(String(options.beginTime).replace(/-/g, '/'))).getTime()
  }
})


const backTimeStamp = ref(0)
function onConfirmBackTime(e: any) {
  form.backTime = timestampToTime(e.value)
}

const formatter = (type, value) => {
  if (type === 'year') {
    return `${value}年`
  }
  if (type === 'month') {
    return `${value}月`
  }
  if (type === 'day') {
    return `${value}日`
  }
  if (type === 'hour') {
    return `${value}时`
  }
  if (type === 'minute') {
    return `${value}分`
  }
  return value
}
const padZero = (num: number) => {
  return num < 10 ? `0${num}` : num
}
function timestampToTime(timestamp: number) {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}
// Form submission
const onSubmit = () => {

  formRef.value?.validate().then(() => {
    uni.showLoading({ title: '提交中...' })

    addBusinessTripBack(form).then(res => {
      uni.showToast({ title: res.msg, icon: 'success' })
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    }).finally(() => {
      uni.hideLoading()
    })
  }).catch(err => {
    console.log('表单验证失败', err)
  })



}
const backTimeRef:any = ref(null)
const showbackTimeRef = ()=>{
  backTimeRef.value.open()
}




// 表单验证规则
const rules = reactive({
  backTime: [
    { required: true, message: '点击选择结束日期' }
  ],
  remark: [
    { required: true, message: '请输入备注' }
  ]
})
</script>

<template>
  <view class="container full">
    <view class="container__body">
      <view class="container__card flex">
        <uv-form 
          ref="formRef" 
          labelWidth="140"
          label-position="top"
          :model="form"
          :rules="rules"
          @submit="onSubmit"
        >
          <!-- 结束日期选择 -->
      
          
          <uv-form-item label="结束日期" prop="backTime" required  @click="showbackTimeRef">
            <uv-input 
              v-model="form.backTime"
              disabled
              placeholder="点击选择结束日期"
              border="bottom"
              disabledColor="#fff"
             
            />
             <template v-slot:right>
                <uv-icon name="arrow-right"></uv-icon>
              </template>
          </uv-form-item>


          <uv-datetime-picker
            v-model="backTimeStamp"
            ref="backTimeRef"
            type="date"
            :formatter="formatter"
            :min-date="beginTime"
            :max-date="nowStamp"
            @confirm="onConfirmBackTime"
          />

          
          <!-- 备注输入 -->
          <uv-form-item 
            label="备注" 
            prop="remark" 
            required
            custom-style="padding: 20rpx 30rpx;"
          >
            <uv-textarea
              v-model="form.remark"
              placeholder="请输入备注"
              count
              maxlength="300"
              border="bottom"
            />
          </uv-form-item>
        </uv-form>
      </view>
    </view>
    <!-- 提交按钮 -->
    <uv-button
      class="submit-button"
      type="primary"
      shape="circle"
      color="linear-gradient(to bottom, #4773FC, #6D9BFD)"
      @click="onSubmit"
    >
      提交
    </uv-button>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  box-sizing: border-box;
  
  // &__body {
  //   padding-bottom: 120rpx;
  // }
  
  .button-submit {
    position: fixed;
    bottom: 20rpx;
    left: 20rpx;
    right: 20rpx;
  }
}

:deep(.uv-form-item) {
  padding: 20rpx 30rpx;
  
  // &__body {
  //   padding-top: 10rpx;
  // }
}
</style>