<template>
  <div style="padding:10px">
    <q-card inline class="fit shadow-6">
      <q-card-main style="height:80%">
        <q-table ref="table" color="primary" :data="serverData" :columns="columns" row-key="id" :pagination.sync="serverPagination" @request="request"
                 :loading="loading" :rows-per-page-label="$t('Rows per page')" :no-data-label="$t('No data')">
          <template slot="top-left" slot-scope="props">
             <q-input v-model="filter.username"  type="text" :prefix="$t('Account') + '：'" />&nbsp;&nbsp;
             <q-input v-model="filter.operatetype"  type="text" :prefix="$t('Operatetype') + '：'" />&nbsp;&nbsp;
             <q-datetime v-model="filter.operatetime"  type="date" :prefix="$t('Operatetime') + '：'" />&nbsp;&nbsp;
             <q-btn push dense color="primary" icon="search" @click="search">{{$t('Search')}}</q-btn>&nbsp;&nbsp;
          </template>
          <template slot="top-right" slot-scope="props">
            <q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen" />  
          </template>
          <q-td slot="body-cell-operatetime" slot-scope="props" :props="props">
            {{formatDate(props.value)}}
          </q-td>
        </q-table>
      </q-card-main>
    </q-card>
  </div>
</template>

<script>
import { getRequestLogPagedList } from "@/service/other/requestlog";
import { date } from "quasar";
export default {
  name: "requestlog",
  data() {
    return {
      serverData: [],
      serverPagination: {
        page: 1,
        rowsNumber: 0, // specifying this determines pagination is server-side
        rowsPerPage: 10,
        descending: true // current rows per page being displayed
      },
      filter:{
        username:'',
        operatetype:'',
        operatetime:''
      },
columns: [
        {
          name: "username",
          required: true,
          label: "员工工号",
          align: "left",
          field: "username"
        },
        {
          name: "ip",
          required: true,
          label: "IP",
          align: "left",
          field: "ip"
        },
        {
          name: "operatetype",
          label: "操作类型",
          field: "operatetype",
          align: "left"
        },
        {
          name: "operatetime",
          label: "操作时间",
          field: "operatetime",
          align: "left"
        },
        {
          name: "operatecontent",
          label: "操作说明",
          field: "operatecontent",
          align: "left"
        }
      ],
      loading: false
    };
  },
  methods: {
    async request(props) {
      this.loading = true;
      this.serverPagination = props.pagination;
      let table = this.$refs.table,
        { page, rowsPerPage, sortBy, descending } = props.pagination;
      let query = {
        pageIndex: page,
        pageSize: rowsPerPage,
        sortBy: sortBy,
        descending: descending,
        username:this.filter.username,
        operatetype:this.filter.operatetype,
        operatetime:date.formatDate(this.filter.operatetime,"YYYY-MM-DD")
      };
      let dataRes = await getRequestLogPagedList(query);
      let data = dataRes.data.data;
      this.serverPagination.rowsNumber = data.total;
      this.serverData = data.list;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    formatDate(timeStamp) {
      return date.formatDate(timeStamp, "YYYY-MM-DD HH:mm:ss");
    },
    search(){
       this.request({
          pagination: this.serverPagination
       });
    }
  },

  mounted() {
    this.request({
      pagination: this.serverPagination
    });
  }
};
</script>
