<template>
  <u-modal
      :show="signShow"
      title="签名（请横屏签字）"
      showCancelButton
      confirmText="完成"
      cancelText="重写"
      @confirm="confirm"
      @cancel="clear"
  >
    <view class="handCenter">
      <l-signature disableScroll backgroundColor="#fff" ref="signatureRef" :penSize="5"
                   :openSmooth="true" :landscape="true"></l-signature>
    </view>
  </u-modal>
</template>

<script>
export default {
  props: {
    signShow: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    clear() {
      this.$refs.signatureRef.clear()
    },
    confirm() {
      this.$refs.signatureRef.canvasToTempFilePath({
        fileType: 'jpg',
        quality: 1,
        destWidth: 900,
        destHeight: 435,
        success: (res) => {
          if (res.isEmpty) {
            uni.showToast({
              title: '请签字',
              icon: 'none'
            })
          } else {
            this.clear()
            this.$emit("update:signShow", false);
            this.$emit('confirm', {id: '', filePath: res.tempFilePath})
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.handCenter {
  border: 4rpx dashed #e9e9e9;
  height: 80vh;
  overflow: hidden;
  box-sizing: border-box;
}
</style>