<template>
  <div class="app-container">
    <el-card class="box-card" shadow="always">
      <div slot="header" class="clearfix">
        <span>{{ title }}</span>
      </div>
      <div :style="classCardbody">
        <el-row>
          <el-col :span="24">
            <el-select v-model="sqlDataSource" placeholder="请选择数据源">
              <el-option
                v-for="source in sourceOptions"
                :key="source.id"
                :label="source.sourceName"
                :value="source.id"
                :disabled="source.status === '0'"
              ></el-option>
            </el-select>
            <el-button size="mini" round @click="runData" :disabled="sqlExecuting">运行</el-button>
            <el-button size="mini" round @click="stopData" :disabled="!sqlExecuting">停止</el-button>
            <el-button size="mini" round @click="formaterSql" :disabled="sqlExecuting">格式化</el-button>
            <el-button size="mini" round @click="refreshData" :disabled="sqlExecuting">重置</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <sql-editor
              ref="sqleditor"
              :value="sqlText"
              @changeTextarea="changeTextarea($event)"
              style="height: 300px;margin: 20px 0;"
            ></sql-editor>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div v-if="sqlExecuting" v-loading="sqlExecuting">数据加载中...</div>
            <div v-else>
              <div v-if="sqlConsole.length > 0">
                <el-tabs type="border-card" v-model="activeTabName">
                  <el-tab-pane label="信息" name="table0">
                    <pre>{{executeResultInfo}}</pre>
                  </el-tab-pane>
                  <el-tab-pane v-for="(item,index) in sqlConsole" :key="(index+1)" :name="'table'+(index+1)" :label="'结果'+(index+1)">
                    <el-table :data="item.dataList" stripe border
                              :max-height="300"
                              style="width: 100%; margin: 15px 0;">
                      <el-table-column label="序号" width="55" align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.$index + 1 }}</span>
                        </template>
                      </el-table-column>
                      <template v-for="(column, index) in item.columnList">
                        <el-table-column
                          :prop="column"
                          :label="column"
                          :key="index"
                          align="center"
                          show-overflow-tooltip
                        />
                      </template>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import sqlFormatter from 'sql-formatter'
import SqlEditor from '@/components/SqlEditor'
import { listDataSource } from '@/api/factory/datasource'
import { runData, stopData } from '@/api/factory/dataconsole'

export default {
  name: 'SqlConsole',
  components: {
    SqlEditor
  },
  data () {
    return {
      classCardbody: {
        overflow: 'auto',
        height: document.body.offsetHeight - 240 + 'px'
      },
      title: 'SQL工作台',
      // 数据源数据字典
      sourceOptions: [],
      sqlDataSource: undefined,
      sqlText: undefined,
      sqlExecuting: false,
      activeTabName: 'table0',
      sqlExecutorId: undefined,
      sqlConsole: [],
      executeResultInfo: undefined
    }
  },
  created () {
    this.getDataSourceList()
  },
  methods: {
    getDataSourceList () {
      listDataSource().then(response => {
        if (response.success) {
          this.sourceOptions = response.data
        }
      })
    },
    runData () {
      if (!this.sqlDataSource) {
        this.$message.error('数据源不能为空')
        return
      }
      if (!this.sqlText) {
        this.$message.error('查询SQL不能为空')
        return
      }
      this.sqlExecuting = true
      this.sqlExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000)
      this.sqlConsole = []
      let data = {}
      data.sqlKey = this.sqlExecutorId
      data.sourceId = this.sqlDataSource
      data.sqlText = this.sqlText
      runData(data).then(response => {
        if (response.success) {
          const { data } = response
          let resultStr = ''
          for (let i = 0; i < data.length; i++) {
            let item = data[i]
            resultStr += item.sql
            resultStr += '\n> 状态：' + ((item.success) ? '成功' : '失败')
            if (item.count && item.count >= 0) {
              resultStr += '\n> 影响行数：' + item.count
            }
            resultStr += '\n> 耗时：' + (item.time || 0) / 1000 + 's'
            resultStr += '\n\n'
          }
          this.executeResultInfo = resultStr
          this.sqlConsole = data
          this.sqlExecuting = false
        }
      })
    },
    stopData () {
      let data = {}
      data.sqlKey = this.sqlExecutorId
      stopData(data).then(response => {
        if (response.success) {
          this.sqlExecuting = false
          this.$message.success('停止成功')
        } else {
          this.$message.error('停止失败')
        }
      })
    },
    changeTextarea (val) {
      this.sqlText = val
    },
    formaterSql () {
      if (!this.sqlText) {
        return
      }
      this.$refs.sqleditor.editor.setValue(sqlFormatter.format(this.$refs.sqleditor.editor.getValue()))
    },
    refreshData () {
      if (!this.sqlText) {
        return
      }
      this.sqlExecuting = false
      this.activeTabName = 'table0'
      this.sqlExecutorId = undefined
      this.sqlText = undefined
      this.$refs.sqleditor.editor.setValue('')
      this.sqlConsole = []
      this.executeResultInfo = undefined
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
