<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">
          {{ t("common.refund.policy") }}
        </div>
        <!-- 关闭按钮 -->
        <van-icon class="top-[14px] right-[12px] absolute" name="cross" size="20" color="#CACFD8" @click="close" />
      </div>
      <!-- 内容区域 -->
      <div class="rounded-[12px] bg-white p-[12px] ml-[12px] mr-[12px] mb-[40px]">
        <div class="flex items-center mb-[8px]">
          <zn-icon name="zn-refund" size="20" color="#333"></zn-icon>
          <span class="text-[14px] font-semibold text-[#171717] ml-[8px]">
            {{ refundTitle }}
          </span>
        </div>
        <div class="text-[14px] text-ink-600 leading-[16px] mb-[4px]"
          v-for="(item, index) in commodityPurchaseInstruction" :key="index">
          {{ item }}
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, computed, defineExpose } from "vue";
import { useI18n } from "vue-i18n";
import ZnIcon from '@/components/ZnIcon/index.vue'

const { t } = useI18n();

// 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 refundTitle = computed(() => {
  if (props.orderData.commodityPurchaseInstruction) {
    return (
      props.orderData.commodityPurchaseInstruction.refundTitle || t("common.refund.rules")
    );
  }

  return t("common.refund.rules");
});

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

  return {};
});

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

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

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