<script setup lang="ts" name="LeaveAdd">
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
// import { type FormInstance, showSuccessToast, showLoadingToast, closeToast } from 'vant'
import { registrationCard, updateTAttRegistrationCard, getRegistrationCardDetail } from '@/api/attendance/cardSign'
import { parseTime } from '../../common/utils/ruoyi'

const data = reactive({
  recordItemDurationId: '',
  checkType: '',
  signTime: '',
  signReason: '',
  oriSignTime: ''
})
onLoad((options)=>{
 console.log('JSON.parse(options.data)',JSON.parse(options.data))
  if(options.data){
    console.log('JSON.parse(options.data)',JSON.parse(options.data).signTime)
    data.checkType = JSON.parse(options.data).checkType
    data.recordItemDurationId = JSON.parse(options.data).recordItemDurationId
    data.signTime = JSON.parse(options.data).signTime
    data.signReason = JSON.parse(options.data).signReason
    data.oriSignTime =JSON.parse(options.data).oriSignTime



    form.recordItemDurationId=data.recordItemDurationId // 班次明细id
    form.checkType=data.checkType // 签卡类型 1上班签卡 2下班签卡
    form.signTime = data.signTime // 签卡时间
    console.log('form.signTime',form.signTime)
    form.oriSignTime=data.oriSignTime// 原打卡时间
  }
})
onShow(() => { 


})


// const route = useRoute()
// const router = useRouter()
// console.log('rotue data',route)

// const data = JSON.parse(route.query.data as any)
const formRef = ref<FormInstance>()
const form = reactive({
  id: '',
  auditStatus: '', // 审批状态
  recordItemDurationId: data.recordItemDurationId, // 班次明细id
  checkType: data.checkType, // 签卡类型 1上班签卡 2下班签卡
  signTime: data.signTime, // 签卡时间
  oriSignTime: data.oriSignTime, // 原打卡时间
  signReason: '' // 签卡事由
})

const loading = ref(false)
const activeTab = ref(0)
// const now = new Date()
console.log('data.signTime',data.signTime)
const date = ref(data.signTime.split(' ')[0]) // 绑定picker选择开始日期
const time = ref(data.signTime.split(' ')[1]) // 绑定picker选择开始时间
// const minDate = computed(() => now)
// const maxDate = computed(() => new Date(minDate.value.getTime() + 1000 * 3600 * 24 * 365 * 5))

const show = ref(false)

const dateFormat = {
  'year': '年',
  'month': '月',
  'day': '日',
  'hour': '时',
  'minute': '分'
}
function formatterDate(type, option) {
  option.text += dateFormat[type]
  return option
}
function formatterTime(type, option) {
  option.text += dateFormat[type]
  return option
}

// 已撤回/已退回状态，修改编辑
if (data.id) {
  // showLoadingToast({
  //   message: '请稍等...',
  //   duration: 0
  // })
  getRegistrationCardDetail(data.id).then(res => {
    // closeToast()
    const resData = res.data
    form.id = resData.id
    form.auditStatus = resData.auditStatus
    form.signTime = resData.signTime
    form.oriSignTime = resData.oriSignTime
    form.signReason = resData.signReason
    date.value = parseTime(resData.signTime, '{y}-{m}-{d}').split('-') // 绑定picker选择日期
    time.value = parseTime(resData.signTime, '{h}:{i}').split(':') // 绑定picker选择时间
  })
}

onUnmounted(() => {
  // closeToast()
})

// 选择请假开始日期时间 - 确认
function onConfirm() {
  form.signTime = String(date.value).replace(/,/g, '-') + ' ' + String(time.value).replace(/,/g, ':')
  show.value = false
  activeTab.value = 0
}

// 校验失败
function onFailed(e) {
  console.log('error', e)
}

// 校验结果
function onSubmit() {
  if(!form.signReason || form.signReason === ''){
    uni.showToast({
      icon: 'none',
      title: '请填写备注',
      duration: 1500
    })
    return
  }
  // if (e.errors) return
  loading.value = true
  // showLoadingToast({
  //   message: '提交中...',
  //   duration: 0
  // })
  const requstData = JSON.parse(JSON.stringify(form))
  const requestMethod = data.id ? updateTAttRegistrationCard : registrationCard
  requestMethod(requstData).then(res => {
    // closeToast()
    // showSuccessToast(res.msg)
    uni.showToast({
      icon: 'none',
      title: res.msg,
      duration: 1500
    })
    
    setTimeout(() => {
      uni.navigateBack()
    }, 1200)
  }).catch(() => {
    loading.value = false
  })
}

// 点击提交
function onClickSubmit() {
  formRef.value?.submit()
}
</script>

<template>
  <div class="container full float-bottom">
    <div class="container__body">
      <div class="container__card flex">
         
       <uv-form ref="formRef" labelWidth="140" label-position="top" label :model="form">
          <van-cell-group>
            <!-- 开始时间 -->

        <uv-form-item customStyle="padding: 20rpx 32rpx;" label="签卡时间"  required>
          <uv-input 
            v-model="form.signTime"
            disabled
            placeholder="点击选择结束时间"
            
            border="bottom"
            disabledColor="#fff"
          />
      
        </uv-form-item>
            <!-- <van-popup v-model:show="show" position="bottom">
              <van-picker-group
                v-model:active-tab="activeTab"
                title="时间"
                next-step-text="选择时间"
                :tabs="['日期', '时间']"
                @confirm="onConfirm"
                @cancel="show = false;activeTab=0"
              >
                <van-date-picker
                  v-model="date"
                  :formatter="formatterDate"
                />
                <van-time-picker v-model="time" :formatter="formatterTime" />
              </van-picker-group>
            </van-popup> -->
            <!-- 签卡备注 -->
             <uv-form-item customStyle="padding: 20rpx 32rpx;" label="签卡备注"  required>
          <uv-input 
            v-model="form.signReason"
            
            placeholder="请输入备注"
            
            border="bottom"
            disabledColor="#fff"
          />
      
        </uv-form-item>
            <!-- <van-field
              v-model="form.signReason"
              required
              rows="3"
              autosize
              label="备注"
              type="textarea"
              name="reason"
              maxlength="300"
              placeholder="请输入备注"
              show-word-limit
              :rules="[{ required: true, message: '请输入备注' }]"
            /> -->
          </van-cell-group>
        </uv-form>
      </div>
    </div>
    <!-- <van-button
      class="button-submit float-bottom"
      type="primary"
      :loading="loading"
      @click="onClickSubmit">提交</van-button> -->
       <uv-button
      :loading="loading"
      class="button-submit float-bottom"
      shape="circle"
      color="linear-gradient(to bottom, #4773FC, #6D9BFD)"
      customStyle="margin-top: 200rpx" 
      @click="onSubmit">提交</uv-button>
  </div>
</template>

<style lang="less" scoped></style>
