<script setup lang="ts">
import dayjs from 'dayjs'

const { t } = useI18n();
const emit = defineEmits(['confirm'])
const show = ref(false);
const code = ref("");
const value = ref<number>(Date.now())

function onOpen() {
  show.value = true;
}
function handleClose() {
  show.value = false;
}
function handleSubmit() {
  console.log(value.value);
  
  // 根据选择的时间戳计算月份的开始和结束时间戳
  const selectedDate = dayjs(value.value);
  const startOfMonth = selectedDate.startOf('month');
  const endOfMonth = selectedDate.endOf('month');
  
  const createBeginTime = startOfMonth.valueOf().toString();
  const createEndTime = endOfMonth.valueOf().toString();
  
  console.log('月份开始时间戳:', createBeginTime);
  console.log('月份结束时间戳:', createEndTime);
  
  // 通过emit传递给父组件
  emit('confirm', {
    createBeginTime,
    createEndTime
  });
  
  show.value = false;
}
const formatter = (type, value) => {
  switch (type) {
    case 'year':
      return value + ' ' + t('pages-user.balance.year')
    case 'month':
      return value + ' ' + t('pages-user.balance.month')
    default:
      return value
  }
}

defineExpose({
  onOpen,
});
</script>

<template>
  <wd-popup
    v-model="show"
    position="bottom"
    @close="handleClose"
  >
  <view>
    <view class="flex-center-sb h-102rpx bg-#F7F7F7 px-30rpx">
        <view @click="handleClose" class="text-30rpx text-#999">{{ t('common.cancel') }}</view>
        <view class="text-34rpx text-#333">{{ t('pages-user.balance.year-month-select') }}</view>
        <view @click="handleSubmit" class="text-30rpx text-#FF6106">{{ t('common.confirm') }}</view>
    </view>
    <view class="bg-#fff px-54rpx py-56rpx">
        <wd-datetime-picker-view :formatter="formatter" type="year-month" v-model="value" />
    </view>
  </view>
  </wd-popup>
</template>

<style scoped lang="scss">
:deep(.uni-picker-view-wrapper) {
  & > uni-picker-view-column:first-of-type .uni-picker-view-group {
    .uni-picker-view-indicator {
      border-radius: 20rpx 0 0 20rpx !important;
      &:after {
        border: none;
      }
      &:before {
        border: none;
      }
    }
  }
  & > uni-picker-view-column:nth-of-type(2) .uni-picker-view-group {
    .uni-picker-view-indicator {
      border-radius: 0 20rpx 20rpx 0 !important;
      &:after {
        border: none;
      }
      &:before {
        border: none;
      }
    }
  }
}

:deep(.wd-picker-view-column__item) {
  line-height: 94rpx !important;
}
:deep(.uni-picker-view-indicator) {
  height: 94rpx !important;
}
</style>