<template>
    <SearchRow :title="t('log.title')" :add="false" :del="false" @query="query">
        <NoobInput v-model="example.userId" :placeholder="t('log.prop.1')" />
        <NoobDate v-model="example.startTime" :placeholder="t('log.start')" />
        <NoobDate v-model="example.endTime" :placeholder="t('log.stop')" />
    </SearchRow>
    <ListTable @query="query" :props="props" :example="example" :page="true" :data="result"></ListTable>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { Api, PageExample, PageResult, ListTable, SearchRow, NoobInput, NoobDate } from "noob-mengyxu";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();

const { state, commit, dispatch } = useStore();
const { list } = Api.log;
const result = ref(new PageResult());
const example = reactive<any>(new PageExample());

const props = [
    { i18n: 'log.prop.0', type: 'index', width: 80 },
    { i18n: 'log.prop.1', code: 'userId', width: 120 },
    { i18n: 'log.prop.2', code: 'module', width: 120, dict: 'log_module' },
    { i18n: 'log.prop.3', code: 'type', width: 150, dict: 'log_type' },
    { i18n: 'log.prop.4', code: 'time', width: 150 },
    { i18n: 'log.prop.5', code: 'loginIp', width: 180 },
    { i18n: 'log.prop.6', code: 'context', width: 300 }
]

const query = () => {
    list(example).then((rsp: any) => result.value = rsp)
}

onMounted(() => {
    dispatch('getDictMap', ['log_module', 'log_type'])
    query();
});
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>