<template>
  <div>
    <Title>
      <template v-slot:titleName>应用访问日志列表</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 #requests="{ row }">
          <ClickCopy :content="row.requests" ></ClickCopy>
        </template>
      </vxe-grid>
    </div>
  </div>
  

</template>
  

<script lang="ts">
export default { name: "logAccessLog" }
</script>
<script setup lang="ts">
import XEUtils from 'xe-utils'
import Title from "@/framework/components/Title/index.vue";
import { queryAccessLogs,exportAccessLogs } 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: "requests",value:"", },
  { name: "耗时阈值", type: "input", key: "handletime",value:"1000",placeholder:"请输入耗时阈值（毫秒）"},
  { name: "应用", type: "input", key: "appname" ,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: '倒序' },]},
  // { name: "节点", type: "input", key: "node" ,value:""},
  // { name: "HTTP状态", type: "input", key: "status",value:"" },
  
])
const queryLogsEvent = () => {
   useTableQueryReload(tableRef.value)
  //  tableRef.value.commitProxy('query')
}

const exporting=ref(false)
const exportLogs = () => {
  const params={
    start:'',end:'',
    appname:queryFromModel.value.appname,
    node:queryFromModel.value.node,
    handletime:queryFromModel.value.handletime,
    status:queryFromModel.value.status,
    rquests:queryFromModel.value.rquests
  }
  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
  exportAccessLogs(params).then((data: any) => {
    ElMessage({type: 'success',message: '发起下载完成，请稍后到[下载中心]获取日志' })
  }).finally(() => {
    exporting.value = false
  });
}

/**表格初始化 */
const tableRef = ref<VxeGridInstance>()//表格对象
const tableOptions = reactive<VxeGridProps>(gridDefaultProps({
  params: reactive<VxeTableParam>({
    clientPage: false, //是否客户端分页
  }),
  rowConfig: {keyField: 'id'},//自定义行数据唯一主键的字段名
  pagerConfig: { enabled: false, pageSize: 10, 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,
          node:queryFromModel.value.node,
          handletime:queryFromModel.value.handletime,
          status:queryFromModel.value.status,
          requests:queryFromModel.value.requests
          }

         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 queryAccessLogs(queryParams) //服务端分页查询
      },
    }
  },
  columns: [
   { type: 'seq', title: '序号',width:'50px',align:'center'},
   { field: 'crttime', title: '创建时间',align:'center',sortable: true ,formatter({ cellValue }) { return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss') }},
   { field: 'appname', title: '应用名称'  ,align:'center',width:'80px',},
   { field: 'node', title: '应用节点',visible:false,},
   { field: 'xrequestid',title: '请求编码' , slots: { default: 'xrequestid' }, },
   { field: 'traceid',title: 'traceid' , align:'center',visible:false,},
   { field: 'spanid',title: 'spanid' , align:'center',visible:false,},
   { field: 'status',title: 'HTTP状态' ,visible:false,},
   { field: 'requests', title: '请求地址',width:'200px', slots: { default: 'requests' },},
   { field: 'sendbytes',title: '发送的字节数',visible:false},
   { field: 'handletime',title: '耗时(毫秒)' , align:'center',width:'80px',},
   { field: 'commonparam', title: '公共参数',formatter({ cellValue }) { 
      return decodeURIComponent(cellValue).replace(/\\x([0-9A-Fa-f]{2})/g, function(match, hex) {
        return String.fromCharCode(parseInt(hex, 16));
    })
    }},
   { field: 'remotehost',title: '远程主机' , align:'center',},
   { field: 'referer',title: '请求来源' ,visible:false,},
   { field: 'useragent',title: '客户端' ,visible:false, },
   { field: 'xforwardedfor',title: '请求转发' ,visible:false, },
   
  ]
}))

onMounted(() => {
});

</script>

<style lang="scss" scoped>
</style>
