<template>
  <view class="report-time-change">
    <view class="change-time">
      <wd-icon name="arrow-left" size="30rpx" color="#A9AAB5" @click="prevTime"></wd-icon>
      <view class="time-text">{{ currentDate.format('MM月DD日') }}</view>
      <wd-icon name="arrow-right" size="30rpx" color="#A9AAB5" @click="nextTime"></wd-icon>
    </view>
    <calender-popup v-model:value="currentDate" @change="dateOnChange"></calender-popup>
  </view>
</template>

<script setup lang=ts>
import dayjs from "dayjs";
import {ref, watch} from "vue";
import CalenderPopup from "@/components/CalenderPopup/CalenderPopup";

const currentDate = ref(dayjs());

const props = defineProps({
  value: {
    type: dayjs,
    default: () => dayjs()
  }
})

const emit = defineEmits(['update:value', 'change'])

const updateValue = () => {
  emit("update:value", currentDate.value)
  emit("change", currentDate.value)
}

const prevTime = () => {
  currentDate.value = currentDate.value.subtract(1, 'day');
  updateValue()
};
const nextTime = () => {
  currentDate.value = currentDate.value.add(1, 'day');
  updateValue()
};

const dateOnChange = () => {
  updateValue()
}

watch(() => props.value, (newValue) => {
  currentDate.value = newValue;
}, {immediate: true})
</script>

<style scoped lang="scss">
.report-time-change {
  height: 108rpx;
  border-radius: 20rpx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  .change-time {
    padding: 30rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10rpx;
    .time-text {
      font-size: 34rpx;
      font-weight: 500;
    }
  }
}
</style>
