<template>
  <div class="app-container role-manage">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="操作时间段" prop="createtime">
        <el-date-picker v-model="state.queryParams.createtime" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery({initPageIndex: true})">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table border v-loading="tableLoading" :data="tableData" row-key="id" style="flex: 1">
      <el-table-column prop="id" label="流水号" min-width="70"></el-table-column>
      <!-- <el-table-column prop="account" label="操作员账号" min-width="100"></el-table-column> -->
      <el-table-column prop="method" label="请求方法" min-width="100" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="mode" label="模式" min-width="120"></el-table-column>
      <!-- <el-table-column prop="terminal" label="终端" min-width="120"></el-table-column> -->
      <el-table-column prop="sendcontent" label="发送参数" width="400" :show-overflow-tooltip="true">
        <template #default="scope">
          <span>{{ scope.row[scope.column.property] ? scope.row[scope.column.property] : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="getcontent" label="返回内容" width="400" :show-overflow-tooltip="true"></el-table-column>
      <!-- <el-table-column prop="ip" label="IP地址" min-width="120"></el-table-column> -->
      <el-table-column prop="account" label="操作人员" min-width="120">
        <template #default="scope">
          <span>{{ scope.row[scope.column.property] ? scope.row[scope.column.property] : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="extime" label="执行时间" min-width="120">
        <template #default="scope">
          <span>{{ scope.row[scope.column.property] ? scope.row[scope.column.property] : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间" min-width="160"></el-table-column>
    </el-table>

    <div class="pagination-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginaionConfig.query.pageindex"
        :page-sizes="paginaionConfig.sizeOptions"
        :page-size="paginaionConfig.query.rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginaionConfig.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup name="OperationLogs">
import useSystemManageStore from '@store/modules/systemManage'
import _ from 'lodash'
import usePagination from '@/hooks/usePagination'
import {transApiQueryTimeRange, getTimeRange} from '@/utils/index'

const {proxy} = getCurrentInstance()
const systemManageStore = useSystemManageStore()
const {paginaionConfig, handleSizeChange, handleCurrentChange} = usePagination(handleQuery)
const initTimeRange = getTimeRange('this', 'DD', 1, 'YYYY-MM-DD HH:mm:ss')

const state = reactive({
  queryParams: {
    createtime: initTimeRange
  }
})
const tableLoading = ref(true)
const tableData = ref([])

/** 查询菜单列表 */
const getList = async (query) => {
  tableLoading.value = true
  const {Total, Data} = await systemManageStore.managelogLoad(query)
  paginaionConfig.total = Total
  tableData.value = Data

  tableLoading.value = false
}

function handleQuery(config) {
  if (config?.initPageIndex) paginaionConfig.query.pageindex = 1
  const timeRange = transApiQueryTimeRange(state.queryParams.createtime, '1')
  getList(Object.assign(_.cloneDeep(paginaionConfig.query), timeRange))
}

onMounted(() => {
  handleQuery({initPageIndex: true})
})
</script>
