<template>
  <uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
    <view class="refund-popup bg-[#f5f7fa] border-box">
      <view class="border-box flex flex-items-center justify-between pt-[12px] pb-[12px] relative">
        <view class="flex-full font-size-16 text-[#171717] leading-[24px] text-center">取消政策</view>
        <!-- 关闭按钮 -->
        <uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
      </view>
      <!-- 内容区域 -->
      <view class="border-box rounded-[12px] bg-white p-[12px] ml-[12px] mr-[12px] mb-40">
        <view class="flex flex-items-center mb-[8px]">
          <uni-icons fontFamily="znicons" size="20" color="#333">
            {{ zniconsMap["zn-refund"] }}
          </uni-icons>
          <text class="font-size-14 font-600 text-[#171717] ml-[8px]">
            {{ refundTitle }}
          </text>
        </view>
        <view class="font-size-14 text-[#525866] leading-[16px] mb-[4px]"
          v-for="(item, index) in commodityPurchaseInstruction" :key="index">
          {{ item }}
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { zniconsMap } from "@/static/fonts/znicons";

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

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

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

// 获取退款模板
const refundTitle = computed(() => {
  if (props.orderData.commodityPurchaseInstruction) {
    return (
      props.orderData.commodityPurchaseInstruction.refundTitle || "退订规则"
    );
  }

  return "退订规则";
});

const commodityPurchaseInstruction = computed(() => {
  if (props.orderData.commodityPurchaseInstruction &&
    props.orderData.commodityPurchaseInstruction.refundContent) {
    // 以换行符为分隔符，将字符串转换为数组
    return props.orderData.commodityPurchaseInstruction.refundContent.split(
      "\n"
    );
  }

  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>
