<template>
  <div v-if="orderType == 0" class="border-box bg-white p-12 rounded-12 mb-12">
    <!-- 酒店类型入住离店日期部分 -->
    <DateRangeSection
      v-if="orderData.orderType == 0"
      :selectedDate="selectedDate"
    />

    <div class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
      {{ orderData.commodityName }}
    </div>

    <div
      class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12"
    >
      {{ orderData.commodityDescription }}
    </div>

    <!-- 权益部分 -->
    <div class="border-box flex flex-items-center pt-12">
      <span
        class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
        v-for="(item, index) in commodityFacilityList"
        :key="index"
      >
        {{ item }}
      </span>
    </div>
  </div>

  <div v-if="orderType != 0" class="border-box bg-white p-12 rounded-12 mb-12">
    <div class="font-size-16 font-500 color-000 line-height-24 ellipsis-1 mb-8">
      {{ orderData.commodityName }}
    </div>

    <div class="flex font-size-12">
      <span class="w-60 color-99A0AE">购买数量</span>
      <span class="color-525866">{{ commodityAmount }}</span>
    </div>

    <div
      v-if="orderData.orderStatus === '0'"
      class="border-box border-top pt-12 font-size-14 font-500 color-171717 mt-12"
    >
      凭[电子凭证]直接验证使用
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed } from "vue";
import DateRangeSection from "@/components/DateRangeSection/index.vue";

const props = defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const selectedDate = computed(() => {
  // 计算总天数
  const startDate = props.orderData.checkInData || "";
  const endDate = props.orderData.checkOutData || "";
  const timeStamp = 1000 * 60 * 60 * 24;
  const totalDays = (new Date(endDate) - new Date(startDate)) / timeStamp;

  return {
    startDate,
    endDate,
    totalDays,
  };
});

const orderType = computed(() => props.orderData.orderType);

const commodityAmount = computed(() => {
  // 门票单位：张、餐饮单位：份
  const { commodityAmount } = props.orderData;
  return orderType.value == 2
    ? `${parseInt(commodityAmount)}张`
    : `${parseInt(commodityAmount)}份`;
});

// 取3个权益
const commodityFacilityList = computed(() => {
  return props.orderData.commodityFacilityList.slice(0, 3) || [];
});
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
