<template>
  <div class="signature_page" ref="signatureRef">
    <div class="signature_box flex_box">
      <div class="title flex_box">
        <div>字</div>
        <div>签</div>
        <div>人</div>
        <div>取</div>
        <div>领</div>
      </div>
      <div class="box flex_box">
        <div class="btn_box flex_box">
          <div class="btn flex_box" @click="closeSignature">
            <div>取</div>
            <div>消</div>
          </div>
          <div class="btn btn1 flex_box" @click="clearSignature">
            <div>重</div>
            <div>签</div>
          </div>
          <div class="btn btn2 flex_box" @click="sucessSignature">
            <div>确</div>
            <div>认</div>
          </div>
        </div>
        <div class="signature" ref="signatureRef1">
          <van-signature
            class="vantSignature"
            ref="vanSignatureRef"
            @submit="onSubmit"
            type="base64"
            @clear="onClear"
          />
        </div>
      </div>
    </div>
    <div class="canvas_box">
      <canvas ref="canvasRef"></canvas>
    </div>
    <toast ref="toastRef" />
    <toast1 ref="toastRef1" />
    <submit ref="submitRef" @success="submitSuccess" @cancel="cancelSignature"/>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Local } from "@/utils/storage.js";
import { receiveCode } from "@/api/index.js";
import toast from "@/components/toast/index1.vue";
import toast1 from "@/components/toast/index2.vue";
import submit from "@/components/toast/submit.vue";
const router = useRouter();
const image = ref("");
const signatureRef = ref(null);
const signatureRef1 = ref(null);
const vanSignatureRef = ref(null);
const toastRef = ref(null);
const toastRef1 = ref(null);
const submitRef = ref(null);
const btnType = ref(false);
const canvasRef = ref();
const submitType = ref(false);
const onSubmit = (data) => {
  if (data.image) {
    // image.value = data.image;
    rotateToBase64File(data.image).then((base64) => {
      image.value = base64;
      submitRef.value.open();
    });
  } else {
    btnType.value = false;
    toastRef.value.open("请先签名");
  }
};
const clearSignature = () => {
  vanSignatureRef.value.clear();
  btnType.value = false;
};
const closeSignature = () => {
  router.back();
};
function setSignatureWidth() {
  const signatureWidth = signatureRef1.value.clientWidth;
  vanSignatureRef.value.setWidth(signatureWidth);
}
function getSignatureHeight() {
  // 获取signatureRef1元素的实际高度
  setTimeout(() => {
    if (signatureRef1.value) {
      const signatureHeight = signatureRef1.value.offsetHeight;
      const canvas = vanSignatureRef.value.$el.querySelector("canvas");
      // const content = vanSignatureRef.value.$el.querySelector(".van-signature__content");
      content.style.height = `${signatureHeight}px`;
    }
  }, 100);
}
function sucessSignature() {
  if (btnType.value) return;
  btnType.value = true;
  vanSignatureRef.value.submit();
}
function submitSuccess() {
  if (submitType.value) return;
  submitType.value = true;
  const params = {
    signImage: image.value.replace("data:image/png;base64,", ""),
    ...Local.get("marriageInfo"),
  };
  receiveCode(params)
    .then((res) => {
      if (res.code == 200) {
        toastRef1.value.open("领取成功");
        btnType.value = false;
        submitType.value = false;
      } else {
        showToast(res.msg);
        btnType.value = false;
        submitType.value = false;
      }
    })
    .catch(() => {
      btnType.value = false;
      submitType.value = false;
    });
}
async function rotateToBase64File(base64, mimeType = "image/png") {
  const img = new Image();
  img.src = base64;

  await new Promise((resolve, reject) => {
    img.onload = () => resolve();
    img.onerror = (e) => reject(new Error("图片加载失败"));
  });

  const canvas = canvasRef.value;
  canvas.width = img.height;
  canvas.height = img.width;

  const ctx = canvas.getContext("2d");
  if (!ctx) throw new Error("无法获取画布上下文");

  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(-Math.PI / 2); // 逆时针旋转90度
  ctx.drawImage(img, -img.width / 2, -img.height / 2);

  return canvas.toDataURL(mimeType);
}
function cancelSignature(){
    btnType.value = false;
}
onMounted(() => {
  // 组件挂载后获取高度
  setTimeout(() => {
    getSignatureHeight();
  }, 100);
});
</script>
<style scoped lang="scss">
.signature_page {
  width: 100vw;
  height: 100vh;
  padding: 0.3rem;
  background: #f5f5f5;
}
::v-deep(.van-signature__content) {
  border: 1px dotted rgba(0, 0, 0, 0.5);
  border-radius: 0;
  flex: 1;
  height: 100%;
}
::v-deep(.van-signature__footer) {
  display: none;
}
::v-deep(.van-signature) {
  padding: 0;
  display: flex;
}
.vantSignature {
  width: 100%;
  height: 100%;
}
.title {
  margin: 0.3rem 0 0.7rem 0;
  font-size: 0.4rem;
  color: rgba($color: #000000, $alpha: 0.7);
  // writing-mode: vertical-rl;
  // text-orientation: upright;
  letter-spacing: 0.05rem;
  font-weight: 500;
  justify-content: center;
  > div {
    transform: rotate(90deg);
  }
}
.signature_box {
  width: 100%;
  height: 100%;
  align-items: center;
  flex-direction: column;
}
.box {
  flex: 1;
  .signature {
    width: 100%;
    height: 100%;
    flex: 1;
  }
}
.btn_box {
  flex-direction: column;
  padding-right: 0.3rem;
  justify-content: space-between;
  .btn {
    font-size: 0.35rem;
    background: #d0c7c7;
    padding: 0 0.25rem;
    height: 3rem;
    flex-direction: column;
    justify-content: center;
    border-radius: 3rem;
    &:active {
      background: #b0a7a7;
    }
    &.btn1 {
      background: #fd9b34;
      &:active {
        background: #e68a29;
      }
    }
    &.btn2 {
      background: #e93939;
      &:active {
        background: #d63030;
      }
    }
    > div {
      transform: rotate(90deg);
      color: #fff;
    }
  }
}
.canvas_box{
  position: fixed;
  top: -100000px;
}
</style>
