<template>
  <div @click.stop="open" class="sign-box">
    <img v-if="data.imgUrl" class="imgCanvas" :src="data.imgUrl" />
    <span v-else class="upBtn"
      ><IconFontSymbol
        icon="shouxieqianming"
        font-size="36"
        fillColor="#C3C8CF"
        class="mb-5 mx-auto"
      />{{ t('点击手写签名') }}</span
    >
  </div>
  <a-modal
    v-model:visible="data.visible"
    :width="600"
    :title="t('签名')"
    @ok="confirm"
    @cancel="cancel"
  >
    <vue-esign
      v-if="data.visible"
      ref="canvas"
      :width="800"
      :height="300"
      :isCrop="signInfo.isCrop"
      :lineWidth="signInfo.lineWidth"
      :lineColor="signInfo.lineColor"
      v-model:bgColor="signInfo.bgColor"
    />
  </a-modal>
</template>
<script setup lang="ts">
  import { reactive, ref, onMounted } from 'vue';
  import vueEsign from 'vue-esign';
  import { useI18n } from '/@/hooks/web/useI18n';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  const { t } = useI18n();
  let emits = defineEmits(['submit']);
  let props = defineProps(['src']);
  const canvas = ref();
  const data: {
    visible: boolean;
    imgUrl: string;
  } = reactive({
    visible: false,
    imgUrl: '',
  });
  const signInfo = reactive({
    lineWidth: 6,
    lineColor: '#000000',
    bgColor: '',
    resultImg: '',
    isCrop: false,
  });
  onMounted(() => {
    if (props.src) {
      data.imgUrl = props.src;
    }
  });
  function open() {
    data.visible = true;
    if (props.src) {
      data.imgUrl = props.src;
    }
  }
  function cancel() {
    canvas.value.reset();
  }
  function confirm() {
    canvas.value
      .generate()
      .then((res) => {
        if (res) {
          emits('submit', res);
          data.imgUrl = res;
          data.visible = false;
        }
      })
      .catch((err) => {
        console.log('err: ', err);
      });
  }
</script>
<style lang="less" scoped>
  .sign-box {
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .upBtn {
    text-align: center;
    color: #999;
    font-size: 12px;
    line-height: 12px;
  }
</style>
