//index.vue

<template>
  <div id="home">
  
    <div class="canvasBox" v-if="state.canvasImgRes">
      <img :src="state.canvasImgRes" class="canvasImgRes">
    </div>
    
    <div v-else>
      <Doc :signImg="state.signImg" />
      <Sign @signImg="setSignImg" />
    </div>
    
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import html2canvas from 'html2canvas';

import Sign from './comp/sign.vue';
import Doc from './comp/doc.vue';

import { Toast } from 'vant';

const state = reactive({
  signImg: '',//签名生成的图片
  canvasImgRes: ''//合同canvas生成的结果
});

const uploadApi = async ()=>{
  Toast.loading({
      message:'合同上传中,请勿退出！',
      duration:0,
      forbidClick: true
  });
  try {
    // state.canvasImgRes 上传base64数据,请求自定的api
    // await uplaodImg({base64Imager:state.canvasImgRes});
    setTimeout(() => {
      Toast.success('已上传');
    }, 1000);
  } catch (error) {
     Toast.success('上传失败');
  }

}

const createDocCanvas = () => {//创建合同的整个图片
  html2canvas(document.getElementById('doc') as HTMLElement).then((canvas) => {
    state.canvasImgRes = canvas.toDataURL("image/png");
    uploadApi();
  });
}

const setSignImg = (imgBase64: string) => {//签名完成
  state.signImg = imgBase64;
  console.log(imgBase64);
  setTimeout(() => {
    createDocCanvas();
  }, 500);
}

</script>


<style lang="scss" scoped>
#home {
  .canvasImgRes {
    display: block;
    width: 100%;
  }
}
.canvasBox{
  text-align: center;
  height: 100vh;
  overflow-y: auto;
}
</style>

// ./comp/doc.vue
// 这里封装了一个 DocText 组件，因为合同的内容通常很多，最好通过单独封装一个组件来显示合同模板与请求接口中的业务数据，方便此组件的维护，都是常规操作，这里不做赘述，这个视个人情况而定
// 这里需要注意的是v-html的样式需要在组件内定义样式无法生效，scss要:deep的方式，或者写咋最外层，看个人习惯

<template>
  <div class="doc" id="doc">
    <div class="main" id="domHtml" v-if="docInfo">
      <h1>长城贴瓷砖项目协议</h1>
      <DocText/>
      <img :src="signImg" class="signImg" v-if="signImg">
    </div>
  </div>
  <!-- doc -->

  <div style="height:70px;"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref, PropType } from "vue";
import DocText from './docText.vue';

const docInfo = ref<any>(null);//合同信息

// 当签名组件完成签名图片生成后，传入当前组件，你可以将它放在任何dom中，且自定义样式
defineProps({
  signImg: {
    type: String as PropType<string>,
  },
});

</script>

<style lang="scss" scoped>
.signImg{
  width:100%;
  height: auto;
}
</style>

// './comp/sign.vue';
// 核心的签名组件，用户可以签名与重写

<template>
  <div class="showBtn">
   <van-button type="primary" @click="show=true">客户确认签名</van-button>
  </div>

  <van-popup v-model:show="show" position="bottom">

    <div class="sign">
      <div class="text">请客户在虚线区域内签名</div>
      <div class="signBorder">
        <vueEsign ref="esign" v-bind="signConfig" class="signMain" />
      </div>
      <!-- signBorder -->
      <div class="btns">
        <div class="item" @click="handleReset">清空重写</div>
        <div class="item" @click="handleGenerate">确认提交</div>
      </div>
      <!-- btns -->
    </div>

  </van-popup>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import vueEsign from "vue-esign";
import { Toast } from "vant";
import {useState} from '@/store/state';
const show = ref<boolean>(false);
const State = useState();
const emit = defineEmits(['signImg']);

interface Esign {
  reset: any | undefined;
  generate: any | undefined;
}
const signConfig = reactive({
  lineWidth: 6,
  lineColor: "#000000",
  bgColor: "#ffffff00",//这里配置的是透明背景色
  resultImg: "",
  isCrop: false,
  isClearBgColor: false,
  height:340
});
const esign = ref<Esign>({ reset: undefined, generate: undefined });
const signImg = ref("");

const handleReset = () => {
  esign.value.reset();
};

const handleGenerate = () => {
  Toast.loading({
    message: "合同生成中,请稍候！",
    duration: 0,
    forbidClick: true,
  });
  try {
    esign.value
      .generate()
      .then((res: string) => {
        signImg.value = res;
        emit("signImg", res);//将signImg生成的base64图片回传
      })
      .catch((err: any) => {
        Toast.fail("请签名！");
      });
  } catch (error) {
    Toast.fail("合同生成失败，请重试！");
  }
};
</script>

<style lang="scss" scoped>
.sign {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 111;
  box-shadow: 0px -5px 20px rgba($color: #000000, $alpha: 0.15);
  .signImg {
    display: block;
    width: 100%;
  }
  .signBorder {
    border: 2px dotted rgba($color: #000000, $alpha: 0.2);
    margin: 5px;
  }
  .text {
    color: gray;
    text-align: center;
    font-size: 12px;
    padding: 10px;
  }
  .btns {
    padding: 10px;
    display: flex;
    .item {
      margin: 10px;
      flex: 1;
      color: white;
      border: none;
      text-align: center;
      font-size: 14px;
      padding: 10px;
      border-radius: 100px;
      &:nth-child(1) {
        background: #ff2b2b;
      }
      &:nth-child(2) {
        background: #1c73ff;
      }
      &:active {
        opacity: 0.8;
      }
    }
  }
}
.showBtn{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 11;
  padding: 10px;
  background: white;
  box-shadow: 0px 0px 10px rgba($color: #000000, $alpha: 0.2);
  text-align: right;
  button{
    width: 100%;
    position: relative;
  }
}
</style>