<template>
  <picker
    mode="date"
    :value="props.valueModel"
    @change="onChange"
    :start="startDate"
    :end="endDate"
  >
    <view style="display: flex">
      <view :class="`picker_${props?.valueModel ? 'value' : 'tip'}`">
        {{ props?.valueModel || props?.tip || "请选择" }}
        <uni-icons type="right" size="15" color="#333"></uni-icons>
      </view>
    </view>
  </picker>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";

// hasFutureDate: 是否是未来日期，即过去日期不可选，只能选择当前日期的未来时
const props = defineProps(["valueModel", "tip", "hasFutureDate"]);
const emit = defineEmits(["change", "update:valueModel"]);
const startDate = ref("");
const endDate = ref("");
const onChange = (e: any) => {
  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}`;
});
</script>
