<script setup lang="ts">
import * as R from 'ramda'
import {debounce} from "throttle-debounce";
import Config from "@/config";
import {useConfigStore} from "@/store";

interface DayItem {
  date: string
  name: string
  time: number
  dataFormat: string
  selected: boolean
}

const props = defineProps<{ date?: string }>();
const emits = defineEmits<{
  success: [DayItem]
}>()

const {t} = useI18n();
const configStore = useConfigStore();
const $dayjs = inject('dayjs') as any

const show = ref(false);

// 选择的日期
const date = ref<{ fulldate: string } | null>(null)

watch(() => props.date, (value) => {
  if (value) {
    date.value = {fulldate: value}
  }
}, {
  immediate: true
})

function init() {
  show.value = true;
}

function close() {
  show.value = false;
}

function submit() {

  close();
  const weekdays = $dayjs.weekdaysShort()
  const selectedDate: string = date.value?.fulldate || ''
  let day = $dayjs(selectedDate)

  emits('success', {
    date: day.date(),
    name: weekdays[day.day()],
    time: day.valueOf(),
    dataFormat: selectedDate,
    selected: false,
  })
}

const handleSubmit = debounce(Config.debounceLongTime, submit, {
  atBegin: true
});


function handleCalendarChange(event: any) {
  console.log('event', event)
  date.value = event
}

defineOptions({
  name: "ChooseDate",
});

defineExpose({
  show,
  init,
  close,
});
</script>

<template>
  <wd-popup

      custom-class="rounded-t-30rpx"
      position="bottom"
      safe-area-inset-bottom
      v-model="show"
      @close="close"
  >
    <view class="box-border  flex flex-col"
    >
      <view class="relative p-[40rpx+30rpx]  flex items-center justify-between border-bottom">
        <view class="text-42rpx text-primary font-bold">
          {{ t('common.select-date') }}
        </view>
        <image class="absolute right-30rpx w-32rpx h-32rpx" src="@img-store/2106@2x.png" @click="close"></image>
      </view>
      <view class="mb-30rpx">
        <wu-calendar
            :todayDefaultStyle="false"
            :showMonth="false"
            :monthShowCurrentMonth="true"
            :insert="true"
            color="#333"
            :itemHeight="52"
            :startDate="$dayjs(configStore.serverTime).format('YYYY-MM-DD')"
            @change="handleCalendarChange"></wu-calendar>
      </view>

    </view>
    <fixed-bottom-large-btn class="" :text="t('common.confirm')"
                            @click="handleSubmit"
    />
  </wd-popup>
</template>

<style scoped lang="scss">
:deep(.wu-calendar) {


  .wu-calendar-item__weeks-lunar-text {
    display: none;
  }

  .wu-calendar-item__weeks-box-item {
    width: 43px !important;
    border-radius: 16rpx !important;
  }

  .wu-calendar-item__weeks-box-item::after {
    content: '';
    display: block;
    width: 8rpx;
    height: 8rpx;
    background-color: #fff;
    border-radius: 50%;
  }
}
</style>
