<template>
  <div>
    <el-dialog
      :visible.sync="editVisible"
      width="40%"
      append-to-body
      destroy-on-close
      custom-class="my-dialog-container"
    >
      <div slot="title" class="my-dialog-title">签名</div>
      <div class="content">
        <VueSignaturePad id="signature" ref="signaturePad" :options="options" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="save">保存</el-button>
        <el-button type="danger" plain @click="close">关闭</el-button>
        <el-button type="danger" plain @click="resume">重置</el-button>
        <el-button type="primary" plain @click="undo">撤销</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      editVisible: false,
      options: {
        penColor: "#000",
        minWidth: 2, //控制画笔最小宽度
        maxWidth: 2, //控制画笔最大宽度
      },
      //   uploadImgUrl: process.env.VUE_APP_BASE_API2 + "/common/uploadMinioonfile", // 上传的图片服务器地址
    };
  },
  methods: {
    open() {
      this.editVisible = true;
    },
    //撤销
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    //重置
    resume() {
      this.$refs.signaturePad.clearSignature();
    },
    //保存
    async save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
      if (isEmpty) {
        this.$message({
          type: "error",
          message: "请您完成签名",
        });
      } else {
        var form1 = new FormData();
        form1.append("file", this.dataURLtoFile(data, "我的签名"));
        let msg1 = await this.$api.infoMsg.updateFile(form1);
        console.log(msg1);
        // 拼接图片并且显示;
        this.$emit("getWrite", msg1.result.url);
        this.editVisible = false;
        this.$message({
          type: "success",
          message: "保存成功",
        });
      }
    },
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    close() {
      this.editVisible = false;
    },
  },
};
</script>
  <style lang="scss" scoped>
#signature {
  width: 100%;
  height: 100%;
  border: double 3px transparent;
  border-radius: 2px;
  background-image: linear-gradient(white, #ffffff),
    radial-gradient(circle at top left, #4bc5e8, #9f6274);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
.content {
  width: 100%;
  height: 450px;
  padding: 20px;
}
</style>