<template>
  <div class="border-box flex flex-items-center flex-justify-between mb-12">
    <div class="left flex flex-items-center">
      <span class="font-size-12 color-99A0AE mr-4">入住</span>
      <span class="font-size-12 color-171717 mr-16">
        {{ selectedDate.startDate }}
      </span>
      <span class="total border-box rounded-50 flex flex-items-center font-size-11 color-43669A relative">{{
        selectedDate.totalDays }}晚</span>
      <span class="font-size-12 color-99A0AE ml-16">离店</span>
      <span class="font-size-12 color-171717 ml-4">
        {{ selectedDate.endDate }}
      </span>
    </div>
    <div class="flex flex-items-center" v-if="showBtn" @click="emit('click')">
      <span class="font-size-12 theme-color-500 line-height-16">房间详情</span>
      <van-icon name="arrow-right" size="15" color="#99A0AE" />
    </div>
  </div>
</template>

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

// Props
const props = defineProps({
  selectedDate: {
    type: Object,
    default: () => {
      return {
        startDate: "",
        endDate: "",
      };
    },
  },
  showBtn: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["click"]);
</script>

<style scoped lang="scss">
.total {
  border: 1px solid #43669a;
  padding: 3px 6px;

  &::after,
  &::before {
    content: "";
    width: 8px;
    height: 1px;
    position: absolute;
  }

  &::before {
    background: linear-gradient(270deg,
        rgba(67, 102, 154, 1),
        rgba(67, 102, 154, 0));
    left: -9px;
  }

  &::after {
    background: linear-gradient(270deg,
        rgba(67, 102, 154, 0),
        rgba(67, 102, 154, 1));
    right: -9px;
  }
}
</style>
