<template>
  <!-- 数据访问统计 -->
  <div class="visitStatisticss">
    <div class="searchBox">
      <n-space>
        <n-select placeholder="请选择查询推送类型"
                  v-model:value="searchValue1"
                  style="width: 200px"
                  :options="tsList"
                  clearable>
        </n-select>
        <n-input placeholder="输入请求ip"
                 v-model:value="searchValue2"
                 autosize
                 clearable
                 style="width: 200px" />
        <n-input placeholder="输入数据共享名称"
                 v-model:value="searchValue3"
                 autosize
                 clearable
                 style="width: 200px" />
        <n-input placeholder="输入请求推送名称"
                 v-model:value="searchValue4"
                 autosize
                 clearable
                 style="width: 200px" />
        <n-date-picker v-model:value="timeRange"
                       type="datetimerange"
                       clearable />
        <n-button type="primary"
                  @click="handleClick('search')">
          <template #icon>
            <n-icon>
              <Search />
            </n-icon>
          </template>搜索
        </n-button>
      </n-space>
    </div>
    <div class="tableBox">
      <n-data-table ref="tableRef"
                    max-height="400"
                    :bordered="false"
                    :columns="columns"
                    :loading="tableLoading"
                    :data="tableData"
                    :pagination="pagination">
      </n-data-table>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { Search, } from "@vicons/ionicons5";
import { formatDate } from "@/utils/util";
import { sjfwtjSearch } from "@/services"

export default {
  name: "visitStatistics",
  components: {
    Search
  },
  setup() {
    const allData = reactive({
      searchValue1: null,
      searchValue2: "",
      searchValue3: "",
      searchValue4: "",
      tableLoading: true,
      tsList: [
        { value: 1, label: "查询" },
        { value: 2, label: "推送" },
      ],
      timeRange: [
        Date.now() - 30 * 24 * 3600 * 1000,
        Date.now()
      ],
      //   表格相关
      columns: [
        {
          title: "序号",
          align: "center",
          width: "80",
          render(row, index) {
            return (paginationReactive.page - 1) * paginationReactive.pageSize + index + 1;
          }
        },
        {
          title: "查询/推送名称",
          key: "name",
          align: "center",
        },
        {
          title: "请求ip",
          key: "logIp",
          align: "center",
        },
        {
          title: "数据共享名称",
          key: "proName",
          align: "center",
        },
        {
          title: "类型",
          key: "methodType",
          align: "center",
          render(row) {
            return row.methodName == "push_task" ? "推送" : "查询"
          },
        },
        {
          title: "成功次数",
          key: "okNum",
          align: "center",
        },
        {
          title: "失败次数",
          key: "errorNum",
          align: "center",
        },
      ],
      tableData: [],
    });
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      onChange: (page) => {
        paginationReactive.page = page;
        getTableData();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        getTableData();
      },
    });
    // 搜索
    async function getTableData() {
      allData.tableLoading = true;
      let startTime = allData.timeRange ? formatDate(allData.timeRange[0]) : null;
      let endTime = allData.timeRange ? formatDate(allData.timeRange[1]) : null;
      let params = {
        current: paginationReactive.page,
        size: paginationReactive.pageSize,
        data: {
          beginTime: startTime,
          endTime: endTime,
          methodType: allData.searchValue1,
          logIp: allData.searchValue2,
          proName: allData.searchValue3,
          logRemark: allData.searchValue4,
        }
      }
      let res = await sjfwtjSearch(params);
      if (res && res.code == 200) {
        let datas = res.data;
        allData.tableData = datas.list;
        paginationReactive.pageCount = datas.pages;
        paginationReactive.itemCount = datas.total;
      }
      allData.tableLoading = false;
    }
    async function handleClick(type) {
      switch (type) {
        case "search":
          getTableData();
          break;
      }
    }
    onMounted(() => {
      getTableData();
    })
    return {
      ...toRefs(allData),
      pagination: paginationReactive,
      handleClick,
    };
  },
};
</script>

<style lang="less">
.visitStatisticss {
  .searchBox {
    margin-bottom: 20px;
  }
  .tableBox {
    margin-top: 30px;
  }
}
</style>