<template>
  <!-- 数据明细管理 -->
  <div class="dataDetailManagement">
    <div class="searchBox">
      <n-space>
        <n-select v-model:value="searchValue1"
                  placeholder="请选择查询/推送类型"
                  filterable
                  clearable
                  :options="options" />
        <n-input v-model:value="searchValue2"
                 clearable
                 placeholder="请输入请求IP" />
        <n-input v-model:value="searchValue3"
                 clearable
                 placeholder="请输入数据共享名称" />
        <n-input v-model:value="searchValue4"
                 clearable
                 placeholder="请输入查询/推送名称" />
        <n-select v-model:value="searchValue5"
                  filterable
                  clearable
                  placeholder="请选择请求状态"
                  :options="options2" />
        <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"
                    :bordered="false"
                    :max-height="700"
                    striped
                    :columns="columns"
                    :data="data"
                    :remote="true"
                    :pagination="pagination">
      </n-data-table>
    </div>
  </div>
</template>

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

export default {
  name: "dataDetailManagement",
  components: { Search },
  setup() {
    const allData = reactive({
      // 搜索
      searchValue1: null,
      searchValue2: "",
      searchValue3: "",
      searchValue4: "",
      searchValue5: null,
      options: [
        {
          label: "查询",
          value: 1,
        },
        {
          label: "推送",
          value: 2,
        },
      ],
      options2: [
        {
          label: "成功",
          value: 0,
        },
        {
          label: "失败",
          value: 1,
        },
      ],
      timeRange: [
        Date.now() - 30 * 24 * 60 * 60 * 1000,
        Date.now()
      ],
      // 表格
      columns: [
        {
          title: "序号",
          align: "center",
          width: "80",
          render(row, index) {
            return (paginationReactive.page - 1) * paginationReactive.pageSize + index + 1;
          }
        },
        {
          title: "查询/推送名称",
          key: "logRemark",
          align: "center",
        },
        {
          title: "ip地址",
          key: "logIp",
          align: "center",
        },
        {
          title: "数据共享名称",
          key: "proName",
          align: "center",
        },
        {
          title: "推送类型",
          align: "center",
          render(row) {
            return row.methodName == "push_task" ? "推送" : "查询"
          },
        },
        {
          title: "请求状态",
          key: "logStatus",
          align: "center",
          render(row) {
            return row.logStatus == 0 ? "成功" : "失败"
          },
        },
        {
          title: "请求信息",
          key: "logRequest",
          align: "center",
          ellipsis: {
            tooltip: true,
          },
        },
        {
          title: "返回信息",
          key: "logResponse",
          align: "center",
          ellipsis: {
            tooltip: true,
          },
        },
        {
          title: "请求时间",
          key: "createTime",
          align: "center",
        },
      ],
      data: [],
    });

    //分页
    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();
      },
    });
    // 获取表格数据
    const getTableData = async () => {
      let startTime = allData.timeRange ? formatDate(allData.timeRange[0]) : null;
      let endTime = allData.timeRange ? formatDate(allData.timeRange[1]) : null;
      let pramas = {
        current: paginationReactive.page,
        size: paginationReactive.pageSize,
        data: {
          beginTime: startTime,
          endTime: endTime,
          methodType: allData.searchValue1,
          logIp: allData.searchValue2,
          proName: allData.searchValue3,
          logRemark: allData.searchValue4,
          logStatus: allData.searchValue5,
        },
      };
      let res = await sjmxglSearch(pramas);
      if (res && res.code == 200) {
        let datas = res.data;
        allData.data = datas.list;
        paginationReactive.pageCount = datas.pages;
        paginationReactive.itemCount = datas.total;
      }
    };
    const handleClick = (type, row) => {
      switch (type) {
        case "search":
          getTableData();
          break;
      }
    };
    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(allData),
      pagination: paginationReactive,
      getTableData,
      handleClick,
    };
  },
};
</script>

<style lang="less" scoped>
.dataDetailManagement {
  .tableBox {
    margin-top: 10px;
  }
}
</style>