<script lang="ts" setup>
import {debounce} from "throttle-debounce";
import Config from "@/config";
import {useConfigStore} from "@/store";

const emits = defineEmits<{
  success: []
}>()

const {t} = useI18n();
const configStore = useConfigStore();


const verificationCode = ref('');
const show = ref(false);


function init(code: string) {
  verificationCode.value = code;
  show.value = true;
}

function close() {
  show.value = false;
}

function submit() {
  close();
  emits('success')
}

const handleSubmit = debounce(Config.debounceLongTime, submit, {
  atBegin: true
});

function handleCancel() {
  close()
  navigateTo("/pages-shop/pages/booking-service/make-appointment/index")
}

function navigateTo(url: string) {
  uni.navigateTo({
    url,
  })
}

defineOptions({
  name: "UseCode",
});

defineExpose({
  show,
  init,
  close,
});
</script>

<template>
  <wd-popup

      v-model="show"
      custom-class="!bg-transparent"
      safe-area-inset-bottom
      @close="close"
  >
    <view class="box-border ">
      <view class="p-[40rpx+40rpx+34rpx] bg-#fff rounded-20rpx"
      >
        <view class="text-44rpx text-primary font-bold lh-62rpx text-center">
          {{ t('pages-store.order-detail.use-code') }}
        </view>
        <view class="mt-40rpx center">
          <uqrcode ref="uqrcode" :options="{}" :size="512"
                   :value="verificationCode"
                   canvas-id="qrcode"
                   sizeUnit="rpx"></uqrcode>
        </view>
      </view>
      <!--      <view class="center mt-52rpx">-->
      <!--        <image class="w-80rpx h-80rpx shrink-0" src="@img/20241@2x.png" @click="close"></image>-->
      <!--      </view>-->
    </view>
  </wd-popup>
</template>

<style lang="scss" scoped></style>
