<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-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">格式化</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)">
                    <span>{{item.name}}</span>
                  </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'

export default {
  name: 'SqlConsole',
  components: {
    SqlEditor
  },
  data () {
    return {
      classCardbody: {
        overflow: 'auto',
        height: document.body.offsetHeight - 240 + 'px'
      },
      title: 'SQL工作台',
      sqlExecuting: false,
      activeTabName: 'table0',
      sqlExecutorId: undefined,
      sqlText: '',
      sqlConsole: [],
      executeResultInfo: ''
    }
  },
  methods: {
    runData () {
      this.sqlExecuting = true
      this.sqlExecutorId = (new Date()).getTime()
      this.sqlConsole = []
      this.sqlConsole.push({
        sql: 'sql',
        time: 20,
        success: true,
        count: 3,
        name: 'name'
      })
      setTimeout(() => {
        let resultStr = ''
        for (let i = 0; i < this.sqlConsole.length; i++) {
          let item = this.sqlConsole[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'
        }
        // console.log(Object.keys(list[0]))
        this.executeResultInfo = resultStr
        this.sqlExecuting = false
      }, 2000)
    },
    stopData () {
      this.sqlExecuting = false
    },
    changeTextarea (val) {
      this.sqlText = val
    },
    formaterSql () {
      let sqleditor = this.$refs.sqleditor
      sqleditor.editor.setValue(sqlFormatter.format(sqleditor.editor.getValue()))
    },
    refreshData () {
      this.sqlExecuting = false
      this.activeTabName = 'table0'
      this.sqlExecutorId = undefined
      this.sqlText = ''
      this.$refs.sqleditor.editor.setValue('')
      this.sqlConsole = []
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
