<template>
  <uni-popup ref="popupRef" type="center" @maskClick="handleClose">
    <view class="refund-popup">
      <!-- 头部卡通形象 -->
      <image
        :src="commodityPurchaseInstruction.refundLogo"
        class="refund-popup__avatar"
        mode="aspectFill"
      />

      <!-- 内容区域 -->
      <view class="refund-popup__content">
        <!-- 主标题 -->
        <view class="refund-popup__title">
          {{ commodityPurchaseInstruction.refundTitle }}
        </view>

        <!-- 金额显示 -->
        <view class="refund-popup__amount" v-if="isRefundable">
          <text class="amount-symbol">¥</text>
          <text class="amount-value">{{ refundAmount }}</text>
          <text class="amount-unit">元</text>
        </view>
        <view class="refund-popup__amount-label" v-if="isRefundable"
          >可退金额</view
        >

        <!-- 退款政策详情 -->
        <view class="refund-popup__policy" v-if="showRefundPolicy">
          <view class="policy-title">退订政策：</view>
          <view class="policy-content">
            {{ commodityPurchaseInstruction.refundContent }}
          </view>
        </view>
      </view>

      <!-- 按钮区域 -->
      <view class="refund-popup__actions">
        <view
          v-if="!showRefundPolicy"
          class="action-btn secondary-btn"
          @click="handlePolicyClick"
        >
          退订政策
        </view>
        <view
          class="action-btn primary-btn"
          @click="handleConfirmClick(btnText)"
        >
          {{ btnText }}
        </view>
      </view>

      <!-- 关闭按钮 -->
      <uni-icons
        class="refund-popup__close"
        type="close"
        size="40"
        color="#fff"
        @click="handleClose"
      />
    </view>
  </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", "confirm", "close"]);

// 弹窗引用
const popupRef = ref(null);
// 退款政策是否显示
const showRefundPolicy = ref(false);

// 退款金额
const refundAmount = computed(() => {
  if (props.orderData.payAmt) {
    return parseFloat(Number(props.orderData.payAmt) || 0);
  }

  return 0;
});

// 是否可退款
const isRefundable = computed(() => props.orderData.refundable);

// 按钮文件
const btnText = computed(() => (isRefundable.value ? "点击退款" : "我知道了"));

// 获取退款模板
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 = () => {
  showRefundPolicy.value = false;
  emit("update:modelValue", false);
  emit("close");
};

const handlePolicyClick = () => {
  showRefundPolicy.value = true;
};

const handleConfirmClick = (text) => {
  if (text === "点击退款") {
    emit("confirm", props.orderData);
  }

  handleClose();
};
</script>

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