<template>
  <uni-popup
    ref="popupRef"
    type="bottom"
    :safe-area="false"
    @maskClick="handleClose"
    @change="handlePopupChange"
  >
    <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 flex-col flex-items-center flex-full">
          <div class="flex-full font-size-16 span-color-900 span-center">
            核销凭证
          </div>
          <div class="flex-full font-size-12 span-color-600 span-center mt-4">
            请向工作人员出示此码
          </div>
        </div>
        <!-- 关闭按钮 -->
        <uni-icons
          class="close absolute"
          type="close"
          size="20"
          color="#CACFD8"
          @click="handleClose"
        />
      </div>

      <div
        class="bg-white border-box rounded-12 flex flex-col flex-items-center flex-justify-center p-12 mb-12 mx-12"
      >
        <div
          class="flex w-full flex-row flex-items-center flex-justify-between py-4"
        >
          <div>
            <div
              class="font-size-16 font-500 color-000 line-height-24 ellipsis-1"
            >
              {{ selectedVoucher.name }}
            </div>
          </div>

          <div v-if="selectedVoucher" class="flex flex-row">
            <div
              class="bg-F5F7FA span-color-600 font-size-12 p-4 rounded-4 mr-4"
            >
              总计{{ selectedVoucher.count }}{{ selectedVoucher.unit }}
            </div>
            <div
              class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4"
            >
              剩{{ selectedVoucher.count - selectedVoucher.writeOffCount
              }}{{ selectedVoucher.unit }}可用
            </div>
          </div>
        </div>

        <div
          class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border pt-16 pb-32 mt-12"
        >
          <div
            class="flex flex-row flex-justify-between border-box w-full px-12"
          >
            <div
              class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12"
            >
              凭证{{
                selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : ""
              }}
            </div>
            <div
              class="span-color-500 font-size-14 px-12 line-height-24 rounded-12"
            >
              此码仅可核销{{
                selectedVoucher.count - selectedVoucher.writeOffCount
              }}份
            </div>
          </div>

          <div
            class="flex flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
            :style="{ borderColor: selectedVoucher?.color }"
          >
            <Qrcode
              v-if="showQrcode"
              :size="props.size"
              :unit="props.unit"
              :val="qrcodeVal"
              :loadMake="true"
              :onval="true"
            />
          </div>

          <div
            v-if="false"
            class="mt-20 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12"
          >
            {{ selectedVoucher.name }}
          </div>
        </div>

        <div
          v-if="selectedVoucherList.length > 1"
          class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24"
        >
          <div class="actions-btn" @click.stop="upAction">
            <uni-icons type="left" size="16" color="#171717" />
          </div>

          <div class="flex flex-col">
            <div class="flex flex-row flex-justify-center flex-items-center">
              <div class="theme-color-500 font-size-16">
                {{ currentVoucherIndex + 1 }}
              </div>
              <div class="span-color-600 font-size-12">
                /{{ selectedVoucherList.length }}
              </div>
            </div>

            <div class="span-color-600 font-size-14">扫码后点击下一张</div>
          </div>

          <div class="actions-btn" @click.stop="downAction">
            <uni-icons type="right" size="16" color="#171717" />
          </div>
        </div>
        <div v-else class="mb-24"></div>
      </div>
    </div>
  </uni-popup>
</template>

<script setup>
import Qrcode from "@/components/Qrcode/index.vue";
import { defineProps, defineEmits } from "vue";
import { ref, watch, computed, nextTick } from "vue";

const props = defineProps({
  // 弹窗显示状态
  modelValue: {
    type: Boolean,
    default: false,
  },
  orderData: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  selectedVoucher: {
    type: Object,
    required: false,
    default: null,
  },
  selectedVoucherIndex: {
    type: Number,
    required: false,
    default: 0,
  },
  size: {
    type: Number,
    default: 132,
  },
  unit: {
    type: String,
    default: "px",
  },
});

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

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

// 控制二维码渲染
const showQrcode = ref(false);

// 当前选择的凭证索引
const currentVoucherIndex = ref(props.selectedVoucherIndex || 0);

const selectedVoucherList = computed(() => {
  const list = props.orderData?.commodityPackageConfig || [];
  if (!Array.isArray(list)) return [];
  return list.filter((item) => item?.packageStatus === 0);
});

// 二维码内容
const selectedVoucher = computed(() => {
  const list = selectedVoucherList.value || [];
  if (!list.length) return null;
  const idx = Math.min(
    Math.max(Number(currentVoucherIndex.value || 0), 0),
    list.length - 1,
  );
  return list[idx] || null;
});

const qrcodeVal = computed(() => {
  const orderId = props.orderData?.orderId || "";
  const voucherName = selectedVoucher.value?.name || "";
  return orderId ? `${orderId}&${voucherName}` : "";
});

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

const handlePopupChange = ({ show }) => {
  // popup 真实打开后再渲染二维码，避免 canvas 尺寸为 0 报错
  if (show) {
    nextTick(() => {
      showQrcode.value = true;
    });
  } else {
    showQrcode.value = false;
  }
};

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

// 同步外部 prop -> 内部 index（初始化/外部变更）
watch(
  () => props.selectedVoucherIndex,
  (newIdx) => {
    const len = selectedVoucherList.value.length;
    let idx = Number(newIdx || 0);
    if (len && idx >= len) idx = 0;
    currentVoucherIndex.value = idx;
  },
  { immediate: true },
);

// 当可用凭证列表变化时，确保 currentVoucherIndex 不越界
watch(
  selectedVoucherList,
  (list) => {
    const len = list.length;
    if (len === 0) {
      if (currentVoucherIndex.value !== 0) {
        currentVoucherIndex.value = 0;
      }
      return;
    }
    if (currentVoucherIndex.value >= len) {
      currentVoucherIndex.value = 0;
    }
  },
  { immediate: true },
);

// 当内部索引变化时，通知父组件（避免无用循环）
watch(
  () => currentVoucherIndex.value,
  (val, oldVal) => {
    if (val !== props.selectedVoucherIndex) {
      emit("update:selectedVoucherIndex", val);
    }
  },
);

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

const upAction = () => {
  const len = selectedVoucherList.value.length;
  if (!len) return;
  let idx = Number(currentVoucherIndex.value || 0) - 1;
  if (idx < 0) idx = len - 1;
  currentVoucherIndex.value = idx;
};

const downAction = () => {
  const len = selectedVoucherList.value.length;
  if (!len) return;
  let idx = Number(currentVoucherIndex.value || 0) + 1;
  if (idx >= len) idx = 0;
  currentVoucherIndex.value = idx;
};
</script>

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