<template>
  <div id="root">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="操作类型">
        <el-select v-model="formInline.logType" placeholder="操作类型">
          <el-option label="账号相关操作" value="shanghai"/>
          <el-option label="话题相关操作" value="beijing"/>
          <el-option label="工单相关操作" value="beijing"/>
          <el-option label="费用相关操作" value="beijing"/>
          <el-option label="其他操作" value="beijing"/>
        </el-select>
      </el-form-item>
      <el-form-item label="日志关键字">
        <el-input v-model="formInline.logContext" placeholder="日志关键字"/>
      </el-form-item>
      <el-form-item label="日志日期">
        <el-date-picker
          v-model="formInline.logDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
      </el-form-item>
      <el-form-item>
        <el-button type="info">清空</el-button>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="logData"
      border
      style="width: 100%">
      <el-table-column
        prop="date"
        label="编号"
        width="180"/>
      <el-table-column
        prop="name"
        label="操作类型"
        width="180"/>
      <el-table-column
        prop="address"
        label="日志类型"/>
      <el-table-column
        prop="address"
        label="日志时间"/>
    </el-table>

    <div class="footer-page">
      <el-pagination
        :current-page="formInline.pageNum"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="formInline.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserLog',
  data() {
    return {
      formInline: {
        logDate: '',
        logContext: '',
        logType: '',
        pageNum: 0,
        pageSize: 10
      },
      total: 0, // 总数
      logData: [] // 数据
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped>
.demo-form-inline {
  margin-top: 20px;
  margin-left: 20px;
}
.footer-page {
  display: flex;
  justify-content: flex-end;
}
</style>
