<template>
  <div id="app-container">
    <el-button size="small" @click="back" type="primary" plain icon="back"
      >返回</el-button
    >
    <el-form
      class="query-form"
      inline
      size="small"
      :model="queryParams"
      ref="queryParamsRef"
    >
      <el-form-item>
        <el-date-picker
          v-model="queryParams.startTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择开始时间"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="queryParams.endTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择结束时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="handleSearch"
          >搜索
        </el-button>
        <el-button type="primary" icon="refresh" @click="resetQuery"
          >重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="logList" v-loading>
      <el-table-column label="访问时间" prop="visitTime"></el-table-column>
      <el-table-column label="访问IP" prop="visitIp"></el-table-column>
      <el-table-column label="访问地区" prop="visitAddress"></el-table-column>
      <el-table-column label="访问设备" prop="visitDevice"></el-table-column>
      <el-table-column label="访问后缀" prop="urlSuffix"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        :page-size="queryParams.pageSize"
        :current-page="queryParams.pageNum"
        @update:current-page="handleCurrentChange"
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>

<script setup name="AccessRecords" lang="ts">
import { reactive, ref, toRefs } from "vue";
import { listLogList } from "@/api/shortlink";
import type { LogListParams } from "@/models/LogListParams";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const logList = ref([]);
const total = ref(0);
const data = reactive<{ queryParams: LogListParams }>({
  queryParams: {
    urlSuffix: route.params.suffix as string,
    pageNum: 1,
    pageSize: 10,
  },
});

const { queryParams } = toRefs(data);
const getList = async () => {
  const resp = await listLogList(queryParams.value);
  logList.value = resp.data.rows;
  total.value = resp.data.total;
};
const queryParamsRef = ref();
const resetQuery = () => {
  queryParams.value = {
    urlSuffix: route.params.suffix as string,
    pageNum: 1,
    pageSize: 10,
  };
  if (queryParamsRef.value) {
    queryParamsRef.value.resetFields();
  }
  getList();
};
const handleSearch = () => {
  queryParams.value.pageNum = 1;
  getList();
};
const handleCurrentChange = (page: number) => {
  queryParams.value.pageNum = page;
  getList();
};
const back = () => {
  router.push("/");
};
getList();
</script>
<style scoped lang="scss">
#app-container {
  padding: 20px;

  .query-form {
    margin-top: 10px;
  }

  .pagination {
    margin-top: 20px;
    margin-right: 10px;
    display: flex;
    justify-content: end;
  }
}
</style>
