<template>
  <view>
    <DatetimePicker
      :id="0"
      ref="startDatetimePicker"
      title="加班日期"
      @change="changeDate"
      required
    ></DatetimePicker>
    <wd-divider v-if="timestamp" color="#bcbfbe"></wd-divider>
    <DatetimePickerGroup
      v-if="timestamp"
      type="overtime"
      unit="datetime"
      :id="1"
    ></DatetimePickerGroup>
  </view>
</template>

<script setup lang="ts">
  import DatetimePickerGroup from '@/pages/approval/components/DatetimePickerGroup.vue'
  import DatetimePicker from '@/pages/approval/components/DatetimePicker.vue'

  const timestamp = ref<number>(0)

  const props = defineProps({
    id: {
      type: Number,
      required: true
    }
  })

  const changeDate = e => {
    timestamp.value = e.value
    console.log('changeDate', e)
  }
</script>

<style scoped lang="scss">
  .wd-divider {
    padding: 0 0.5rem;
  }
</style>
