<template>
  <p-button type="link"
            style="margin-left:10px;"
            @click="showModal">
    {{$lang('测试')}}

    <a-modal v-model="isShowModal"
             :title="$lang('测试  -  只查询前10条记录')"
             :confirm-loading="confirmLoading"
             :width="1200"
             :footer="null"
             @ok="handleOk"
             @cancel="handleCancel">


          <a-row>
      <a-col :span="8">
        <span class="title">参数</span>
        <p-button type="primary"
                  size="small"
                    style="margin-left:20px;margin-bottom:5px;"
                    @click="run">{{$lang('运行')}}</p-button>
        <PCode ref="code"
                :height="400"
                style="border:1px solid #e8e8e8;"
                 v-model="content"
                 language="json" />
      </a-col>
      <a-col :span="16">
        <span class="title">结果</span> <div class="stime">响应时间：{{second}} s</div>
        <div style="height:400px;overflow-y:auto;margin-left:10px;margin-top:8px;">
         <a-spin :spinning="spinning">
           <div style="border:1px solid #e8e8e8;">
          <json-viewer :value="jsonData"
                       :copyable="{ copyText: '复制', copiedText: '完成' }"
                       :expand-depth="5" />
            </div>

        </a-spin>
        </div>
      </a-col>
    </a-row>

    </a-modal>

  </p-button>
</template>

<script>
import PCode from "./code";
import jsonViewer from 'vue-json-viewer'
import { testSQL } from "./api";

export default {
  components: {
    PCode: PCode,
    jsonViewer: jsonViewer
  },

  props: ['temp','infId','item','testParams'],

  data() {
    return {
      isShowModal: false,
      showModalTitle: '',
      confirmLoading: false,
      error: '',
      content: '',
      jsonData: '',
      spinning: false,
      data:[],
      tableColumns:[],
      second:0.0
    };
  },

  methods: {

    run() {

      let p = {};
      let _this = this;
      //console.log(_this)
       if(this.content){
          try {
              p = JSON.parse(this.content)
          } catch (error) {
            _this.$message.error('请输入正确参数');
            return;
          }
        }

      this.spinning = true;
      var start = new Date().getTime();
      testSQL({
        pageNum: 1,
        pageSize: 10,
        id:this.infId,
        params: p,
        underlineToCamel: this.testParams.underlineToCamel == '1' ? true : false,
        sqlTemplate: this.temp,
        dbKey: this.testParams.dbKey
      }).then(res => {
        var end = new Date().getTime();
        this.second = (end-start)/1000.0;
        this.spinning = false;
        if (!res.success) {
          this.$exception(res);
          return
        }
        this.jsonData = res.data?res.data:"数据集为空";
        //this.parseData(res.data);
      }).catch((er)=>{
        this.$error(er);
        this.spinning = false;
      })
    },

    parseData(data){
      if(!data){
        return;
      }
      var da = data.list;
      if(da.length>0){
        var item = da[0];
        //this.tableColumns = [];
        //var addRowId = true;
        // for(var key in item){
        //   if(key=="tmp_row_id"){
        //     addRowId = false;
        //   }
        //   this.tableColumns.push({
        //     title: key,
        //     dataIndex: key,
        //     key: key,
        //     width: 200
        //   });
        // }

        //添加行key数据
        // if(addRowId){
        //    this.tableColumns.unshift({
        //     title: "序号",
        //     dataIndex: "tmp_row_id",
        //     key: "tmp_row_id",
        //     width: 80
        //   });
        //   for(var i=1;i<da.length+1;i++){
        //     da[i-1]["tmp_row_id"] = i;
        //   }
        // }
       this.data = da;
      }
    },
    showModal() {
      this.$emit('callBack')
      setTimeout(()=> {
        if(!this.testParams.dbKey) {
        this.$message.error('请输入数据源信息')
        return
      }
      this.isShowModal = true
      this.jsonData='';
      },500)

    },

    handleOk() {

    },

    handleCancel() {
      this.isShowModal = false
      //this.content = '';
      this.jsonData='';
      this.tableColumns=[];
      this.data = [];
    },

  },

}
</script>

<style lang="less" scoped>
@import "~ant-design-vue/es/style/themes/default";

.monaco-editor, .monaco-editor .inputarea.ime-input{
  display:none;
}
.stime{
  color: @primary-color;
  display: inline-block;
  float: right;
}
.title{
  font-weight: bold;
  color: #000;
}
</style>
