<template>
  <view class="border-box flex flex-items-center flex-justify-between mb-12">
    <view class="left flex flex-items-center">
      <text class="font-size-12 color-99A0AE mr-4">入住</text>
      <text class="font-size-12 color-171717 mr-16">
        {{ selectedDate.startDate }}
      </text>
      <text
        class="total border-box rounded-50 flex flex-items-center font-size-11 color-43669A relative"
        >1晚</text
      >
      <text class="font-size-12 color-99A0AE ml-16">离店</text>
      <text class="font-size-12 color-171717 ml-4">
        {{ selectedDate.endDate }}
      </text>
    </view>
    <view class="flex flex-items-center" @click="emit('click')">
      <text class="font-size-12 color-2D91FF line-height-16">房间详情</text>
      <uni-icons type="right" size="15" color="#99A0AE" />
    </view>
  </view>
</template>

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

// Props
const props = defineProps({
  selectedDate: {
    type: Object,
    default: () => {
      return {
        startDate: "",
        endDate: "",
      };
    },
  },
});
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>
