<template>
  <div class="template_content">
    <!-- 搜索 -->
    <div class="search_box">
      <a-form layout="inline">
        <a-form-item label="查询条件">
          <a-select
            v-model="searchPage.type"
            style="width: 120px"
          >
            <a-select-option
              v-for="item in logType"
              :key="item.label"
              :value="item.value"
            >{{item.label}}</a-select-option>
          </a-select>
          
        </a-form-item>
        <a-form-item>
          <a-input v-if="searchPage.type != 'dayRange'" v-model="searchPage.condition" placeholder="请输入查询条件" allowClear></a-input>
          <a-range-picker v-if="searchPage.type == 'dayRange'" @change="onDayRangeChange" />
        </a-form-item>
        <a-form-item>
          <a-button icon="search" type="primary" @click="handleSubmit">查询</a-button>
        </a-form-item>
      </a-form>
    </div>
    <!-- 主体内容 -->
    <div class="content_box">
      <a-table
        :columns="columns"
        :dataSource="data"
        :loading="loading"
        :pagination="pagination"
        bordered
        size="small"
        @change="handleTableChange"
        rowKey="id"
      >
      </a-table>
    </div>
    
  </div>
</template>
<script>
// 导入接口
import { fetchList } from "@/api/admin/log";
import { disposereq ,timestampToTime,datetinmeToTimestamp} from "@/utils/util";
let columns= [
  {
    title: "用户名",
    dataIndex: "username",
    align: "center"
  },
  {
    title: "操作名称",
    dataIndex: "operation",
    align: "center"
  },
  {
    title: "方法名称",
    dataIndex: "method",
    align: "center",
    ellipsis: true,
  },
  {
    title: "参数",
    dataIndex: "params",
    align: "center",
    ellipsis: true,
  },
  {
    title: "执行时间",
    dataIndex: "time",
    align: "center"
  },
  {
    title: "IP地址",
    dataIndex: "ip",
    align: "center"
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    customRender: (text,record) => {
      return timestampToTime(text);
    }
  },

];

export default {
  data() {
    return {
      logType: [
        {
          label: '用户名称',
          value: 'username'
        },
        {
          label: '操作名称',
          value: 'operation'
        },
        {
          label: '方法名称',
          value: 'method'
        },
        {
          label: '时间范围',
          value: 'dayRange'
        }
        
      ],
      loading: true,
      searchPage: {
        type: "username",
        pageIndex: 1,
        pageSize: 10,
        condition: "",
        start: "",
        end: ""
      },
      columns: columns,
      data: [],
      pagination: {
        showQuickJumper: true,
        showSizeChanger: true
      },
      
      modalForm: this.$form.createForm(this, { name: "coordinated" })
    };
  },
  // 创建完毕
  created() {

    this.getList(this.searchPage);
  },
  // 即将更新渲染
  beforeUpdate() {

  },
  methods: {
    onDayRangeChange(date, dateString){
      // console.log(datetinmeToTimestamp(dateString[0]+' 00:00:00'));
      // console.log(datetinmeToTimestamp(dateString[1]+' 23:59:59'));
      this.searchPage.start = datetinmeToTimestamp(dateString[0]+' 00:00:00');
      this.searchPage.end = datetinmeToTimestamp(dateString[1]+' 23:59:59');
    },
    // 获取日志
    getList(pageData) {
      fetchList(pageData)
        .then(res => {
          this.loading = false;
          if (res.code == 200) {
            this.data = res.data;
            const pager = { ...this.pagination };
            pager.current = pageData.pageIndex;
            pager.total = res.count;
            this.pagination = pager;
          } else {
            this.$message.info(res.resp_msg);
          }
        })
        .catch(err => {
          disposereq(this, err);
        });
    },
    // 表格数据变化触发事件
    handleTableChange(pagination, filters, sorter) {
      const searchPage = { ...this.searchPage };
      searchPage.pageIndex = pagination.current;
      searchPage.pageSize = pagination.pageSize;
      this.loading = true;
      this.getList(searchPage);
    },
    // 搜索事件
    handleSubmit() {
      const searchPage = { ...this.searchPage };
      this.loading = true;
      this.getList(searchPage);
    },
    
  }
};
</script>
<style>
.search_box {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  background-color: #fff;
}
.template_content {
  background-color: #f0f2f5;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.content_box {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 14px;
}
.table_top {
  padding-bottom: 14px;
}
.btn_margin {
  margin: 0px 5px;
}
.btn_right_margin {
  margin-right: 10px;
}
</style>