<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="border-box rounded-12 bg-white p-12 ml-12 mr-12 mb-40">
        <div class="flex flex-items-center mb-8">
          <uni-icons fontFamily="znicons" size="20" color="#333">
            {{ iconsMap["zn-refund"] }}
          </uni-icons>
          <span class="font-size-14 font-600 color-171717 ml-8">
            {{ refundTitle }}
          </span>
        </div>
        <div class="font-size-14 color-525866 line-height-16 mb-4" v-for="(item, index) in commodityPurchaseInstruction"
          :key="index">
          {{ item }}
        </div>
      </div>
    </div>
  </uni-popup>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { iconsMap } 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>
