<template>
  <div class="template-textarea">
    <div class="rich-editor" v-html="replaceData(com.content)"></div>
  </div>
</template>

<script>
// import CKEditor from "ckeditor4-vue";
import { findData } from "@/api/sourceData";
export default {
  name: "app",
  emits: ["onUpdateData"],
  compnents: {
    // ckeditor: CKEditor.component
  },
  props: {
    coms: {
      type: Array,
      default: () => {
        return [];
      },
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
    com: {
      type: Object,
      default: null,
    },
  },
  watch: {
    com: {
      handler(val) {
        console.log("val", val);
        /*  let _this = this;
        if (val == null) return;
        if (val.content == undefined || val.content == null) return;
        _this.replaceData(val.content).then((res) => {
          _this.content = res;
          _this.$emit("onUpdateData", this.currentIndex, res);
        }); */
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      content: "",
    };
  },
  methods: {
    replaceData(data) {
      for (var i = 0; i < this.com.attrs.length; i++) {
        let attrId = this.com.attrs[i].id;
        if (this.com.attrs[i].type == "variable") {
          //全局变量
          data = data.replace(
            "{{" + this.com.attrs[i].id + "}}",
            '<input type="text" class="text-input-box" value="' +
              this.com.attrs[i].content +
              '">'
          );
        } else if (this.com.attrs[i].type == "Directory") {
          //处理目录
          data = data.replace(
            "<p>{{" + attrId + "}}</p>",
            "<h1>" + this.com.attrs[i].content + "</h1>"
          );
          data = data.replace(
            "<div>{{" + attrId + "}}</div>",
            "<h1>" + this.com.attrs[i].content + "</h1>"
          );
          data = data.replace(
            "<span>{{" + attrId + "}}</span>",
            "<h1>" + this.com.attrs[i].content + "</h1>"
          );
        } else {
          data = data.replace(
            "{{" + this.com.attrs[i].id + "}}",
            this.com.attrs[i].content
          );
        }
      }
      return data;
    },
    /* async replaceData(data) {
      let _this = this;
      for (var i = 0; i < _this.com.attrs.length; i++) {
        let attrId = _this.com.attrs[i].id;
        if (_this.com.attrs[i].type == "formula") {
          let formula = await _this.analysisformula(_this.com.attrs[i]);
          formula = await _this.getRemote(formula);
          let evalResult = eval(formula);
          if (!isNaN(evalResult)) {
            data = data.replace("{{" + attrId + "}}", evalResult);
          }
        } else if (_this.com.attrs[i].type == "sourceData") {
          let result = await _this.getRemote1(_this.com.attrs[i].formula);
          if (!isNaN(result)) {
            data = data.replace("{{" + attrId + "}}", result);
          }
        } else if (_this.com.attrs[i].type == "Directory") {
          //处理目录
          data = data.replace(
            "<p>{{" + attrId + "}}</p>",
            "<h1>" + _this.com.attrs[i].content + "</h1>"
          );
          data = data.replace(
            "<div>{{" + attrId + "}}</div>",
            "<h1>" + _this.com.attrs[i].content + "</h1>"
          );
          data = data.replace(
            "<span>{{" + attrId + "}}</span>",
            "<h1>" + _this.com.attrs[i].content + "</h1>"
          );
        } else {
          data = data.replace("{{" + attrId + "}}", _this.com.attrs[i].content);
        }
      }
      return data;
    }, */

    //分析公式
    async analysisformula(attrs) {
      let _this = this;
      var pattern = /(\[.*?\]){3}/;
      var formula = attrs.formula;
      var reg = new RegExp(pattern);
      while (true) {
        var items = formula.match(reg);
        if (items == null) break;
        let itemName = items[0];
        let data = await _this.getformulaData(itemName);
        data = await _this.getRemote(data);
        formula = formula.replace(itemName, "(" + parseFloat(data) + ")");
      }
      return formula;
    },
    async getformulaData(formulaItem) {
      let _this = this;
      var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
      var reg = new RegExp(pattern);
      let items = formulaItem.match(reg);
      let calResult = 0;
      if (items[1] == "T") {
        //表示本地模板数据
        calResult = await _this.getModuleData(items[2], items[3]);
      }
      return calResult;
    },
    async getRemote(formula) {
      let _this = this;
      var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
      var reg = new RegExp(pattern);
      while (true) {
        let items = formula.match(reg);
        if (items == null) break;
        if (items[1] == "R") {
          //表示获取远程数据
          var dataIndex = items[4];
          dataIndex = items[4].split(",");
          let calResult = await _this.getRemoteData(
            items[2],
            items[3],
            dataIndex[0],
            dataIndex[1]
          );
          let itemName = items[0];
          formula = formula.replace(
            itemName,
            "(" + parseFloat(calResult) + ")"
          );
        }
      }
      return formula;
    },
    async getRemote1(formula) {
      let _this = this;
      var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
      var reg = new RegExp(pattern);
      while (true) {
        let items = formula.match(reg);
        if (items == null) break;
        if (items[1] == "R") {
          //表示获取远程数据
          var dataIndex = items[4];
          dataIndex = items[4].split(",");
          let calResult = await _this.getRemoteData(
            items[2],
            items[3],
            dataIndex[0],
            dataIndex[1]
          );
          let itemName = items[0];
          formula = formula.replace(itemName, parseFloat(calResult));
        }
      }
      return formula;
    },

    //获取远程数据
    async getRemoteData(code, sheet, row, col) {
      debugger;
      let _this = this;
      let result = 0;
      let par = {
        code: code,
        sheetName: sheet,
        row: row,
        col: col,
      };
      let res = await findData(par);
      if (res.status == 200) {
        console.log("result:", res.data);
        let dataResult = parseFloat(res.data.result);
        if (!isNaN(dataResult)) {
          return dataResult;
        }
      }
      return 0;
    },

    //获取本地文档模块数据
    async getModuleData(code, attrName) {
      let _this = this;
      let item = _this.coms.filter((o) => o.code == code);
      if (item.length > 0) {
        let attr = item[0].attrs.filter((o) => o.name == attrName);
        if (attr.length > 0) {
          let content = parseFloat(attr[0].content);
          if (!isNaN(content)) {
            return content;
          }
        }
      }
      return 0;
    },
  },
};
</script>
<style lang="scss">
@import "./index.scss";
</style>
