<template>
  <van-popup ref="popupRef" position="bottom" v-model:show="show">
    <div class="rounded-t-[15px] pb-10 bg-[#f5f7fa] ">
      <div class=" flex items-center justify-between pt-[12px] pb-[12px] relative">
        <div class="flex-1 text-[16px] text-[#171717] leading-[24px] text-center">
          明细详情
        </div>
        <!-- 关闭按钮 -->
        <van-icon class="top-[14px] right-[12px] absolute" name="cross" size="20" color="#CACFD8" @click="close" />
      </div>
      <!-- 内容区域 -->
      <div class="rounded-[12px] bg-white ml-[12px] mr-[12px] mb-[40px]">
        <div class="border-b border-ink-200 flex items-center justify-between pt-[12px] pb-[12px] ml-[12px] mr-[12px]">
          <span class="text-[16px] font-medium text-[#171717]">在线支付</span>
          <span class="text-[14px] text-[#171717]">239</span>
        </div>
        <div class=" flex items-center justify-between pt-[12px] pb-[12px] ml-[12px] mr-[12px]">
          <span class="text-[16px] font-medium text-[#171717]">房费</span>
          <span class="text-[14px] text-[#171717]">239</span>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, computed, defineExpose } from "vue";

// Props定义
const props = defineProps({
  // 弹窗显示状态
  modelValue: {
    type: Boolean,
    default: false,
  },
  // 订单数据
  orderData: {
    type: Object,
    default: () => { },
  },
});

// Events定义
const emit = defineEmits(["update:modelValue"]);

// 弹窗引用
const popupRef = ref(null);
const show = ref(false)

// 获取退款模板
const commodityPurchaseInstruction = computed(() => {
  if (props.orderData.commodityPurchaseInstruction) {
    return props.orderData.commodityPurchaseInstruction;
  }

  return {};
});

// 方法定义
const open = () => show.value = true;

const close = () => show.value = false;

defineExpose({
  open,
  close,
});
</script>
