<template>
  <el-drawer
    :size="size"
    append-to-body
    :close-on-click-modal="false"
    :title="title"
    v-model="dialogVisible"
  >
    <div class="signature-panel">
      <div v-if="false">
        <vue-qrcode
          correctLevel="3"
          style="padding: 2rem"
          :color="{ dark: '#000000ff', light: '#ffffffff' }"
          type="image/jpeg"
          :value="qrCodeValue"
          :width="300"
        ></vue-qrcode>
        <p>请使用移动端设备扫描二维码进行电子签名</p>
      </div>
      <Write v-else @close="closeWrite" @save="uploadSignatureImage"></Write>
    </div>
  </el-drawer>
</template>
<script>
import Write from "./write.vue";
import ArtSystem from "../../artSystem.js";
import { base64toFile } from "../../utils/utils.js";

export default {
  name: "signature",
  components: { Write },
  emits: ["update:modelValue", "uploadSignatureImage"],
  props: {
    modelValue: Boolean,
    title: String,
    size: {
      type: String,
      default: "100%",
    },
    module: {
      type: String, //签名图片上传的所属模块
    },
    qrCodeValue: {
      //二维码扫码后的地址
      type: String,
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.modelValue;
      },
      set(val) {
        this.$emit("update:modelValue", val);
      },
    },
  },
  methods: {
    uploadSignatureImage(signatureData) {
      let base64Url = signatureData.data;
      let files = base64toFile(base64Url);
      ArtSystem.uploadImage({
        files: files,
        module: this.module,
      })
        .then((res) => {
          let { code, data, message } = res;
          if (code !== 200) {
            this.$message({
              message: "签名图片提交失败！原因：" + message,
              type: "error",
            });
            return;
          }
          const imageUrl = data.img_path;
          this.$emit("uploadSignatureImage", imageUrl);
        })
        .catch((error) => {
          console.error(error);
          this.$emit("error", error);
          this.$message({
            message: error,
            type: "error",
          });
        })
        .finally(() => {
          this.close();
        });
    },
    closeWrite() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped>
.signature-panel {
  width: 100%;
  height: 100%;
}
</style>
