<script setup>
import {showToast,showLoadingToast } from 'vant';
import {onMounted, onUnmounted, ref} from 'vue';
import {signOffline, signOnline} from "~/api/goods/index.js";
import {VueSignaturePad} from "vue-signature-pad";
import {authStore} from "~/stores/auth/index.js";
import {useI18n} from "vue-i18n";
const router = useRouter();
const {t:$t} = useI18n()
definePageMeta({
  layout: ''
})
const {  payment} = authStore()
const signaturePad = ref(null);
const imgUrl = ref('')
const clearSignature = () => {
  signaturePad.value?.clearSignature();
};
const toast=ref(false)
const submitSignature = () => {
  if (signaturePad.value?.isEmpty()) {
    showToast($t('collectCode.signature.pleaseSign'));
    return;
  }
  toast.value=showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  });
  const { data } = signaturePad.value?.saveSignature(); // 返回 base64 格式的图片数据
  imgUrl.value = data;
  confirm()

};
const confirm = async () => {
  const res = await signOnline({
    auctionArtworkUuid:payment.value.auctionArtworkUuid,
    signImgFileData: imgUrl.value
  })
  if (res.status===0){
    await router.push('/payment')
    toast.value?.close()
  }
}
const goBack = () => {
router.back()
}
</script>

<template>
  <div class="signature-container">
    <div class="flex flex-col h-100vh px-20px py-20px bg-gray w-100vw">
      <client-only>
        <VueSignaturePad
            width="100%"
            height="93%"
            class="signature bg-#fff rounded-10px mb-10px"
            ref="signaturePad"
        />
      </client-only>
      <div class="flex justify-evenly">
        <van-button class="!h-40px mr-15px" type="primary" @click="goBack">
          {{ $t('collectCode.signature.back') }}
        </van-button>
        <van-button class="!h-40px" type="warning" @click="clearSignature">
          {{ $t('collectCode.signature.clear') }}
        </van-button>
        <van-button class="!h-40px" type="primary" @click="submitSignature">
          {{ $t('collectCode.signature.confirm') }}
        </van-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.signature-container {
  position: fixed;
  inset: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0;
}

:deep(.van-button--mini+.van-button--mini) {
  margin: 0;
}

:deep(.van-dialog__content) {
  display: flex;
  justify-content: center;
}

.signature-content {
  display: flex;
  height: 100%;
}


.control-buttons {
  display: flex;
  flex-direction: column;
  padding: 0 10px 0;
  gap: 10px;
}

.control-button {
  width: 40px;
}

.orientation-hint {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  font-size: 18px;
}

</style>