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

    <div class="text-[16px] font-medium text-black leading-[24px] truncate">
      {{ orderData.commodityName }}
    </div>

    <div class=" border-b border-ink-200 text-[12px] text-ink-400 leading-[16px] pb-[12px]">
      {{ orderData.commodityDescription }}
    </div>

    <!-- 权益部分 -->
    <div class=" flex items-center pt-[12px]">
      <span class="bg-[#f7f7f7]  rounded-[4px] text-[11px] text-ink-600 mr-[4px] pt-[4px] pb-[4px] pl-[6px] pr-[6px]"
        v-for="(item, index) in commodityFacilityList" :key="index">
        {{ item }}
      </span>
    </div>
  </div>

  <div v-if="orderType != 0" class=" bg-white p-[12px] rounded-[12px] mb-[12px]">
    <div class="text-[16px] font-medium text-black leading-[24px] truncate mb-[8px]">
      {{ orderData.commodityName }}
    </div>

    <div class="flex text-[12px]">
      <span class="w-60 text-ink-400">{{ t("order.goods.quantity") }}</span>
      <span class="text-ink-600">{{ commodityAmount }}</span>
    </div>

    <div v-if="orderData.orderStatus === '0'"
      class=" border-top pt-[12px] text-[14px] font-medium text-[#171717] mt-[12px]">
      {{ t("order.goods.voucherHint") }}
    </div>
  </div>
</template>

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

const { t } = useI18n();

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)}${t("order.goods.ticketUnit")}`
    : `${parseInt(commodityAmount)}${t("order.goods.itemUnit")}`;
});

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