<template>
      <el-container id='issuse_page'>
         <el-header>
           <div id="header_box">
             <div>
              <el-switch
                v-model="status_debug"
                active-text="开启"
                @change='open_debug'
                inactive-text="关闭">
              </el-switch>
             </div>
            <div>
              <el-button size='mini'  type="info" @click='clean_debug_sql'>清除历史</el-button>
            </div>
          </div>
        </el-header>
        <div>
          <el-table
            :data="get_bug_sql_info"
            :highlight-current-row=true
            height='500'
            :border=true
            :fit=true
            @row-dblclick='row_dbclick'
            ref="multipleTable"
            style="width: 100%">
            <el-table-column type="index" width="55">
              <template slot-scope="scope">
                <span>
                  {{get_bug_sql_info.length-scope.$index}}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="method" width="100" :show-overflow-tooltip=true label="method"></el-table-column>
            <el-table-column prop="url" :show-overflow-tooltip=true label="url"></el-table-column>
            <el-table-column prop="debug_sql"  width="100" :show-overflow-tooltip=true label="debug_sql">
              <template slot-scope="scope">
                <span>
                  {{scope.row.debug_sql.substring(0,200)+'...'}}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="data" width="100" :show-overflow-tooltip=true label="body参数"></el-table-column>
            <el-table-column prop="responseText" width="100" :show-overflow-tooltip=true label="结果"></el-table-column>
            <el-table-column prop="status" width="100" :show-overflow-tooltip=true label="status"></el-table-column>
            <el-table-column prop="statusText"  width="120" :show-overflow-tooltip=true label="statusText"></el-table-column>
            <el-table-column fixed="right" width="140" label="操作">
                <template slot-scope="scope">
                    <el-tooltip content="编辑" placement="top">
                        <el-button icon="el-icon-edit" @click='show_sql(scope.row)' type="text" size="mini"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
          </el-table>
        </div>

       <el-dialog  style="word-wrap: break-word" width="800px"
        height='500px' :visible.sync="comp_sql_dialogVisible" :close-on-click-modal=false append-to-body>
          <div>
            <div class='message_dtl'>
              <el-input
                id="message_copy"
                type="textarea"
                :rows="30"
                placeholder="请输入内容"
                v-model="txt_dialog">
              </el-input>
            </div>

          </div>
             <div slot="footer" class="dialog-footer">
              <el-button size='mini' @click="next_row('up')">上一条</el-button>
              <el-button size='mini' @click="next_row('down')">下一条</el-button>
              <el-button size='mini' @click="target_item('url')">url</el-button>
              <el-button size='mini' @click="target_item('data')">参数</el-button>
              <el-button size='mini' @click="target_item('responseText')">结果</el-button>
               <el-button size='mini' @click="target_item('debug_sql')">SQL</el-button>
              <el-button size='mini' @click="copyArticle('message_copy')">复制</el-button>
               <el-button size='mini' @click="comp_sql_dialogVisible = false">关闭</el-button>
            </div>
        </el-dialog>
      </el-container>
</template>
<script>
 import { mapGetters } from 'vuex'
 import axios from 'axios'
import { setTimeout } from 'timers'
export default {
   data() {
     return {
       tableData: [],
       comp_sql_dialogVisible: false,
       item_info: {},
       txt_dialog: '',
       status_debug: false,
       row_index: 1
     }
   },
   computed: {
     ...mapGetters([
       'get_bug_sql_info'
     ])
   },
   mounted() {
     this.tableData = this.get_bug_sql_info
     this.status_debug = sessionStorage['debug_sql'] === 'true'
   },
   methods: {
     next_row(flage) {
       const index = this.get_bug_sql_info.findIndex((item, index) => {
         return item.url === this.item_info.url
       })
       if (index !== undefined) {
         if (flage === 'up') {
           if (index === 0) {
             this.$message.warning('没有更多了')
             return
           }
           this.item_info = this.get_bug_sql_info[index - 1]
         } else {
           if (index + 1 === this.get_bug_sql_info.length) {
             this.$message.warning('没有更多了')
             return
           }
           this.item_info = this.get_bug_sql_info[index + 1]
         }
         this.txt_dialog = ''
         setTimeout(() => {
           this.txt_dialog = decodeURIComponent(this.item_info.debug_sql)
         }, 300)
       }
       this.$refs.multipleTable.setCurrentRow(this.item_info)
     },
     row_dbclick(row) {
       this.comp_sql_dialogVisible = true
       this.item_info = row
       this.txt_dialog = decodeURIComponent(row.debug_sql)
     },
     clean_debug_sql() {
       this.$store.commit('clean_bug_sql_info')
     },
     open_debug(val) {
       axios.defaults.headers.common['debug_sql'] = val
       sessionStorage['debug_sql'] = val
     },
     target_item(flage) {
       this.txt_dialog = this.item_info[flage]
     },
     show_sql(row) {
       this.comp_sql_dialogVisible = true
       this.item_info = row
       this.txt_dialog = decodeURIComponent(row.debug_sql)
     },
     copyArticle(id) {
       const range = document.createRange()
       range.selectNode(document.getElementById(id))
       const selection = window.getSelection()
       if (selection.rangeCount > 0) selection.removeAllRanges()
       selection.addRange(range)
       document.execCommand('copy')
       this.$message.success('复制成功！')
     }
   }
}
</script>
<style scoped>
.message_dtl {
  height: 500px;
  overflow: auto;
}
.text_line_down {
  text-decoration: underline;
  cursor: pointer;
}
#header_box {
  display: flex;
  justify-content: space-between;
}
.message_dtl >>> .el-textarea__inner {
  height: 480px;
  overflow: auto;
}
</style>
