<template>
  <div>
    <div style="margin-top:2px; margin-bottom:15px;" class="inline-block-btn-list">
      <el-date-picker
        class="first-element-btn"
        v-model="filter.time_range"
        type="daterange"
        value-format="timestamp"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="instantPickerOptions"
        @change="onFilterChanged"
      ></el-date-picker>
      <div class="gap-right-8" style="display:inline-block; width:310px;">
        <el-input
          placeholder="输入关键词查找"
          ref="search-bar"
          v-model="filter.keywords"
          class="input-with-select"
          width="200px"
          @keyup.enter.native="onFilterChanged"
        >
          <el-button slot="append" icon="el-icon-search" @click="onFilterChanged"></el-button>
        </el-input>
      </div>
    </div>
    <el-table
      stripe
      v-loading="loading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <!-- @filter-change="filterHandler" -->
      <el-table-column prop="name" label="操作项"></el-table-column>
      <el-table-column prop="comment" label="内容"></el-table-column>
      <el-table-column prop="employee.name" label="操作人"></el-table-column>
      <el-table-column prop="createtime" label="操作时间" :formatter="dateTimeFormatter"></el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total,sizes, prev, pager, next"
      @size-change="handleSizeChange"
      :page-size="pageLimit"
      :page-sizes="[10, 20, 50, 100]"
      :total="totalCount"
      :current-page.sync="currentPage"
      @current-change="changePage"
    ></el-pagination>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      profile: this.$store.getters.user_info,
      currentPage: 1,
      pageLimit: 10,
      totalCount: 0,
      tableData: null,
      loading: false,
      filter: {
        keywords: "",
        time_range: []
      },
      instantPickerOptions: {
        shortcuts: [
          {
            text: "本周",
            onClick(picker) {
              const now = new Date(new Date().toLocaleDateString());
              const start =
                now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000;
              const end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上周",
            onClick(picker) {
              const now = new Date(new Date().toLocaleDateString());
              const start =
                now.getTime() - (now.getDay() + 6) * 24 * 60 * 60 * 1000;
              const end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              const now = new Date();
              const startDate = new Date(now.getFullYear(), now.getMonth(), 1);
              const endDate = new Date(
                now.getFullYear(),
                now.getMonth() + 1,
                0
              );
              picker.$emit("pick", [startDate.getTime(), endDate.getTime()]);
            }
          },
          {
            text: "上月",
            onClick(picker) {
              const now = new Date();
              const startDate = new Date(
                now.getFullYear() - (now.getMonth() > 0 ? 0 : 1),
                (now.getMonth() + 11) % 12,
                1
              );
              const endDate = new Date(now.getFullYear(), now.getMonth(), 0);
              picker.$emit("pick", [startDate.getTime(), endDate.getTime()]);
            }
          }
        ]
      }
    };
  },
  methods: {
    handleSizeChange(val){
      this.pageLimit = val;
      this.onFilterChanged();
    },
    changePage() {
      if (isNaN(this.currentPage) || this.currentPage < 1) {
        return false;
      }
      this.getSystemLog();
    },
    onFilterChanged() {
      this.currentPage = 1;
      this.getSystemLog();
    },
    filterHandler() {},
    getSystemLog() {
      this.loading = true;
      let params = {
        site_id: this.profile.site_id,
        page: this.currentPage,
        offset:
          (this.currentPage == 1 ? 0 : this.currentPage - 1) * this.pageLimit,
        limit: this.pageLimit
      };
      for (let item in this.filter) {
        let value = this.filter[item];
        if (value != null) {
          let valueStr = value.toString();
          if (valueStr && valueStr.length > 0) {
            params[item] = valueStr;
          }
        }
      }
      this.$http('get',"/integral.php/system_log/get_log_list",params)
        .then(response => {
          if (response.status == 200) {
            this.loading = false;
            var jsonData = response.data;
            try {
              this.totalCount = jsonData.data.total;
              this.tableData = jsonData.data.list;
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    dateTimeFormatter: function(row, column, cellValue) {
      return cellValue
        ? this.$moment(cellValue * 1000).format("YYYY-MM-DD HH:mm:ss")
        : "";
    }
  },
  created() {
    this.getSystemLog();
  }
};
</script>
