<template>
  <hs-popup-buttom-custom
    :show="props?.show"
    title="出入证延期"
    @close="handleClose"
    mode="bottom"
    :closeable="true"
    :round="20"
    :safeAreaInsetBottom="false"
  >
    <view class="popup_content">
      <hs-date-picker
        title="开始时间"
        v-model:valueModel="popupFormData.visit_start_time"
        required
        isLink
      />
      <hs-cell title="原截止时间" borderTop> {{ props?.items?.valid_to }} </hs-cell>
      <hs-date-picker
        title="新截止时间"
        v-model:valueModel="popupFormData.visit_end_time"
        required
        borderTop
        isLink
      />
      <view class="popup_footer">
        <hs-button label="提交" size="md" @click="handleSubmit" />
      </view>
    </view>
  </hs-popup-buttom-custom>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { showToastBack, showToast } from '@/common/libraries/naviHelper'
const props = defineProps(['show', 'items'])
const emit = defineEmits(['click', 'handleSubmit', 'handleClose'])
const popupFormData = ref<any>({})
const handleSubmit = () => {
  if (!popupFormData.value?.visit_end_time) {
    return showToast('请选择新截止时间！')
  }
  emit('handleSubmit', { ...props?.items, ...popupFormData.value })
}
const handleClose = () => {
  emit('handleClose')
}
watch(
  () => props?.show,
  newVal => {
    popupFormData.value = {
      ...props?.items,
      visit_start_time: props?.items?.valid_from || ''
      // visit_end_time: props?.items?.valid_to || '',
    }
    console.log(popupFormData.value, props?.items, 'popupFormData.value')
  }
)
</script>
<style lang="scss" scoped>
.popup_content {
  padding: 30rpx;
  .popup_footer {
    padding: 30rpx 0 100rpx 0;
  }
}
</style>
