<template>
  <div class="journal-container">
    <div class="header">
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-input v-model="searchForm.name" placeholder="用户名" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.operation" placeholder="操作内容" />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchForm.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="body">
      <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="id" label="序号" width="80" align="center" />
        <el-table-column prop="createTime" label="创建时间" width="180" align="center" />
        <el-table-column prop="username" label="用户名" width="120" align="center" />
        <el-table-column prop="operation" label="操作" align="center" />
        <el-table-column prop="ip" label="IP地址" width="140" align="center" />
      </el-table>

      <div class="pagination">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Journal',
  data() {
    return {
      searchForm: {
        name: '',
        operation: '',
        time: []
      },
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    handleSearch() {
      // 实现查询逻辑
    },
    handleSizeChange(val) {
      this.pageSize = val
      // 重新加载数据
    },
    handleCurrentChange(val) {
      this.page = val
      // 重新加载数据
    }
  }
}
</script>

<style lang="scss" scoped>
.journal-container {
  padding: 20px;
  background: #fff;
  
  .header {
    margin-bottom: 20px;
  }

  .pagination {
    margin-top: 20px;
    text-align: right;
  }
}
</style>
