<!-- 用户 登录日志 -->
<template>
    <el-scrollbar class="vue-box">
        <div class="c-card">
            <h4 class="c-title">用户登录日志</h4>
            <!-- ------------- 查询条件 ------------- -->
            <el-form class="select-form" :inline="true" label-width="7em" @keyup.enter="state.p.pageNo = 1; f5();">
                <in-input type="num" name="记录id：" v-model="state.p.id"></in-input>
                <in-input type="num" name="账号id：" v-model="state.p.userId"></in-input>
                <in-input type="text" name="应用id：" v-model="state.p.clientId"></in-input>
                <in-item class="ok-item">
                    <el-button type="primary" icon="el-icon-Search" @click="state.p.pageNo = 1; f5();">查询</el-button>
                </in-item>
                <br />
                <in-input type="text" name="登录Token：" v-model="state.p.accToken"></in-input>
                <in-input type="text" name="登陆IP：" v-model="state.p.loginIp"></in-input>
            </el-form>
            <!-- ------------- 操作按钮 ------------- -->
            <div class="fast-btn">
                <el-button type="primary" plain icon="el-icon-Download" @click="sa.exportExcel()">导出</el-button>
                <el-button type="danger" plain icon="el-icon-Delete" @click="deleteByIds">批量删除</el-button>
                <el-button type="default" plain icon="el-icon-Refresh" @click="sa.f5CurrView()">重置</el-button>
            </div>
            <!-- ------------- 数据表格 ------------- -->
            <el-table :data="state.dataList" class="data-table" ref="data-table" row-key="id">
                <td-info type="selection"></td-info>
                <td-info name="记录id" prop="id" width="90px"></td-info>
                <td-info name="登录账号" width="200px">
                    <template #default="s">
                        <div v-if="sa.isNull(s.row.sysUserUsername)">未知</div>
                        <template v-else>
                            <img
                                :src="s.row.sysUserAvatar" @click="sa.showImage(s.row.sysUserAvatar, '400px', '400px')"
                                class="td-img" style="vertical-align: middle; margin-right: 8px;" alt="img" />
                            <el-link 
                                type="primary" 
                                @click="sa.showModel('id = ' + s.row.userId + ' 详细信息', import('../sys-user/sys-user-info.vue'), {id: s.row.userId})">
                                <b style="font-weight: 400;">{{ s.row.sysUserUsername }}</b>
                            </el-link>
                        </template>
                    </template>
                </td-info>
                <td-info name="登录应用" width="240px">
                    <template #default="s">
                        <div v-if="sa.isNull(s.row.sysClientName)">未知</div>
                        <template v-else>
                            <img
                                :src="s.row.sysClientLogo" @click="sa.showImage(s.row.sysClientLogo, '400px', '400px')"
                                class="td-img" style="vertical-align: middle; margin-right: 8px;" alt="img" />
                            <el-link 
                                type="primary"
                                @click="sa.showModel('id = ' + s.row.clientId + ' 详细信息', import('../sys-client/sys-client-info.vue'), {id: s.row.clientId})">
                                <b style="font-weight: 400;">{{ s.row.sysClientName }}</b>
                            </el-link>
                        </template>
                    </template>
                </td-info>
                <td-info name="登陆IP" prop="loginIp" width="140px"></td-info>
                <td-info name="登录地" prop="loginAddress"></td-info>
                <!-- <sa-td name="登录IP" width="260px">
                    <template slot-scope="s">
                        <p>{{s.row.loginIp}} （{{s.row.address}}）</p>
                    </template>
                </sa-td> -->
                <!-- <sa-td name="客户端标识" prop="device"></sa-td> -->
                <!-- <sa-td name="所属系统" prop="system"></sa-td> -->
                <td-info name="设备信息" width="180px">
                    <template #default="s">
                        <p>设备：{{ s.row.loginDevice }}</p>
                        <p>系统：{{ s.row.loginSystem }}</p>
                    </template>
                </td-info>
                <td-info name="本次登录Token" prop="accToken" width="170px"></td-info>
                <!-- <sa-td name="授权地址" prop="clientDomain"></sa-td> -->
                <td-info name="登录时间" width="220px">
                    <template #default="s">
                        <span>{{ sa.forDate(s.row.createTime, 2) }}</span> -
                        <b style="color: green;">{{ sa.isNull(sa.forDate2(s.row.createTime), '无') }}</b>
                    </template>
                </td-info>
                <el-table-column label="操作" fixed="right" width="160px">
                    <template #default="s">
                        <el-button class="c-btn" plain type="success" icon="el-icon-View" @click="get(s.row)">查看</el-button>
                        <el-button class="c-btn" plain type="danger" icon="el-icon-Delete" @click="del(s.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- ------------- 分页按钮 ------------- -->
            <div class="page-box">
                <el-pagination
                    background layout="total, prev, pager, next, sizes, jumper"
                    v-model:current-page="state.p.pageNo" v-model:page-size="state.p.pageSize" :total="state.dataCount"
                    :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                    @current-change="f5()" @size-change="f5()">
                </el-pagination>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup name="sys-login-log">
import TdInfo from '../../sa-frame/com/td/td-info';
import InInput from "../../sa-frame/com/in/in-input";
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import router from "../../router";
const { proxy } = getCurrentInstance();

// ------------------ 数据 ------------------
const state = reactive({
    p: {    // 查询条件
        id: '',		// id号 
        userId: router.currentRoute.value.meta.userId || '',		// 管理员id
        accToken: '',		// 本次登录Token 
        loginIp: '',		// 登陆IP 
        clientDomain: '',		// Client端域名 
        clientId: '',		// 应用id 
        pageNo: 1,		// 当前页 
        pageSize: 10,	// 页大小 
        sortType: 0		// 排序方式 
    },
    dataCount: 0, // 数据总数
    dataList: [], // 数据表格 
})

// 组件加载时触发
onMounted(() => {
    f5();
})

// ------------------ 查找数据 ------------------
const f5 = function() {
    sa.ajax('/SysLoginLog/getList', state.p, function(res) {
        state.dataList = res.data;	// 数据
        state.dataCount = res.dataCount;
    });
};

// 查看
const get = function(data) {
    sa.showModel('数据详情', import('./sys-login-log-info.vue'), {id: data.id});
};

// 删除
const del = function(data) {
    sa.confirm('是否删除，此操作不可撤销', function(){
        sa.ajax('/SysLoginLog/delete', { id: data.id }, function(res){
            sa.arrayDelete(state.dataList, data);
            sa.ok('删除成功');
        })
    });
};
// 批量删除
const deleteByIds = function() {
    // 获取选中元素的id列表
    let selection = proxy.$refs['data-table'].getSelectionRows();
    let ids = sa.getArrayField(selection, 'id');
    if(selection.length === 0) {
        return sa.msg('请至少选择一条数据');
    }
    // 提交删除
    sa.confirm(`是否删除选中的 ${selection.length} 条数据？此操作不可撤销`, function() {
        sa.ajax('/SysLoginLog/deleteByIds', { ids: ids.join(',') }, function(res) {
            sa.arrayDelete(state.dataList, selection);
            sa.ok('删除成功');
        })
    });
};

// 对外开放函数 
defineExpose({f5})

</script>

<style scoped lang="scss">

</style>
