<script setup lang="ts">
import YlActionDiv from "@/components/yl-action-div.vue";
import { useRequest } from "vue-request";
import { myRequest } from "@/requests/request.ts";
import { userinfo } from "@/store/store.ts";
import { ref, watch } from "vue";

const time = ref<[Date | string, Date | string]>(["", ""]);
const container = ref<string>("");
const message = ref<string>("");
const tableData = ref<
  {
    time: string;
    container_name: string;
    message: string;
  }[]
>([]);
const page = ref(1);
const pageSize = ref(10);

const { data: containerList } = useRequest(() =>
  myRequest(`/admin/logs/log-container-list`, userinfo.token),
);
const { data, run, loading } = useRequest<{
  data: { time: string; container_name: string; message: string }[];
  message: number;
}>(() =>
  myRequest(
    `/admin/logs/sys?start_time=${time.value[0] || ""}&end_time=${time.value[1] || ""}&container_name=${container.value}&message=${message.value}`,
    userinfo.token,
  ),
);
watch([page, pageSize], () => {
  if (data.value) {
    tableData.value = data?.value.data.filter(
      (_, i) =>
        i >= (page.value - 1) * pageSize.value &&
        i < page.value * pageSize.value,
    );
  }
});
watch(data, () => {
  if (data.value) {
    tableData.value = data?.value.data.filter(
      (_, i) =>
        i >= (page.value - 1) * pageSize.value &&
        i < page.value * pageSize.value,
    );
  }
  page.value = 1;
  pageSize.value = 10;
});
watch(time, () => console.log(time.value[0], time.value[1]));
</script>

<template>
  <yl-action-div class-name="flex between">
    <el-select
      style="width: 200px"
      v-model="container"
      clearable
      @clear="container = ''"
    >
      <el-option
        v-for="item in containerList?.data"
        :key="item"
        :value="item"
        :label="item"
      ></el-option>
    </el-select>
    <div>
      <el-date-picker
        v-model="time"
        type="datetimerange"
        value-format="YYYY-MM-DD HH:mm:ss"
        @clear="() => (time = ['', ''])"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </div>
    <el-input
      v-model="message"
      style="width: 400px"
      placeholder="请输入查询关键字"
    />
    <el-button type="primary" @click="run">查询</el-button>
  </yl-action-div>
  <el-scrollbar class="table">
    <el-table :data="tableData" v-loading="loading">
      <el-table-column prop="time" label="时间" width="250px" align="center" />
      <el-table-column
        prop="container_name"
        label="容器名称"
        width="150px"
        align="center"
      />
      <el-table-column prop="message" label="日志信息" show-overflow-tooltip />
    </el-table>
  </el-scrollbar>

  <div class="flex around" style="margin-top: 20px">
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :total="data?.data.length"
      layout="total, sizes, prev, pager, next"
      hide-on-single-page
    />
  </div>
</template>

<style scoped>
.table {
  max-height: calc(100% - 150px);
  overflow-y: auto;
}
</style>
