<template>
  <div class="booking-footer  bg-white flex items-center font-family-misans-vf">
    <span class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex items-center mr-[8px]">
      {{ totalAmt }}
    </span>
    <!-- <div class="flex items-center" @click="emit('detailClick')">
      <span class="text-[12px] color-A3A3A3 mr-[4px]">明细</span>
      <uni-icons type="up" size="16" color="#A3A3A3" />
    </div> -->
    <div class="btn  rounded-[10px] flex items-center ml-auto pl-8" @click="handleBooking">
      <img class="icon" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
      <span class="text-[16px] font-medium text-white">{{ t("booking.footer.payNow") }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps, defineEmits, ref, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n";
import { DebounceUtils } from "@/utils/DebounceUtils";
import { preOrder } from "@/api/order";

const { t } = useI18n();

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0,
  },
  orderData: {
    type: Object,
    default: () => { },
  },
  selectedDate: {
    type: Object,
    default: () => { },
  },
});

const emit = defineEmits(["detailClick", "payClick"]);
const count = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit("update:modelValue", val);
  },
});

watch(
  () => count.value,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      preOrderPay();
    }
  },
);

onMounted(() => {
  preOrderPay();
});

const totalAmt = ref(props.orderData.specificationPrice);

const preOrderPay = async () => {
  preOrder({
    commodityId: props.orderData.commodityId,
    purchaseAmount: count.value,
    checkInData: props.selectedDate.startDate,
    checkOutData: props.selectedDate.endDate,
  })
    .then((res) => {
      console.log("预支付金额计算结果:", res);
      totalAmt.value = res.data.payAmt;
    })
    .catch((err) => {
      console.error("预支付金额计算失败:", err);
    });
};

const handleBooking = DebounceUtils.createDebounce(() => {
  emit("payClick", props.orderData);
}, 1000);
</script>

<style scoped lang="scss">
.booking-footer {
  border-radius: 15px 15px 0 0;
  padding: 12px 12px 42px;
}

.amt {
  &::before {
    content: "¥";
    font-size: 16px;
    font-weight: 500;
  }
}

.btn {
  width: 120px;
  height: 48px;
  background: linear-gradient(90deg, #ff3d60 57%, #ff990c 100%);
}

.icon {
  height: 48px;
  width: 34px;
}
</style>
