<template>
  <div class="container">
    <direct-search
      ref="form"
      :label-position="'right'"
      :forms="searchList"
      :style="{ textAlign: 'left' }"
      @handleSearch="handleFormSearch"
    />
    <el-table-self
      ref="table"
      :table-data="tableData"
      :columns="columns"
      :list-loading="listLoading"
      :current-page="pageIndex"
      :total-count="total"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :sortChange="sortChange"
      @pageSizeChange="handleSizeChange"
      @currentPageChange="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getLogPage } from "@/api/user";
import directSearch from "@/components/FormComponents/directSearch";
import elTableSelf from "@/components/TabComponents/index";
import paginationMixin from "@/components/TabComponents/mixin";
export default {
  name: "Log",
  mixins: [paginationMixin],
  components: {
    elTableSelf,
    directSearch,
  },
  data() {
    return {
      formEdit: {},
      title: "",
      // 查询列表
      searchList: [
        {
          label: "操作名称",
          type: "input",
          prop: "title",
          placeholder: "请输入操作名称",
        },
        {
          label: "请求方式",
          type: "input",
          prop: "method",
          placeholder: "请输入请求方式",
        },
        {
          label: "参数",
          type: "input",
          prop: "params",
          placeholder: "请输入参数",
        },
        {
          type: "button",
          icon: "el-icon-search",
          value: "查询",
        },
      ],
      tableData: [],
      listLoading: false,
      columns: [
        {
          label: "操作名称",
          value: "title",
          minWidth: 220,
        },
        {
          label: "用户IP",
          value: "remoteAddr",
          minWidth: 180,
        },
        {
          label: "操作人",
          value: "createBy",
          minWidth: 180,
        },
        {
          label: "代理",
          value: "userAgent",
          minWidth: 220,
        },
        {
          label: "请求路径",
          value: "requestUri",
          minWidth: 150,
        },
        {
          label: "请求方式",
          value: "method",
          minWidth: 100,
        },
        {
          label: "请求参数",
          value: "params",
          minWidth: 150,
        },
        {
          label: "异常",
          value: "exception",
          minWidth: 150,
        },
        {
          label: "操作时间",
          value: "createTime",
          minWidth: 150,
          sortable: "custom",
        },
      ],

      cacheForm: {},
    };
  },

  methods: {
    sortChange({ prop, order }) {
      const asc = order ? (order === "ascending" ? true : false) : "";
      const column = order ? prop : "";
      if (column) {
        this.handleSearch({
          "orders[0].asc": asc,
          "orders[0].column": this.$handle.toUnderline(column),
        });
      } else {
        delete this.cacheForm["orders[0].asc"];
        delete this.cacheForm["orders[0].column"];
        this.handleSearch();
      }
    },
    // 查询
    handleFormSearch(form) {
      this.pageIndex = 1;
      this.handleSearch(form);
    },
    // 数据page
    handleSearch(form = {}) {
      this.cacheForm = Object.assign(this.cacheForm, form);
      this.listLoading = true;
      const params = Object.assign({}, this.cacheForm);
      for (let key in params) {
        if (params[key] === "") {
          delete params[key];
        }
      }
      params.current = this.pageIndex;
      params.size = this.pageSize;
      getLogPage(params).then((res) => {
        if (res.code === 1) {
          const d = res.data;
          let total = 0;
          let result = [];
          if (d && d.total > 0) {
            result = d.records;
            total = d.total;
          }
          this.tableData = result;
          this.total = total;
          this.listLoading = false;
        }
      });
    },
  },
  mounted() {
    this.handleFormSearch();
  },
};
</script>

<style lang="scss"></style>