
<template>
  <div style="margin:10px;height:calc(90vh - 100px)">
    <div style="width:60%;height:60px;margin:0 auto">
        <vxe-input v-model="srcName" type="search" placeholder="输入"  style="width:80%;height:40px;"></vxe-input>
        <vxe-button @click="handlerSearch()" :loading="srhLoading">查询</vxe-button>
    </div>
    
    <vxe-toolbar ref="toolbarRef" custom print export>
      <template #buttons>
        <div style="width:100%;margin-left:20px;font-size:14px;text-align: center;">{{ resStr  }}</div>
      </template>
    </vxe-toolbar>

    <vxe-grid  ref="tableRef" v-bind="gridOptions"  :scroll-y="{enabled: true, gt: 0}"  v-on="gridEvents"> 

    </vxe-grid>
  
  </div>
  <a-drawer
        :title="drawerTitle"
        placement="right"
        width="70%"
        :closable="true"
        :visible="visible"
        :get-container="false"
        :wrap-style="{ position: 'absolute'}"
        @close="closeDrawer"
    >
      <vxe-table
        :columnConfig = {resizable:true}
        :data="detailtTableData">
        <vxe-column type="seq" width="70"></vxe-column>
        <vxe-column field="name" title="字段名"  width="150"></vxe-column>
        <vxe-column field="value" title="字段值"></vxe-column>
      </vxe-table>
    </a-drawer>
</template>

<script lang="ts" name="polardb-index" setup>

import {  ref,reactive,onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { VxeToolbarInstance, VxeTableInstance} from 'vxe-table'

const visible = ref(false)

const srcName = ref();
const resStr = ref();
const tableDatas = ref([])
const heads = ref([])

const srhLoading = ref(false);

const columns = ref([])

async function handlerSearch() {
  
  srhLoading.value = true
  let params = {queryCond:srcName.value}
  let resData =  await defHttp.get({ url: "/polar/queryTest",params});
  srhLoading.value = false
  resStr.value = JSON.stringify(resData["sqls"])
  tableDatas.value = resData["datas"]
  heads.value = resData["heads"]
  columns.value = []
  let showCols = resData["showColumns"]
  let width = Math.floor(100/showCols);

  for (let i=0;i<showCols.length;i++) {
      if(!heads.value[showCols[i]]){
        if(showCols[i]=="count"||showCols[i]=="total"||showCols[i]=="count(*)"){
          heads.value[showCols[i]]="统计值";
        } else {
          heads.value[showCols[i]]= showCols[i];
        }
      }
  }

  for (const [key, value] of Object.entries(heads.value)) {  
      let column = {}
      column["field"] = key;
      column["title"] = value;
      
      column["sortable"] = true
      if(value && showCols.indexOf(key)>-1){
        column["visible"] = true
        column["width"] = width + "%";
      } else {
        column["visible"] = false
        column["width"] = 0;
      }
      columns.value.push(column)
      
  }  


}

const gridOptions = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,
  height: "85%",
  id: 'id',
  loading: false,
  columnConfig: {
    resizable: true
  },
  printConfig:{},
  columns: columns,
  data: tableDatas
})

const toolbarRef = ref<VxeToolbarInstance>()
const tableRef = ref<VxeTableInstance>()

onMounted(() => {
  const $table = tableRef.value
  const $toolbar = toolbarRef.value
  if ($table && $toolbar) {
    $table.connect($toolbar)
  }
})


const detailtTableData = ref([])
const drawerTitle = ref("")
const gridEvents = {
  cellDblclick ({ row, column }) {
    visible.value = true
    detailtTableData.value = []
    drawerTitle.value = "查看详细信息["+row["id"] +"]"
    for (const key in row) { 
        let title = heads.value[key]
        if(!title|| title.trim() == "") continue;
        if (row.hasOwnProperty(key)) { 
            let temObj = {
              "name":title,
              "value":row[key]
            }
            detailtTableData.value.push(temObj)
          }
          
    } 
  }
}




function closeDrawer() {
  visible.value = false
}




</script>
<style scoped>
.jeecg-basic-table-form-container {
  padding: 10px;
  position: relative;
}
.jeecg-basic-table-form-container .stm-query {
  padding: 12px 10px 6px 10px;
  margin-bottom: 8px;
  background-color: #fff;
  border-radius: 2px;
  position: relative;
}
.stm-typography{
  color: #009dff;
  font-size: 18px;
}
</style>