<!--
 * @Description: 
 * @Autor: Heloise
 * @Date: 2022-06-21 14:58:37
 * @LastEditors: Heloise
 * @LastEditTime: 2022-08-11 11:31:00
-->
<template>
  <div class="el-sql-editor">
    <div v-if="filterable" class="el-sql-editor__search">
      <div class="el-sql-editor__icon-text">
        <i class="bi-iconfont-sql-set"></i>
        <span>SQL规则</span>
      </div>
      <el-input
        placeholder="输入表名搜索"
        size="small"
        prefix-icon="bi-iconfont-search"
        v-model="filterText"
        clearable
      >
      </el-input>
      <el-tree
        v-bind="$attrs"
        v-on="$listeners"
        class="filter-tree"
        :data="data"
        :indent="0"
        :filter-node-method="filterNode"
        ref="tree"
      >
        <span class="span-text" slot-scope="{ node, data }">
          <el-tooltip
            :disabled="node.childNodes.length > 0"
            class="item"
            effect="dark"
            content="双击可带入编辑"
            placement="top"
          >
            <span
              @dblclick="clickTable(node, data)"
              v-html="highlight(node.label)"
            ></span>
          </el-tooltip>
        </span>
      </el-tree>
    </div>
    <div class="el-sql-editor__sql">
      <div class="el-sql-editor__sql-btns">
        <div class="el-sql-editor__icon-text" @click="aceValue = ''">
          <i class="bi-iconfont-sql-clean"></i>
          <span>清空</span>
        </div>
        <div class="el-sql-editor__icon-text" @click="compressEditor">
          <i class="bi-iconfont-sql-compress"></i>
          <span>压缩SQL</span>
        </div>
        <div class="el-sql-editor__icon-text" @click="formatEditor">
          <i class="bi-iconfont-sql-fomat"></i>
          <span>格式化SQL</span>
        </div>
      </div>
      <ace-editor
        ref="aceEditor"
        class="el-sql-editor__sql-edit"
        v-model="aceValue"
        @init="editorInit"
        lang="sql"
        width="100%"
        height="calc(100% - 36px)"
      ></ace-editor>
    </div>
  </div>
</template>

<script>
import aceEditor from 'vue2-ace-editor';
import sqlFormatter from 'sql-formatter/lib/sqlFormatter.js';
export default {
  name: 'ElSqlEditor',
  components: {
    aceEditor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    data: Array,
    filterable: Boolean
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed: {
    aceValue: {
      set(value) {
        this.$emit('getAceVal', value);
      },
      get() {
        return this.value;
      }
    }
  },
  data() {
    return {
      filterText: ''
    };
  },
  methods: {
    highlight(text) {
      let value = this.filterText;
      const reg = new RegExp(value, 'gi');
      return text.replace(reg, function($1) {
        return `<span class="el-cascader-highlight-text">${$1}</span>`;
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    clickTable(node, data) {
      if (node.childNodes.length === 0) {
        // 最后一级
        this.$refs.aceEditor.editor.setValue(this.aceValue + ' ' + data.id);
      }
    },
    editorInit() {
      require('brace/ext/language_tools'); // language extension prerequsite...
      require('brace/mode/html');
      require('brace/mode/javascript');
      require('brace/mode/sql');
      require('brace/mode/sh');
      require('brace/mode/less');
      require('brace/theme/chrome');
      require('brace/snippets/javascript'); // snippet
    },
    compressEditor() {
      if (!this.aceValue) return;
      this.$refs.aceEditor.editor.setValue(
        this.aceValue.split('\n').join(' ').replace(/\s+/g, ' ')
      );
    },
    /**
     * @description: 格式化SQL
     * @return {*}
     */
    formatEditor() {
      if (!this.aceValue) return;
      this.$refs.aceEditor.editor.setValue(sqlFormatter.format(this.aceValue));
    }
  }
};
</script>
