<template>
    <div class="system-user-container layout-padding">
        <el-card shadow="hover" class="mb10">
            <div class="system-user-search">
                <div class="row">
                    <el-select v-model="state.level" @change="getTableData" placeholder="选择日志等级" size="default">
                        <el-option label="debug" value="debug" />
                        <el-option label="info" value="info" />
                        <el-option label="warn" value="warn" />
                        <el-option label="error" value="error" />
                    </el-select>
                    <el-select style="margin-left: 10px;" v-model="state.count" @change="getTableData" placeholder="选择条数"
                        size="default">
                        <el-option label="500" value="500" />
                        <el-option label="1000" value="1000" />
                        <el-option label="2000" value="2000" />
                    </el-select>
                    <el-date-picker style="margin-left: 10px;" v-model="state.date" value-format="YYYY-MM-DD"
                        @change="getTableData" type="date" placeholder="请选择日期" size="default" />
                </div>

            </div>
        </el-card>
        <el-card shadow="hover" class="bgcolor layout-padding-auto">
            <div v-html="state.infodata" v-if="state.infodata != ''"></div>
            <el-empty description="暂无数据" v-else />
        </el-card>
    </div>
</template>
  
<script setup lang="ts" name="systemLog">
import { defineAsyncComponent, reactive, onMounted, ref } from "vue";
import { ElMessageBox, ElMessage, ElNotification } from "element-plus";
import { getAll } from "/@/api/sys/index";
import { useCurrentInstance } from '/@/method/get'
const { proxy } = useCurrentInstance()
const now = new Date();
const year = now.getFullYear(); // 年
const month = now.getMonth() + 1; // 月
const date = now.getDate(); // 日

const state = reactive<any>({
    date: `${year}-${month < 10 ? '0' + month : month}-${date < 10 ? '0' + date : date}`,
    level: 'info',
    infodata: "",
    count: 500,
    tableData: {
        data: [],
        total: 0,
        loading: false,
        param: {
            pageNum: 1,
            pageSize: 10,
        },
    },
});

// 初始化表格数据
const getTableData = async () => {
    const item = await getAll().syslogApi({
        level: state.level,
        date: state.date,
        count: state.count
    });
    state.infodata = item.data;
};
// 页面加载时
onMounted(() => {
    getTableData();
});
</script>
  
<style scoped lang="scss">
.system-user-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bgcolor {
    font-size: 15px;
    overflow-y: auto;
}
</style>
  