<template>
  <uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
    <div class="refund-popup bg-F5F7FA border-box">
      <div class="border-box flex flex-items-center justify-between pt-12 pb-12 relative">
        <div class="flex-full font-size-16 color-171717 line-height-24 text-center">
          明细详情
        </div>
        <!-- 关闭按钮 -->
        <uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
      </div>
      <!-- 内容区域 -->
      <div class="rounded-12 bg-white ml-12 mr-12 mb-40">
        <div class="border-box border-bottom flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12">
          <span class="font-size-16 font-500 color-171717">在线支付</span>
          <span class="font-size-14 color-171717">239</span>
        </div>
        <div class="border-box flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12">
          <span class="font-size-16 font-500 color-171717">房费</span>
          <span class="font-size-14 color-171717">239</span>
        </div>
      </div>
    </div>
  </uni-popup>
</template>

<script setup>
import { ref, computed, watch } 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 commodityPurchaseInstruction = computed(() => {
  if (props.orderData.commodityPurchaseInstruction) {
    return props.orderData.commodityPurchaseInstruction;
  }

  return {};
});

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

const hide = () => popupRef.value && popupRef.value.close();

// 监听modelValue变化
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal) {
      show();
    } else {
      hide();
    }
  },
  { immediate: true },
);

const handleClose = () => {
  emit("update:modelValue", false);
  emit("close");
};
</script>

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