<template>
  <div class="container-wrapper" style="padding: 24px">
    <div class="title">操作日志</div>
    <div class="content">
      <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort="{prop: 'id', order: 'descending'}"
          @row-click="rowClick"
      >
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="operation" label="操作"></el-table-column>
        <el-table-column prop="time" label="时间"></el-table-column>
        <el-table-column prop="method" label="方法"></el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <Mask :is-show="isShow" :width="800" :height="500">
      <Detail @close="isShow = false"/>
    </Mask>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {post} from '@/utils/request.ts'
import Mask from "@/components/Mask.vue";
import Detail from "@/components/settings/Detail.vue";
const tableData = ref<any>([
  {
    id: 1,
    username: 'admin',
    operation: '新增用户',
    time: '2021-01-01 00:00:00',
  }
])
onMounted(()=>{
  init()
})
const init=()=>{
  const params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  }
  // post("",{params:params}).then((res:any)=>{
  //   tableData.value=res
  // })
}
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
const handleCurrentChange = (val: any) => {
  currentPage.value = val
}
const isShow = ref(false)
const rowClick=(row:any)=>{
  isShow.value=true
  console.log(row,'ROW')
}
</script>
<style scoped lang="scss">
.container-wrapper{
  display: flex;
  flex-direction: column;
  .title{
    font-size: 20px;
    height: 60px;
    line-height: 60px;
    background: #fff;
    font-weight: 500;
  }
  .content{
    flex: 1;
    background: #fff;
  }
  .pagination{
    height: 60px;
    background: #fff;
    border-top: 1px solid #ebeef5;
    display: flex;
    align-items: center;
  }
}

</style>