<script setup lang="ts">
import { reactive, onMounted, ref, nextTick } from "vue";
import { getErrorLogList } from "@/api/error-log";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

const queryRef = ref();

const state = reactive({
  formQuery: {
    browserName: "",
    url: "",
    startDate: "",
    endDate: ""
  },
  dateRange: [] as string[],
  pageQuery: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  },
  tableData: {
    height: 500,
    data: [] as Array<any>,
    loading: false
  }
});

onMounted(() => {
  loadData();
  nextTick(() => {
    const bodyHeight = document.body.clientHeight;
    const queryHeight = queryRef.value?.$el?.clientHeight || 0;
    state.tableData.height = bodyHeight - queryHeight - 230;
  });
});

const loadData = (refresh: boolean = false) => {
  if (refresh) state.pageQuery.pageNum = 1;

  if (state.dateRange && state.dateRange.length === 2) {
    state.formQuery.startDate = state.dateRange[0];
    state.formQuery.endDate = state.dateRange[1];
  } else {
    state.formQuery.startDate = "";
    state.formQuery.endDate = "";
  }

  state.tableData.loading = true;
  getErrorLogList({ ...state.formQuery, ...state.pageQuery })
    .then((res: any) => {
      const { list, total } = res || {};
      state.tableData.data = list || [];
      state.pageQuery.total = total || 0;
    })
    .catch(() => { state.tableData.data = []; })
    .finally(() => { state.tableData.loading = false; });
};

const handleSizeChange = (size: number) => { state.pageQuery.pageSize = size; loadData(true); };
const handleCurrentChange = (page: number) => { state.pageQuery.pageNum = page; loadData(); };
const handleSearch = () => loadData(true);
const handleReset = () => {
  state.formQuery = { browserName: "", url: "", startDate: "", endDate: "" };
  state.dateRange = [];
  loadData(true);
};
</script>

<template>
  <div class="error-log-container">
    <el-form ref="queryRef" :model="state.formQuery" inline class="search-form">
      <el-form-item label="浏览器">
        <el-input v-model="state.formQuery.browserName" placeholder="请输入浏览器" clearable style="width: 140px" @keyup.enter="handleSearch" />
      </el-form-item>
      <el-form-item label="接口地址">
        <el-input v-model="state.formQuery.url" placeholder="请输入接口地址" clearable style="width: 200px" @keyup.enter="handleSearch" />
      </el-form-item>
      <el-form-item label="产生时间">
        <el-date-picker
          v-model="state.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          style="width: 240px"
          @change="handleSearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="useRenderIcon('ri/search-line')" @click="handleSearch">查询</el-button>
        <el-button :icon="useRenderIcon('ri/refresh-line')" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="state.tableData.loading"
      :data="state.tableData.data"
      :height="state.tableData.height"
      border
      stripe
    >
      <template #empty><el-empty description="暂无数据" /></template>
      <el-table-column type="expand">
        <template #default="{ row }">
          <div class="stack-trace">
            <div class="stack-label">错误详情 (Stack Trace)</div>
            <pre class="stack-content">{{ row.stack || '无详细信息' }}</pre>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="产生时间" prop="createAt" width="180" />
      <el-table-column label="浏览器" prop="browserName" show-overflow-tooltip />
      <el-table-column label="接口地址" prop="url" width="250" show-overflow-tooltip />
      <el-table-column label="UserAgent" prop="userAgent" width="200" show-overflow-tooltip />
      <el-table-column label="IP地址" prop="ip" width="140" />
      <el-table-column label="错误简述" prop="error" min-width="300" show-overflow-tooltip />
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="state.pageQuery.pageNum"
        v-model:page-size="state.pageQuery.pageSize"
        :total="state.pageQuery.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.error-log-container {
  padding: 5px 0;
}

.search-form {
  margin-bottom: 15px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.stack-trace {
  padding: 12px 20px;

  .stack-label {
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--el-text-color-primary);
  }

  .stack-content {
    font-family: "Courier New", monospace;
    font-size: 13px;
    background: var(--el-fill-color-lighter);
    padding: 12px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.5;
    margin: 0;
  }
}
</style>
