<template>
  <div>
    <div class="title">
      本地数据
      <div class="title_time">{{ currentDate }}</div>
    </div>

    <div class="card">
      <div>
        时间范围&ensp;&ensp;
        <el-date-picker
          size="large"
          v-model="timevalue"
          :shortcuts="shortcuts"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-value="timevalue"
          :disabled-date="pickerOptions"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          @change="getplatformuserlist"
        />
      </div>
    </div>
    <div class="card cardbottom">
      <div>&ensp;</div>
      <el-table :data="tableData.records" style="width: 100%" border @row-click="handleRowClick" show-overflow-tooltip>
        <el-table-column prop="operIp" label="IP" />
        <el-table-column prop="operTime" label="时间" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="method" label="接口" />
        <el-table-column prop="jsonResult" label="响应数据" />
        <el-table-column prop="errorMsg" label="错误消息" />
      </el-table>
      <!-- 分页 组件 -->
      <div class="pagination">
        <div></div>
        <slot name="pagination">
          <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
        </slot>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="导出中" top="300px" width="40%" @close="handleClose">
      <div class="lexce">{{ message }}</div>
      <template #footer>
        <div class="dialog-footer" v-if="excelexport">
          <el-button v-if="excelexport.progress == 0" @click="handleClose">取消导出</el-button>
          <el-button v-if="excelexport.progress == 3" type="primary" @click="handleClose"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<!--  

-->
<script setup lang="ts">
import { LogListpageURL } from "@/api/home/Multisite";
import { onMounted, Ref, ref } from "vue";
// import { useAuthButtons } from "@/hooks/useAuthButtons";
// const { BUTTONS } = useAuthButtons();
// import { Station } from "@/api/interface";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import { TreeNode } from "element-plus";
// import { saveAs } from "file-saver";
// import axios from "axios";

// import { useRouter } from "vue-router";
// const router = useRouter();
// const translate = ref();

// const cities: Ref<Station.todo[]> = ref([]);

const timevalue: Ref<any> = ref([]);

const dialogVisible = ref(false);
const message = ref("");

const timerId = ref();

const excelexport = ref();

const handleClose = async () => {
  if (timerId.value) {
    clearTimeout(timerId.value);
    timerId.value = ""; // 清除引用
    dialogVisible.value = false;
  }
};

const tableData = ref();
const shortcuts = [
  {
    text: "过去7天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 7);
      return [start, end];
    }
  },
  {
    text: "过去1个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 1);
      return [start, end];
    }
  },
  {
    text: "过去3个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 3);
      return [start, end];
    }
  }
];
const pickerOptions = (time: { getTime: (arg0: Date) => number }) => {
  return time.getTime(new Date()) > Date.now();
};
// const head = ref();
const pageable = ref({
  pn: 1,
  ps: 10,
  total: 0
});
// 表格操作 Hooks
const handleSizeChange = async (e: any) => {
  pageable.value.ps = e;
  getplatformuserlist();
};
const handleCurrentChange = async (e: any) => {
  pageable.value.pn = e;

  getplatformuserlist();
};

const currentPath = ref();
const handleRowClick = (node: TreeNode) => {
  // 获取当前点击行的所有父级名称
  const parentNames = getParentNames(tableData.value, node, []);
  console.log("点击的节点: ", node); // 输出当前点击节点
  // 拼接成字符串
  currentPath.value = parentNames?.join("/"); // 不反转顺序，确保路径是从根节点到目标节点的顺序
  console.log("父级路径: ", currentPath.value); // 输出拼接后的父级路径
};

// 明确指定参数类型和返回类型
const getParentNames = (currentNode: any, targetNode: any, parentNames: string[]): string[] | null => {
  // 如果找到了目标节点
  if (currentNode.name === targetNode.name) {
    parentNames.push(currentNode.name); // 添加当前节点的名称到父级路径
    return parentNames;
  }

  // 如果当前节点有子节点，递归查找
  if (currentNode.children && currentNode.children.length) {
    const newParentNames = [...parentNames, currentNode.name]; // 创建新的父级名称数组
    for (let child of currentNode.children) {
      const result = getParentNames(child, targetNode, newParentNames);
      if (result) return result;
    }
  }

  // 如果没有找到，返回 null
  return null;
};

const getplatformuserlist = async () => {
  let obj = {
    operparam: "2f4bc06e-6caf-48f6-a4cc-8ad92becb709",
    page: pageable.value.pn,
    rows: pageable.value.ps,
    stationTime: timevalue.value[1],
    endTime: timevalue.value[0]
  };
  const { data } = await LogListpageURL(obj);

  tableData.value = data;

  // head.value = Object.keys(tableData.value.list[0]);
  pageable.value.total = tableData.value.total;
};
const currentDate = ref();

onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }
  const today = new Date();
  const sevenDaysAgo = new Date(today);
  sevenDaysAgo.setDate(today.getDate() - 7);
  const sevenDaysAgoDate = sevenDaysAgo.toISOString().split("T")[0];

  timevalue.value = [currentDate.value, sevenDaysAgoDate];
  console.log(timevalue.value);

  getplatformuserlist();
  // poststationstationName();
  // selectaccountNumberlist();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>

<!-- 

-->
