<template>
  <div>
    <el-card>
      <el-form ref="sqlMonitorFormRef" :model="sqlMonitorForm" label-width="90px">
        <el-form-item label="模块名称:" style="width:400px">
          <el-input v-model="sqlMonitorForm.taskName" placeholder="请输入监控名称"></el-input>
        </el-form-item>
        <el-form-item label="数据源:">
          <el-select v-model="sqlMonitorForm.dsId" placeholder="请选择数据源" style="width:310px" clearable>
            <el-option v-for="item in dataSourceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="SQL脚本:">
          <textarea v-model="sqlMonitorForm.sql" placeholder="请数据sql语句" style="height:200px;width:600px"></textarea>
        </el-form-item>
        <el-form-item style="margin-left:1000px">
          <el-button type="primary" icon="el-icon-caret-right" @click="executeSqlBtn">执行</el-button>
          <el-button type="primary" icon="el-icon-message-solid" @click="setPoliceBtn">设置报警</el-button>
        </el-form-item>
        <el-form-item style="margin-left:-80px">
          <!-- 动态绑定表格数据 -->
          <el-table :data="sqlList" border style="font-size:10px;" :header-cell-style="{background:'#eee',color:'#606266'}">
            <af-table-column v-for="(val, key) in columnArr" :label="val" :prop="val" :key="key">
            </af-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 设置报警页面 -->
    <el-dialog title="报警策略" :visible.sync="DialogVisible" width="50%">
      <el-form ref="sqlMonitorFormRef" :model="sqlMonitorForm" label-width="90px">
        <el-form-item label="执行策略:" style="width:500px">
          <el-input v-model="sqlMonitorForm.taskCron"></el-input>
        </el-form-item>
        <el-form-item label="钉钉地址:" style="width:600px">
          <el-input v-model="sqlMonitorForm.dingUrl" placeholder="请输入钉钉通知地址" type="textarea" :rows="3">
          </el-input>
        </el-form-item>
        <el-form-item label="消息内容:" style="width:600px">
          <el-input v-model="sqlMonitorForm.dingText"
            placeholder="请输入报警内容,{count}表示查出来的数据,{0}表示第一行第一列,{1}表示第一行第2列,依次类推,{n}表示第一行第n列" type="textarea" :rows="3">
          </el-input>
        </el-form-item>
        <el-form-item label="是否启用:" style="width:500px">
          <el-input v-model="sqlMonitorForm.status"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="saveSqlMonitorFrom">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getSqlMonitorData, executeSqlMonitor } from '@/api/sqlMonitor'
import 'codemirror/theme/ambiance.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'
import sqlFormatter from 'sql-formatter'
let CodeMirror = require('codemirror/lib/codemirror')
require('codemirror/addon/edit/matchbrackets')
require('codemirror/addon/selection/active-line')
require('codemirror/mode/sql/sql')
require('codemirror/addon/hint/show-hint')
require('codemirror/addon/hint/sql-hint')
export default {
  name: 'codeMirror',
  data() {
    return {
      sqlMonitorForm: {},
      dataSourceList: [],
      sqlList: [],
      DialogVisible: false,
      columnArr: []
    }
  },
  // 初始化sql编辑器
  mounted() {
    let mime = 'text/x-mysql'
    // let theme = 'ambiance'//设置主题，不设置的会使用默认主题
    let editor = CodeMirror.fromTextArea(this.$refs.mycode, {
      mode: mime, // 选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
      tabSize: 2,
      indentWithTabs: true,
      // 自动缩进
      smartIndent: true,
      // 显示行号
      lineNumbers: true,
      // 匹配结束符号
      matchBrackets: true,
      // theme: theme,
      // 自动聚焦
      autofocus: true,
      // 自定义快捷键
      // extraKeys: { Ctrl: 'autocomplete' }, // 自定义快捷键
      // hint: CodeMirror.hint.sql,
      hintOptions: {
        // 自定义提示选项
        // tables: {
        //   users: ['name', 'score', 'birthDate'],
        //   countries: ['name', 'population', 'size']
        // }
        tables: window.tablewords
      }
    })
    // 代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死 cursorActivity
    editor.on('cursorActivity', function (cm, event) {
      editor.showHint()
    })
  },
  created() {
    this.getSqlMonitorDataSource()
  },
  methods: {
    // 获取数据源列表
    getSqlMonitorDataSource() {
      getSqlMonitorData().then((resp) => {
        this.dataSourceList = resp.data.data
        // console.log('www', resp)
      })
    },
    format() {
      let sqlContent = ''
      sqlContent = this.editor.getValue()
      /* 将sql内容进行格式后放入编辑器中 */
      this.editor.setValue(sqlFormatter.format(sqlContent))
    },
    // 执行sqla按钮
    executeSqlBtn() {
      var formData = new FormData()
      formData.set('dsId', this.sqlMonitorForm.dsId)
      formData.set('sql', this.sqlMonitorForm.sql)

      executeSqlMonitor(formData).then((resp) => {
        var data = resp.data.data
        this.sqlList = data
        if (data.length) {
          const row = data[0]
          const columnArr = []
          // 循环获第一行的表头数据
          for (let i in row) {
            columnArr.push(i)
          }
          this.columnArr = columnArr
        }
      })
    },
    // 点击设置报警按钮
    setPoliceBtn() {
      this.DialogVisible = true
    },
    // 保存按钮
    saveSqlMonitorFrom() {}
  }
}
</script>
<style lang="less" scoped>
.codesql {
  font-size: 11pt;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono,
    DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}
.el-table th > .cell {
  white-space: nowrap;
  width: fit-content;
}
</style>
