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

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

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>
