<template>
  <div class="flex flex-col">
    <div
      class="flex h-36 w-full items-center justify-center bg-[#FFF8F2] text-sm text-[#FD9A00]"
    >
      以下价格为1成人起价 ·计价可能有延迟，请以下单时为准
    </div>
    <VCalendar expanded borderless>
      <template #day-content="{ day }">
        <div
          class="flex h-60 w-full flex-col items-center rounded-md pt-10 transition-all"
          :class="[
            { 'text-black-c': !isAvailableDate(day.id) },
            { 'hover:bg-primary hover:text-white': isAvailableDate(day.id) },
            isAvailableDate(day.id) ? 'cursor-pointer' : 'cursor-not-allowed',
            $dayjs(date).isSame(day.date, 'day')
              ? 'bg-primary text-white'
              : 'bg-transparent text-black-3',
          ]"
          @click="isAvailableDate(day.id) && handleDayClick(day)"
        >
          <div class="text-base font-semibold">{{ day.day }}</div>
          <div v-if="isAvailableDate(day.id)" class="scale-90 text-sm">
            <template v-if="calendarData[day.id]?.adultPrice"
              >￥{{ calendarData[day.id]?.adultPrice }}起</template
            >
            <template v-else>￥????起</template>
          </div>
        </div>
      </template>
    </VCalendar>
  </div>
</template>

<script setup>
const props = defineProps({
  calendarData: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["onClose"]);

const availableDateList = computed(() => Object.keys(props.calendarData ?? []));

function isAvailableDate(date) {
  return availableDateList.value.includes(date);
}

const date = defineModel("date");

function handleDayClick(data) {
  date.value = data.id;
  emit("onClose");
}
</script>

<style lang="scss" scoped>
:deep(.el-calendar-table thead th) {
  padding: 5px 0;
}
:deep(.el-calendar__body) {
  padding: 0px 10px 10px;
}
:deep(.el-calendar-table .el-calendar-day) {
  padding: 0px;
  height: 65px;
}
</style>
