<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=[3,2] 
          :queryEvent="loadLogs">
          </AbQueryForm>
      </div>
      <!--列表-->
      <div class="table-container" v-loading="exporting">
        <div style="border-bottom:1px solid #CDD0D6; text-align: right; padding-bottom: 3px; margin-bottom: 10px;">
          <el-button circle @click="exportLogs()" title="下载日志"><el-icon><Download /></el-icon></el-button>
        </div>
        <div>
         <div v-if="logList.length>0" v-for="log of logList" :key="log.id" style="font-size: 12px;">
            <el-space wrap>
               <el-text>{{ log.crttime }}</el-text>
               <el-text>{{ log.appname }}</el-text>
               <el-text >{{ log.level }}</el-text>
               <el-text >{{ log.thread }}</el-text>
               <el-text >{{ log.classname }}</el-text>
               <el-text >{{ log.xrequestid }}</el-text>
               <el-text >[{{ log.menu }},{{ log.module }}]</el-text>
               <el-text style="white-space: pre-line">{{ log.message }}</el-text>
            </el-space>
          </div>
          <div v-else >暂无日志</div>
        </div>
      </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 { queryServiceLogs,exportServiceLogs } from '@/subsystem/api/sms/applog.ts'
 import AbQueryForm from "@/framework/components/standard/FormDynamic/abQueryForm.vue";

 const exporting=ref(false)
 const exportLogs = () => {
  console.log(queryFromModel.value.appname);
  if(''===queryFromModel.value.appname){
    ElMessage({type: 'error',message: '请输入应用名称' })
    return false
  }
  const params={
    start:XEUtils.toDateString(queryFromModel.value.crtTime[0], 'yyyy-MM-dd HH:mm:ss'),
      end:XEUtils.toDateString(queryFromModel.value.crtTime[1], 'yyyy-MM-dd HH:mm:ss'),
      appname:queryFromModel.value.appname,
      level:queryFromModel.value.level,
      xrequestid:queryFromModel.value.xrequestid,
      message:queryFromModel.value.message,
    }
  exporting.value=true
  exportServiceLogs(params).then((data: any) => {
      ElMessage({type: 'success',message: '发起下载完成，请稍后到[下载中心]获取日志' })
  }).finally(() => {
    exporting.value = false
  });
}
 
 /**查询表单 */
 const queryFromModel = ref({})
 const queryFromData = reactive([
   { name: "操作时间", type: "datetimerange", key: "crtTime", required: true,
     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: "appname" ,value:"",rules: [{ required: true, message: '请输入应用名称', trigger: 'blur' },],},
   { name: "请求编码", type: "input", key: "xrequestid",value:"",},
   { name: "日志级别", type: "select", key: "level",value:"",
   listData: [{ value: "DEBUG", label: 'DEBUG' }, { value: "INFO", label: 'INFO' }, { value: "WARN", label: 'WARN' }, { value: "ERROR", label: 'ERROR' },]},
   { name: "日志信息", type: "input", key: "message",value:"",},
   { name: "日志条数", type: "select", key: "size",value:"200",
   listData: [{ value: "200", label: '200' }, { value: "500", label: '500' }, { value: "1000", label: '1000' }, { value: "2000", label: '2000' },]},
   { name: "时间排序", type: "radio", key: "order", value:"asc",listData: [ { value: "asc", label: '正序' },{ value: "desc", label: '倒序' },]},
 ])

 const logList=ref([])
 const loadLogs = () => {
   queryServiceLogs({
      start:XEUtils.toDateString(queryFromModel.value.crtTime[0], 'yyyy-MM-dd HH:mm:ss'),
      end:XEUtils.toDateString(queryFromModel.value.crtTime[1], 'yyyy-MM-dd HH:mm:ss'),
      appname:queryFromModel.value.appname,
      level:queryFromModel.value.level,
      xrequestid:queryFromModel.value.xrequestid,
      message:queryFromModel.value.message,
      page:1,size:queryFromModel.value.size,
      sort:'crttime',order:queryFromModel.value.order,
      }).then((data: any) => {
      logList.value=data.data
    }).finally(() => {
    });
 }


 onMounted(() => {
   
 });
 
 </script>
 
 <style lang="scss" scoped>
 </style>
 