<template>
  <div class="system-container layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">
      <div class="system-user-search mb15">
        <ext-query-form v-model="state.formQuery" :columns="state.columns" @on-change="loadData(true)"/>
      </div>

      <ext-cron/>
      <ext-table
          :data-list="state.tableData.data"
          :columns="state.columns"
          :border="true"
          :loading="state.tableData.loading">
      </ext-table>

      <ext-page v-model:value="state.pageQuery" @change="loadData(false)"/>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="ErrorLog">
import {reactive, onMounted} from 'vue';
import ExtPage from '/@/components/form/ExtPage.vue'
import {$body} from "/@/utils/request";
import u from '/@/utils/u'
import ExtQueryForm from "/@/components/form/ExtQueryForm.vue";
import ExtTable from "/@/components/form/ExtTable.vue";
import ExtCron from "/@/components/form/ExtCron.vue";

// 定义变量内容
const state = reactive({
  tableData: {
    data: [],
    total: 0,
    loading: false,
  },
  formQuery: {
    nickName: null
  },
  pageQuery: {
    pageIndex: 1,
    pageSize: 10,
    total: 0
  },
  columns: [
    {label: '栈信息', prop: 'stack', type:'expand',width:100,fixed: 'left'},
    {label: '产生时间', width: 180, query: true, prop: 'createAt', type: 'date', conf: {format: (val: any) => u.fmt.fmtDateTime(val)}},
    {label: '浏览器', prop: 'browserName', type: 'text'},
    {label: '接口', prop: 'url', type: 'text'},
    {label: '浏览器', prop: 'userAgent', type: 'text'},
    {label: 'IP', prop: 'ip', type: 'text'},
    {label: '错误简述', prop: 'error',width:300, type: 'text',fixed: 'right'},

  ] as Array<any>
});

// 初始化表格数据
const loadData = (refresh: boolean = false) => {
  if (refresh) {
    state.pageQuery.pageIndex = 1;
  }
  state.tableData.loading = true;
  $body(`/errorLog/list`, {...state.formQuery, ...state.pageQuery}).then((res: any) => {
    let {list, count} = res;
    state.tableData.data = list;
    state.tableData.loading = false;
    state.pageQuery.total = count;
  }).catch(e => {
    console.error(e)
    state.tableData.loading = false;
  })
};


// 页面加载时
onMounted(() => {
  loadData();
});
</script>

<style scoped lang="scss">
.system-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;

    .el-table {
      flex: 1;
    }
  }
}
</style>
