<script setup>
import { VueSignaturePad } from 'vue-signature-pad';
import { showToast } from 'vant';
import { onMounted } from 'vue';
import {codeAuthStore} from "~/stores-collect-code/auth/index.js";
import {signOffline} from "~/api/goods/index.js";
const {formData,number}=codeAuthStore()
const signaturePad = ref(null);
definePageMeta({
  layout: ''
});
const router = useRouter();
const imgUrl = ref('');
const show = ref(false);
const goBack = () => {
  router.back()
  // 返回逻辑
};

const submitSignature = () => {
  if (signaturePad.value?.isEmpty()) {
    showToast('请先签名');
    return;
  }
  const { data } = signaturePad.value?.saveSignature(); // 返回 base64 格式的图片数据
  imgUrl.value = data;
  show.value = true;
};

const clearSignature = () => {
  signaturePad.value?.clearSignature();
};
const confirm=async ()=>{
  const res=await signOffline({
    userInfo:formData.value,
    signOrder:Number(number.value),
    signImgFileData:imgUrl.value
  })
  if (res.status===0){
router.push('/collectCode/signature/result')
  }
}
</script>

<template>
  <div class="signature-container">
    <div class="flex flex-col h-100vh px-20px py-20px bg-gray">
      <VueSignaturePad
          width="100%"
          class="signature bg-#fff rounded-10px mb-10px"
          ref="signaturePad"
      />
      <div class="flex justify-evenly">
        <van-button class="!h-40px mr-15px" type="primary" @click="goBack">
          返回
        </van-button>
        <van-button class="!h-40px" type="warning" @click="clearSignature">
          清空
        </van-button>
        <van-button class="!h-40px" type="primary" @click="submitSignature">
          确认
        </van-button>
      </div>
      <van-dialog v-model:show="show" show-cancel-button @confirm="confirm">
        <img class="w-300px h-200px" :src="imgUrl" />
      </van-dialog>
    </div>
  </div>
</template>

<style scoped>
.signature-container {
  width: 100%;
  height: 100vh;
  /* 强制竖屏显示 */
  view-transition: none;
  transform: rotate(0deg) !important;
}

:deep(.signature>canvas) {
  height: 100%;
}

/* 横屏适配 */
@media screen and (orientation: landscape) {
  .signature-container {
    /* 在横屏时保持竖屏宽度 */
    max-width: 100vh;
    margin: 0 auto;
  }

  .flex {
    /* 确保在横屏时内容不会过宽 */
    max-width: 100vh;
    margin: 0 auto;
  }
}

/* 确保签名板在各种屏幕尺寸下都能正常显示 */
.signature {
  flex: 1;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
}
</style>