<template>
  <div>
    <div class="searchBox">
      <div>
        <DatePicker
          type="datetimerange"
          v-model="logSearch.dateRange"
          format="yyyy-MM-dd HH:mm"
          split-panels
          placeholder="请输入时间范围"
          style="width: 300px"
          @on-change="searchList()"
          :options="searchOption"
        />
        <Input
          v-model="logSearch.loginname"
          @on-search="searchList()"
          placeholder="请输入登录账号或用户姓名"
          style="margin: 0 16px; width: 240px"
          clearable
          search
        />
        <!-- <Button type="primary" @click="searchList()">搜索</Button> -->
      </div>
    </div>
    <Table border :columns="logColumns" :data="logSearch.list">
      <template slot-scope="{ row }" slot="loginstateSlot">
        <span>{{ row.loginstate === 1 ? "成功" : "失败" }}</span>
      </template>
      <template slot-scope="{ row }" slot="logtimeSlot">
        <span>{{ dateFormat(row.logtime) }}</span>
      </template>
    </Table>
    <div class="foot_page" v-if="logSearch.total > 0">
      <Page
        :total="logSearch.total"
        @on-change="changePage"
        :current="logSearch.page"
        show-total
      ></Page>
    </div>
  </div>
</template>

<script>
import { list_log } from "@/api";
import { dateFormat, getSecondsFromDate } from "@/utils";
export default {
  data() {
    return {
      dateFormat,
      logSearch: {
        dateRange: [],
        loginname: "",
        page: 1,
        size: 10,
        total: 0,
        list: []
      },
      logColumns: [
        {
          title: "序号",
          width: 70,
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.logSearch.page - 1) * this.logSearch.size + 1
            );
          }
        },
        {
          title: "用户姓名",
          key: "username",
          width: 100
        },
        {
          title: "登录账号",
          key: "loginname",
          width: 140
        },
        {
          title: "登录状态",
          slot: "loginstateSlot",
          width: 100
        },
        {
          title: "登录地址",
          key: "logaddress"
        },
        {
          title: "登录IP",
          key: "logip",
          width: 140
        },
        {
          title: "登录时间",
          slot: "logtimeSlot",
          width: 180
        },
        {
          title: "备注",
          key: "logtxt"
        }
      ],
      userInfo: {},
      searchOption: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      }
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("xhWebAdminUser"));
    this.getLogList();
  },
  methods: {
    searchList() {
      this.logSearch.page = 1;
      this.getLogList();
    },
    getLogList() {
      let logtime = this.logSearch.dateRange[0]
        ? getSecondsFromDate(this.logSearch.dateRange[0])
        : null;
      let endtime = this.logSearch.dateRange[1]
        ? getSecondsFromDate(this.logSearch.dateRange[1])
        : null;
      list_log({
        logtime,
        endtime,
        loginname: this.logSearch.loginname,
        page: this.logSearch.page,
        size: this.logSearch.size
      })
        .then((data) => {
          if (data.code === 0) {
            this.logSearch.total = data.obj.total;
            this.logSearch.list = data.obj.list;
          } else {
            this.logSearch.total = 0;
            this.logSearch.list = [];
            this.$Message.error(data.msg);
          }
        })
        .catch(() => {});
    },
    changePage(page) {
      this.logSearch.page = page;
      this.getLogList();
    }
  }
};
</script>

<style scoped lang="less">
.searchBox {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
}
.foot_page {
  padding: 16px 0;
  text-align: right;
}
</style>
