<script setup lang="ts">
import { sysLog } from "@/pages/sys-log/store.ts";
import { userinfo } from "@/store/store.ts";
import { useRequest } from "vue-request";
import { myRequest } from "@/requests/request.ts";
import YlLine from "@/components/charts/yl-line.vue";
import YlSysLogDetail from "@/pages/sys-log/yl-nginx-log-detail.vue";

const { data, loading } = useRequest<{
  data: { name: string; value: number }[];
}>(() => myRequest(`/admin/logs`, userinfo.token));
const chgDate = (index: number) => {
  sysLog.date = data?.value ? data.value.data.map((e) => e.name)[index] : "";
};
</script>

<template>
  <div class="date-view" v-loading="loading">
    <yl-line
      v-if="data?.data && data.data.length"
      :x-data="data.data.map((e) => e.name)"
      :y-data="[{ name: '', value: data.data.map((e) => e.value) }]"
      :set-index="chgDate"
      clickable
      smooth
      :span-limit="30"
    />
    <el-empty v-else />
    <yl-sys-log-detail v-if="sysLog.date" />
  </div>
</template>

<style scoped>
.date-view {
  padding: 10px 20px;
  height: 200px;
}
</style>
