<template>
  <div>
    <Title>
      <template v-slot:titleName>操作日志列表</template>
      <template v-slot:titleContent></template>
      <template v-slot:titleOperate>
      </template>
    </Title>

     <!--搜索条件-->
     <div class="form-container" >
         <AbQueryForm :formModel="queryFromModel" :fieldConfigs="queryFromData" :span="5" :criteriaShowNumber="6" :queryCriteriaOffset=[1,2] 
         :queryEvent="queryLogsEvent">
            <template v-slot:slotmodule>
               <el-tree-select v-model="queryFromModel.module" :data="moduleData" :render-after-expand="false" placeholder="请选择系统模块"  filterable />
            </template>
         </AbQueryForm>
     </div>
    <!--列表-->
    <div class="table-container">
      <vxe-grid ref="tableRef" v-bind="tableOptions">
        <template #tools_toolbar>
          <el-input style="margin-right: 15px; " v-model="filterName" type="search" placeholder="表内搜索" @keyup="useInVxeGridSearch(tableRef)"></el-input>
        </template>
        <template #menu="{ row }">
            {{ row.menu }}/{{ row.module }}
         </template>
         <template #state="{ row }">
            <el-text v-if="1===row.state" type="success">已完成</el-text>
            <el-text v-else-if="-1===row.state" type="danger">异常</el-text>
            <el-text v-else-if="-0===row.state" type="primary">进行中</el-text>
            <el-text v-else>{{ row.state }}</el-text>
         </template>
         <template #operator="{ row }">
            <el-text>{{ row.operator }}/{{ row.operatorName }}</el-text>
         </template>
         <template #operate="{ row }">
            <el-link type="primary"  :underline="false"  @click="showLogDetails(row)"  title="详情"><el-icon size="20"><Document /></el-icon></el-link>
         </template>
      </vxe-grid>
    </div>
  </div>
  
  <!--详情-->
  <el-drawer v-model="detailVisible" direction="rtl" size="80%" title="日志内容">
   
    <LogShow :before-content="logDetailData.beforeContent" :content="logDetailData.content" >
      <template v-slot:logForm>
         <AbForm :formModel="logFormModel" :fieldConfigs="logFromConfig" :span="6" >
            <!-- <template v-slot:button></template> -->
         </AbForm>
      </template>
       <!-- <template v-slot:beforeContent>test</template> -->
      <!-- <template v-slot:content><el-text>{{ detailData.content }}</el-text></template> -->
    </LogShow>
  </el-drawer>

</template>
  

<script lang="ts">
export default { name: "logOperationLog" }
</script>
<script setup lang="ts">
import XEUtils from 'xe-utils'
import Title from "@/framework/components/Title/index.vue";
import LogShow from "@/framework/components/standard/LogShow/index.vue";
import { getOperationLogs,getMenuModuleDicts } from '@/subsystem/api/sms/index'
import { useQueryParamsHandle,useInVxeGridSearch,useTableQueryReload } from '@/framework/hooks/useVxeTableHandle'
import { gridDefaultProps } from '@/framework/utils/standard/vxe.ts'
import AbForm from "@/framework/components/standard/FormDynamic/abForm.vue";
import AbQueryForm from "@/framework/components/standard/FormDynamic/abQueryForm.vue";

/**查询表单 */
const moduleData=ref([])
const queryFromModel = ref({})
const queryFromData = reactive([
  { name: "操作时间", type: "daterange", key: "crtTime", value: ref<[String, String]>([XEUtils.toDateString(XEUtils.getWhatMonth(new Date(), 0, 'first'), 'yyyy-MM-dd'), XEUtils.toDateString(new Date(), 'yyyy-MM-dd')])},
  { name: "系统模块", key: "module", slot:"slotmodule",},  
  { name: "业务码", type: "input", key: "businessCode" ,value:""},
  { name: "操作人", type: "input", key: "operator",value:"" },
])
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: true, pageSize: 10, pageSizes: [10, 20, 50, 100] },//分页配置
  proxyConfig: {
    seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
    sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
    filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
    props: { result: 'data', total: 'total' },// 对应响应结果，按照后台服务PageResult对象配置
    ajax: {
      // 接收 Promise 对象
      query: ({ page, sorts, filters }) => {
         const params={menu:queryFromModel.value.menu,module:queryFromModel.value.module, operator:queryFromModel.value.operator,
            start:'',end:'',businessCode:queryFromModel.value.businessCode}
         if(''!=queryFromModel.crtTime){
            params.start=XEUtils.toDateString(queryFromModel.value.crtTime[0], 'yyyy-MM-dd')
            params.end=XEUtils.toDateString(queryFromModel.value.crtTime[1], 'yyyy-MM-dd')
         }
         const queryParams = useQueryParamsHandle(params, page, sorts, filters)//请求参数处理
         return getOperationLogs(queryParams) //服务端分页查询
      },
    }
  },
  columns: [
   { type: 'seq', title: '序号',width:'50px',align:'center'},
   { field: 'menu', title: '系统模块'  ,slots: {default: 'menu'}},
   { field: 'businessCode', title: '业务码',},
   { field: 'operationName', title: '操作名称'},
   { field: 'reason', title: '原因'  },
   { field: 'operatorName',title: '操作人' ,slots: {default: 'operator'}},
   { field: 'ip',title: 'IP地址' ,align:'center'},
   { field: 'crtTime',title: '操作时间' ,align:'center', width:'160px'},
   { field: '', title: '操作',slots: {default: 'operate'},align:'center'},//操作类居中显示 
  ]
}))

/**日志详情 */
const detailVisible=ref(false)
const logDetailData = ref({})
const logFormModel = ref({})
const logFromConfig = reactive([
  { name: "系统模块", type: "text", key: "menu"},
  { name: "业务码", type: "text", key: "businessCode"},
  { name: "操作名称", type: "text", key: "operationName" },
  { name: "原因", type: "text", key: "reason" },
  { name: "IP地址", type: "text", key: "ip" },
  { name: "操作时间", type: "text", key: "crtTime" },
])
const showLogDetails = (obj) => {
   detailVisible.value=true;
   logDetailData.value=obj
   let temp={}
   for (const config of logFromConfig) {
      temp[config.key]=obj[config.key]
   }
   logFormModel.value=temp
   
}


onMounted(() => {
   getMenuModuleDicts({keyword:''}).then((data: any) => {
      let temp=XEUtils.groupBy(data, 'menu')
      for (let t in temp) {
         let tclist=new Array()
         for (let tc of temp[t]){
            tclist.push({value:tc.module,label:tc.module})
         }
         moduleData.value.push({value:t,label:t,children:tclist})
      }
    }).finally(() => {
    });
});

</script>

<style lang="scss" scoped>
.logContent{
   border:1px solid; 
   border-color: #707175; 
   border-radius:5px;
   height: 100%; 
   width: 90%;
   padding-top: 5px;
   padding-left: 10px;
}
</style>
