<!--
 * @Description: 
 * @Autor: Heloise
 * @Date: 2022-06-21 14:58:37
 * @LastEditors: Irene
 * @LastEditTime: 2022-08-24 18:53:49
-->
<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>
        <el-tooltip placement="top" popper-class="el-sql-editor__tooltip">
          <div class="el-sql-editor__tooltip-content" slot="content">
            1、支持搜索表名<br />2、双击字段可带入编辑
          </div>
          <i class="bi-iconfont-help-circle-fill"></i>
        </el-tooltip>
      </div>
      <el-virtual-tree
        ref="asyncVirtualList"
        v-bind="$attrs"
        :list="data"
        :searchContent="searchContent"
        @getData="clickTable"
      ></el-virtual-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"
        :options="{
          showPrintMargin: false,
        }"
        @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: {
    searchContent: {
      type: String,
      default: '输入表名搜索'
    },
    value: {
      type: String,
      default: ''
    },
    data: Array,
    filterable: Boolean
  },
  computed: {
    aceValue: {
      set(value) {
        this.$emit('getAceVal', value);
      },
      get() {
        return this.value;
      }
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    clickTable(data) {
      this.aceValue = this.aceValue + ' ' + data.id;
      // 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.aceValue = this.aceValue
        .split('\n')
        .join(' ')
        .replace(/\s+/g, ' ');
      // this.$refs.aceEditor.editor.setValue(
      //   this.aceValue.split('\n').join(' ').replace(/\s+/g, ' ')
      // );
    },
    /**
     * @description: 格式化SQL
     * @return {*}
     */
    formatEditor() {
      if (!this.aceValue) return;
      this.aceValue = sqlFormatter.format(this.aceValue);
      // this.$refs.aceEditor.editor.setValue(sqlFormatter.format(this.aceValue));
    }
  }
};
</script>
