<template>
  <c-rich-text-editor
    v-model="value"
    v-bind="$attrs"
    @blur="blurEvent"
  ></c-rich-text-editor>
</template>

<script>
// 保函文本
export default {
  name: "XmlFormatEditor",
  props: ["model"],
  data() {
    return {
      value: "",
      isXml: false,
    };
  },
  watch: {
    model() {
      let rows = this.model["rows"] || [];
      this.value = this.show(rows);
    },
  },
  methods: {
    blurEvent(quill) {
      if (this.model && this.model.rows) {
        // const v = this.format(this.value);
        const v = this.format(quill.getText());
        this.model["rows"].length = 0;
        this.model["rows"].unshift(v);
        // this.$emit("change", v);
        if (quill.isEnabled()) {
          quill.disable();
          this.$emit("blur", v, () => {
            quill.blur();
            setTimeout(() => {
              quill.enable();
            }, 0);
          });
        }
      }
    },
    show: function (rows) {
      let strs = rows.length > 0 ? rows[0] : "";
      if (strs.startsWith("<?xml")) {
        this.isXml = true;
        var pattern = /<tdfmt\s[^>]*>([\s\S]*)<\/tdfmt>/;
        var temp = pattern.exec(strs);
        if (temp != null) {
          strs = temp[1];
        }
      }
      // return strs.replace(/<br\/>/g, "\n");
      return strs;
    },
    format: function (value) {
      if (this.isXml) {
        var len = value.length;
        value = value.replace(/\n/g, "<br/>");
        var head = "<?xml version='1.0'?><tdfmt sel-start='" + len + "'>";
        var tail = "</tdfmt>";
        return head + value + tail;
      }
      return value;
    },
  },
};
</script>

<style>
</style>