<script lang="ts" setup>
import dayjs from 'dayjs';
import { onUpdated, watch } from 'vue';
import { onMounted, ref } from 'vue';

const props = defineProps<{
  value: [number, number] | null
  label: string
}>()

const emit = defineEmits<{
  (e: 'update:value', value: number[]): void
}>()

const time = ref<[number, number] | null>(props.value)

function onChange(value: [number, number]) {
  emit('update:value', value)
}
onMounted(() => {
    if(!props.value) {
      // 获取当前日期
      const currentDate = dayjs();
      // 计算前三个月的起始日期和结束日期
      const endDate =  currentDate.toDate();
      const startDate = currentDate.subtract(3, 'month').toDate();
      // 设置默认日期范围为前三个月的起始日期到三个月前的今天
      time.value = [startDate.getTime(), endDate.getTime()];
      console.log('time init', startDate.getTime(), endDate.getTime());
      setTimeout(() => {
        onChange([startDate.getTime(), endDate.getTime()])
      },300)
    }
})

watch(() => props.value,
  (newVal, oldVal) => {
    time.value = newVal
    console.log("newVal", newVal, time.value);
  }, {
    deep: true
  }
);
</script>

<template>
  <div class="wrapper">
    <n-collapse :default-expanded-names="['1']" arrow-placement="right">
      <n-collapse-item :title="label" name="1">
        <n-space>
          <n-date-picker v-model:value="time" type="daterange" clearable @update:value="onChange">
            <template #separator>
              至
            </template>
          </n-date-picker>
        </n-space>
      </n-collapse-item>
    </n-collapse>
  </div>
</template>

<style lang="less" scoped>
.wrapper {
  padding: 10px;
}

::v-deep(.n-collapse-item-arrow) {
  color: #999999 !important;
}

::v-deep(.n-input__separator) {
  color: #999999 !important;
  ;
}</style>
