<template>
  <div class="flex items-end justify-between my-[12px] px-[12px]" @click="showCalendar">
    <div class="flex-1 relative">
      <div class="absolute top-[-6px] left-[12px] text-[10px] text-ink-600 bg-white px-[4px]">入住日期</div>
      <div class="flex items-center justify-start border border-[#f0f0f0] rounded-[8px] px-[12px] py-[10px] bg-white">
        <div class="flex items-baseline gap-[4px]">
          <span class="text-[16px] font-medium text-[#333]">{{ checkInDate }}</span>
          <span class="text-[10px] text-[#666]">{{ checkInDay }}</span>
        </div>
      </div>
    </div>

    <div class="flex items-center justify-center min-w-[40px] mx-[8px] mb-[10px]">
      <span class="text-[12px] text-[#666]">{{ nights }}晚</span>
    </div>

    <div class="flex-1 relative">
      <div class="absolute top-[-6px] left-[12px] text-[10px] text-ink-600 bg-white px-[4px]">退房日期</div>
      <div class="flex items-center justify-start border border-[#f0f0f0] rounded-[8px] px-[12px] py-[10px] bg-white">
        <div class="flex items-baseline gap-[4px]">
          <span class="text-[16px] font-medium text-[#333]">{{ checkOutDate }}</span>
          <span class="text-[10px] text-[#666]">{{ checkOutDay }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

// 定义事件
const emit = defineEmits(["showCalendar"]);

// 定义方法
const showCalendar = () => {
  emit("showCalendar");
};

// Props定义
const props = defineProps({
  checkInDate: {
    type: String,
    default: "08月25日",
  },
  checkOutDate: {
    type: String,
    default: "08月25日",
  },
  checkInDay: {
    type: String,
    default: "周一",
  },
  checkOutDay: {
    type: String,
    default: "周一",
  },
  nights: {
    type: Number,
    default: 1,
  },
});
</script>
