<template>
  <picker :mode="props?.mode || 'date'" :value="props.valueModel" @change="onChange" fields="day" :start="startDate"
    :end="endDate">
    <hs-cell :title="props?.title || '选择日期'" :required="props?.required" :borderTop="props?.borderTop"
      :value="dateValue" isLink isLabelRight isPlaceholder="请选择日期" />
  </picker>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
const dateValue = ref('')
// hasFutureDate: 是否是未来日期，即过去日期不可选，只能选择当前日期的未来时
const props = defineProps([
  'valueModel',
  'required',
  'tip',
  'title',
  'hasFutureDate',
  'borderTop',
  'isLink',
  'mode'
])
const emit = defineEmits(['change', 'update:valueModel'])
const startDate = ref('')
const endDate = ref('')
const onChange = (e: any) => {
  dateValue.value = e?.detail.value
  emit('update:valueModel', e?.detail.value)
  emit('change', e?.detail.value)
}

onMounted(() => {
  const date = new Date()
  let year = date.getFullYear()
  let month: string | number = date.getMonth() + 1
  let day: string | number = date.getDate()
  month = month > 9 ? month : '0' + month
  day = day > 9 ? day : '0' + day
  startDate.value = props?.hasFutureDate
    ? `${year}-${month}-${day}`
    : `${year - 60}-${month}-${day}`
  endDate.value = `${year + 60}-${month}-${day}`
  if (props?.valueModel) {
    dateValue.value = props?.valueModel
  }
})

watch(
  () => props?.valueModel,
  newVal => {
    console.log(newVal, 'newVal')
    dateValue.value = props?.valueModel
  }
)
</script>
