function handleShowHint(cmInstance, hintOptions) {
  let cursor = cmInstance.getCursor();
  let cursorLine = cmInstance.getLine(cursor.line);
  let end = cursor.ch;
  let start = end;

  let token = cmInstance.getTokenAt(cursor);
  console.log(cmInstance, cursor, cursorLine, end, token);
  // console.log(hintOptions.tables)
  // return hintOptions.tables;
  return {
    list: ["hello", "world"],
    from: { ch: token.start, line: cursor.line },
    to: { ch: token.end, line: cursor.line }
  };
}

function handleShowHint2(cmInstance, hintOptions) {
  let cursor = cmInstance.getCursor();
  let cursorLine = cmInstance.getLine(cursor.line);
  let end = cursor.ch;
  let start = end;

  let token = cmInstance.getTokenAt(cursor);
  console.log(cmInstance, cursor, cursorLine, end, token);
  return {
    list: [
      {
        text: "hello",
        displayText: "你好呀",
        displayInfo: "提示信息1",
        render: this.hintRender
      },
      {
        text: "world",
        displayText: "世界",
        displayInfo: "提示信息2",
        render: this.hintRender
      }
    ],
    from: {
      ch: token.start,
      line: cursor.line
    },
    to: {
      ch: token.end,
      line: cursor.line
    }
  };
}
function hintRender(element, self, data) {
  let div = document.createElement("div");
  div.setAttribute("class", "autocomplete-div");

  let divText = document.createElement("div");
  divText.setAttribute("class", "autocomplete-name");
  divText.innerText = data.displayText;

  let divInfo = document.createElement("div");
  divInfo.setAttribute("class", "autocomplete-hint");
  divInfo.innerText = data.displayInfo;

  div.appendChild(divText);
  div.appendChild(divInfo);
  element.appendChild(div);
}

Vue.use(VueCodemirror);

new Vue({
  el: "#app",
  data: {
    code: `select a from table1 where b = 1`,
    cmOption: {
      // 语言及语法模式
      mode: "text/x-sql",
      // 主题
      theme: "darcula",
      // 显示函数
      line: true,
      lineNumbers: true,
      // 软换行
      lineWrapping: true,
      // tab宽度
      tabSize: 4,
      // 代码提示功能
      hintOptions: {
        // 避免由于提示列表只有一个提示信息时，自动填充
        completeSingle: false,
        hint: handleShowHint2
        // 不同的语言支持从配置中读取自定义配置 sql语言允许配置表和字段信息，用于代码提示
        // tables: {
        //   table1: ["c1", "c2"]
        // }
      },
      // 高亮行功能
      styleActiveLine: true
    }
  },
  methods: {
    inputChange(content) {
      this.$nextTick(() => {
        // console.log("code:" + this.code);
        // console.log("content:" + content);
      });
    }
  },
  computed: {
    cm() {
      return this.$refs.cm.codemirror;
    }
  },
  mounted() {
    // 代码提示功能 当用户有输入时，显示提示信息
    this.$refs.cm.codemirror.on("inputRead", (cm) => {
      cm.showHint();
    });

    this.$refs.cm.codemirror.setSize(
      "auto",
      Math.max(document.documentElement.clientHeight - 20, 200) + "px"
    );
    this.$nextTick(() => {
      window.addEventListener("resize", () => {
        //监听浏览器窗口大小改变
        //浏览器变化执行动作
        this.$refs.cm.codemirror.setSize(
          "auto",
          Math.max(document.documentElement.clientHeight - 20, 200) + "px"
        );
      });
    });
  }
});