<template>
  <div class="rf-date-select-wrap" data-weiling-mobile-ui-rf-date-select-wrap>
    <div class="rf-date-select" @click="onShow">{{ valueText }}</div>
    <WlDatePicker
      v-model="popUpVisible"
      color="var(--wl-primary-color)"
      type="date"
      :min-date="minDate"
      :max-date="maxDate"
      @onConfrim="onSelect"
    />
  </div>
</template>

<script lang="ts">
export default {
  name: "RfDateSelect",
};
</script>

<script lang="ts" setup>
import { ref, watchEffect } from "vue";
import { formatMoment } from "@mobileUI/utils/dayjs";
import WlDatePicker from "@mobileUI/components/WlDatePicker/src/index.vue";

type Props = {
  modelValue?: string | number;
  format?: string;
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: "",
  format: "YYYY-MM-DD",
});

const emit = defineEmits<{
  (e: "onSelect", val: number);
  (e: "update:modelValue", val: number);
}>();

const popUpVisible = ref(false);
const valueText = ref("");
const defaultSelectTime = ref<Date>(new Date());
const minDate = new Date(1901, 1, 1);
const maxDate = new Date(new Date().getFullYear() + 10, 12, 31);
const onClose = () => {
  popUpVisible.value = false;
};
const onShow = () => (popUpVisible.value = true);

const onSelect = (date) => {
  emit("onSelect", new Date(date).getTime());
  emit("update:modelValue", new Date(date).getTime());
  onClose();
};

watchEffect(() => {
  defaultSelectTime.value = props.modelValue
    ? new Date(parseInt(props.modelValue + ""))
    : new Date();
  valueText.value = props.modelValue ? formatMoment(props.modelValue, props.format) : "";
});
</script>

<style lang="scss">
.mul-rf-select-wrap[data-weiling-mobile-ui-rf-date-select-wrap] {
  width: 100%;
  .rf-date-select {
    min-height: j(30);
    width: 100%;
    @extend %flex-middle;
  }
}
</style>
