<template>
    <el-dialog v-model="dialogVisible" title="操作记录" width="70vw" center>
        <div>
            <tableComponents ref="tableRef" :tableData="tableData" :tableLoading="tableLoading"
                @currentChange="currentChange" @sizeChange="sizeChange">
                <el-table-column prop="username" label="账号" align="left" />
                <el-table-column prop="userType" label="角色" align="left">
                    <template v-slot="scope">
                        <text v-if="scope.row.userType == 1">管理员</text>
                        <text v-else>普通用户</text>
                    </template>
                </el-table-column>
                <el-table-column prop="behavior" label="操作" align="left" />
                <el-table-column prop="createTime" label="状态操作时间" align="left">
                    <template v-slot="scope">
                        {{ formatDate(new Date(scope.row.createTime),
                            'YYYY年mm月dd日 HH:MM:SS') }}
                    </template>
                </el-table-column>
            </tableComponents>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="hideModal">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, reactive, ref, computed } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { ElMessage, ElMessageBox } from 'element-plus';
import tableComponents from '/@/components/tableComponents/index.vue';
import { useRoute, useRouter } from 'vue-router';
import { doNewLog } from '/@/api/api';
import { formatDate } from '/@/utils/formatTime';

const emit = defineEmits(['handleClose']);
const dialogVisible = ref(false)
const tableLoading = ref(false)
const dataLocal = ref()
const tableData = reactive({
    data: [],
    total: 0,
    page: 1,
    size: 10,
});

async function getData() {
    let { code, data, total } = await doNewLog({
        id: dataLocal.value.id,
        current: tableData.page,
        size: tableData.size,
    });
    console.log("🚀 ~ getData ~ data:", data)
    if (code == 200) {
        tableData.data = data
        tableData.total = total
    }
}

function currentChange(val) {
    tableData.page = val;
    getData();
}

function sizeChange(val) {
    tableData.size = val;
    getData();
}


async function showModal(item) {
    dialogVisible.value = true;
    if (item) {
        dataLocal.value = item
    }

    getData()
}

function hideModal() {
    dialogVisible.value = false;
    emit('handleClose');
}


defineExpose({
    hideModal,
    showModal,
});

</script>

<style scoped lang="scss"></style>
