<template>
  <div class="app-container">
    <div class="top-bar">
      <SearchBar :config="searchConfig" @search="search" @reset="reset" />
    </div>
    <TablePage
      :data="list.records"
      :tableTitle="tableTitle"
      v-loading="loading"
    >
    </TablePage>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Number(list.current)"
      :page-sizes="[10, 20, 40, 50]"
      :page-size="Number(list.size)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Number(list.total)"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>

<script>
import { title } from "./config";
import { getLogList } from "@/api/log";

export default {
  data() {
    return {
      list: {
        records: [],
        size: 10,
        current: 1,
        total: 0,
      },
      searchForm: {
        name: "",
        status: "",
      },
      searchConfig: [
        { prop: "sourceName", type: "input", label: "资源名称" },
        {
          prop: "sourceType",
          type: "select",
          label: "资源类型",
          selectOptions: [
            {
              label: "文物",
              value: "文物",
            },
            {
              label: "布展",
              value: "布展",
            },
            {
              label: "虚拟展",
              value: "虚拟展",
            },
            {
              label: "博物馆",
              value: "博物馆",
            },
            {
              label: "文创",
              value: "文创",
            },
            {
              label: "角色",
              value: "角色",
            },
            {
              label: "用户",
              value: "用户",
            },
          ],
        },

        {
          prop: "optType",
          type: "select",
          label: "操作类型",
          selectOptions: [
            {
              label: "删除",
              value: "删除",
            },
            {
              label: "修改",
              value: "修改",
            },
            {
              label: "新增",
              value: "新增",
            },
            {
              label: "上架",
              value: "上架",
            },
            {
              label: "下架",
              value: "下架",
            },
            {
              label: "点赞",
              value: "点赞",
            },
            {
              label: "收藏",
              value: "收藏",
            },
            {
              label: "分享",
              value: "分享",
            },
            {
              label: "取消点赞",
              value: "取消点赞",
            },
            {
              label: "取消收藏",
              value: "取消收藏",
            },
            {
              label: "浏览",
              value: "浏览",
            },
          ],
        },

        {
          prop: "createTime",
          type: "dateTimeRange",
          label: "操作日期",
        },
        {
          prop: "ip",
          type: "input",
          label: "用户IP地址",
        },
        // {
        //   prop: "userId",
        //   type: "input",
        //   label: "用户ID",
        // },
        {
          prop: "username",
          type: "input",
          label: "用户名",
        },
      ],
      loading: false,
      searchParams: {},
    };
  },

  computed: {
    tableTitle() {
      return title;
    },
    tableOperations() {
      return operations;
    },
    getStatusTitle(status) {
      return (status) => {
        if (Number(status)) {
          return "是否确定要下架？";
        } else {
          return "是否确定要上架？";
        }
      };
    },
  },
  mounted() {
    this.loadData();
  },
  methods: {
    // 搜索
    async search(form) {
      // 记录搜索的参数
      this.searchParams = form;
      this.resetPage();
      this.loadData(form);
    },

    // 清除分页到初始状态
    resetPage() {
      this.list.current = 1;
    },
    // 重置
    reset() {
      this.searchParams = {};
      this.loadData();
    },

    //  加载表格数据
    async loadData(form) {
      this.loading = true;
      var params = {
        page: this.list.current,
        limit: this.list.size,
      };
      const queryParams = form || this.searchParams;
      if (Object.keys(queryParams)) {
        params = { ...params, ...queryParams };
      }
      let res = await getLogList(params);
      if (res.code == 0) {
        this.list = res.data;
      }
      this.loading = false;
    },

    // 改变页容量
    handleSizeChange(value) {
      this.list.size = value;
      this.loadData();
    },

    // 改变当前显示页
    handleCurrentChange(value) {
      this.list.current = value;
      this.loadData();
    },
  },
};
</script>

<style lang="scss" scoped>
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pagination {
  margin: 16px;
}

::v-deep .el-form-item {
  margin-bottom: 20px !important;
}
</style>
