<template>
  <div>
    <main-top>
      <div slot="con"></div>
    </main-top>
    <div class="tablecon noSubmune">
      <div class="tablebody">
        <search>
          <div slot="content" class="searchslot">
            <span>操作日期：</span>
            <el-date-picker
              v-model="search.date"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <span>操作者：</span>
            <el-input
              class="elInput paddingmore"
              :maxlength="25"
              show-word-limit
              @keydown.enter.native="getList"
              v-model="search.inputKey"
              placeholder="请输入真实姓名"
            ></el-input>
            <el-button @click="getList" type="primary">查询</el-button>
            <el-button
              @click="
                search = {
                  inputKey: '',
                  date: '',
                }
              "
              >重置</el-button
            >
          </div>
        </search>
        <div class="table">
          <vtable
            :key="'log'"
            :data="data"
            :page="page"
            @pagechange="
              (data) => {
                page.pageNum = data;
              }
            "
            @pagesizechange="
              (data) => {
                page.size = data;
              }
            "
            :tableData="list"
          >
          </vtable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MainTop from "@/components/main-top";
import search from "@/components/search";
import vtable from "@/components/table";
import { raw } from "./data";
import { getSysList } from "@/configue/api";

import { mapGetters } from "vuex";

export default {
  data() {
    return {
      search: {
        inputKey: "",
        date: "",
        state: "",
      },
      list: {},
      page: {
        size: 25,
        pageNum: 1,
      },
    };
  },
  components: {
    MainTop,
    search,
    vtable,
  },
  methods: {
    getList() {
      let { inputKey,date } = this.search;
      getSysList(
        "log",
        {
          date: date,
          pageNum: this.page.pageNum,
          pageSize: this.page.size,
          searchKey: inputKey,
        },
        (data) => {
          this.list = data.data;
        }
      );
    },
  },
  computed: {
    ...mapGetters({
      activeMenu: "activeMenu",
    }),
    data() {
      return raw['log'];
    }
  },
  watch: {
    subMenu: {
      deep: true,
      immediate: true,
      handler: function() {
        this.getAuth(this.activeMenu, "日志");
        this.getList();
      },
    },
    activeMenu: {
      deep: true,
      immediate: true,
      handler: function(newVal) {
        this.getAuth(newVal, "日志");
      },
    },
    page: {
      deep: true,
      handler: function() {
        this.getList();
      },
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
