<template>
   <div>
     <Title>
       <template v-slot:titleName>慢SQL日志列表</template>
       <template v-slot:titleContent></template>
       <template v-slot:titleOperate>
       </template>
     </Title>
 
      <!--搜索条件-->
      <div class="form-container" v-loading="exporting">
          <AbQueryForm :formModel="queryFromModel" :fieldConfigs="queryFromData" :span="6" :criteriaShowNumber="8" :queryCriteriaOffset=[9,2] :queryEvent="queryLogsEvent"></AbQueryForm>
      </div>
     <!--列表-->
     <div class="table-container" v-loading="exporting">
       <vxe-grid ref="tableRef" v-bind="tableOptions">
        <template #tools_toolbar>
          <el-button circle @click="exportLogs()" title="下载日志"><el-icon><Download /></el-icon></el-button>
        </template>
        <template #xrequestid="{ row }">
          <ClickCopy :content="row.xrequestid" ></ClickCopy>
        </template>
        <template #sql="{ row }">
          <ClickCopy :content="row.sql" ></ClickCopy>
        </template>
      </vxe-grid>
     </div>
   </div>
   
 
 </template>
   
 
 <script lang="ts">
 export default { name: "logServiceLog" }
 </script>
 <script setup lang="ts">
 import XEUtils from 'xe-utils'
 import Title from "@/framework/components/Title/index.vue";
 import { querySlowsqlLogs,exportSlowsqlLogs } from '@/subsystem/api/sms/applog.ts'
 import { useQueryParamsHandle,useTableQueryReload } from '@/framework/hooks/useVxeTableHandle'
 import { gridDefaultProps } from '@/framework/utils/standard/vxe.ts'
 import AbQueryForm from "@/framework/components/standard/FormDynamic/abQueryForm.vue";
 import ClickCopy from "@/framework/components/standard/ClickCopy/index.vue";
 /**查询表单 */
 const queryFromModel = ref({})
 const queryFromData = reactive([
   { name: "操作时间", type: "datetimerange", key: "crtTime", 
     value: ref<[String, String]>([XEUtils.toDateString(new Date(), 'yyyy-MM-dd 00:00:00'), XEUtils.toDateString(new Date(), 'yyyy-MM-dd 23:59:59')])
   },
   { name: "请求编码", type: "input", key: "xrequestid",value:"",},
   { name: "应用", type: "input", key: "appname" ,value:""},
   { name: "日志信息", type: "input", key: "message",value:"",},
   { name: "日志条数", type: "select", key: "size",value:"10",
   listData: [{ value: "10", label: '10' }, { value: "50", label: '50' }, { value: "100", label: '100' }, { value: "200", label: '200' },]},
   { name: "时间排序", type: "radio", key: "order", value:"asc",listData: [ { value: "asc", label: '正序' },{ value: "desc", label: '倒序' },]},
 ])

 const exporting=ref(false)
 const exportLogs = () => {
  const params={
    start:'',end:'',
    appname:queryFromModel.value.appname,
    level:queryFromModel.value.level,
    xrequestid:queryFromModel.value.xrequestid,
    message:queryFromModel.value.message,
    }
  if(''!=queryFromModel.crtTime){
      params.start=XEUtils.toDateString(queryFromModel.value.crtTime[0], 'yyyy-MM-dd HH:mm:ss')
      params.end=XEUtils.toDateString(queryFromModel.value.crtTime[1], 'yyyy-MM-dd HH:mm:ss')
  }
  exporting.value=true
  exportSlowsqlLogs(params).then((data: any) => {
    ElMessage({type: 'success',message: '发起下载完成，请稍后到[下载中心]获取日志' })
  }).finally(() => {
    exporting.value = false
  });
}

const queryLogsEvent = () => {
   useTableQueryReload(tableRef.value)
  //  tableRef.value.commitProxy('query')
}
 
 /**表格初始化 */
 const tableRef = ref<VxeGridInstance>()//表格对象
 const tableOptions = reactive<VxeGridProps>(gridDefaultProps({
   params: reactive<VxeTableParam>({
     clientPage: false, //是否客户端分页
   }),
   rowConfig: {keyField: 'id'},//自定义行数据唯一主键的字段名
   pagerConfig: { enabled: false, pageSize: 100, pageSizes: [10, 50, 100, 200, 500] },//分页配置
   toolbarConfig: { export: false, custom: true, slots: {  tools: 'tools_toolbar' },  },//工具栏配置
   exportConfig: { type: 'xlsx', types: ['xlsx'], modes: ['all'] },
   proxyConfig: {
     seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
     sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
     filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
     props: { list: 'data' },// 对应响应结果，按照后台服务PageResult对象配置
     ajax: {
       // 接收 Promise 对象
       query: ({ page, sorts, filters }) => {
          const params={
           start:'',end:'',
           appname:queryFromModel.value.appname,
           level:queryFromModel.value.level,
           traceid:queryFromModel.value.traceid,
           message:queryFromModel.value.message,
           }
          if(''!=queryFromModel.crtTime){
             params.start=XEUtils.toDateString(queryFromModel.value.crtTime[0], 'yyyy-MM-dd HH:mm:ss')
             params.end=XEUtils.toDateString(queryFromModel.value.crtTime[1], 'yyyy-MM-dd HH:mm:ss')
          }
          const queryParams = useQueryParamsHandle(params, page, sorts, filters)//请求参数处理
          queryParams.size=queryFromModel.value.size
         queryParams.order=queryFromModel.value.order
          return querySlowsqlLogs(queryParams) //服务端分页查询
       },
     }
   },
   columns: [
    { type: 'seq', title: '序号',align:'center',width:'50px'},
    { field: 'appname', title: '应用名称'  ,align:'center',visible:false,},
    { field: 'node', title: '应用节点',visible:false,},
    { field: 'crttime', title: '创建时间',align:'center',width:'200px',sortable: true ,formatter({ cellValue }) { return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss') }},
    { field: 'thread', title: '线程名称',visible:false,},
    { field: 'xrequestid',title: '请求编码' , slots: { default: 'xrequestid' }, align:'center',width:'200px',},
    { field: 'traceid',title: 'traceid' , align:'center',visible:false,},
    { field: 'spanid',title: 'spanid' , align:'center',visible:false,},
    { field: 'handletime',title: '耗时(毫秒)',align:'center',width:'80px', },
    { field: 'SQL',title: 'SQL' , slots: { default: 'sql' }},
    { field: 'params',title: '参数' , },
    { field: 'module',title: '菜单/模块' ,formatter({ cellValue,row }) { return row.menu+"/"+row.module }, },
   ]
 }))
 
 onMounted(() => {
 });
 
 </script>
 
 <style lang="scss" scoped>
 </style>
 