<!-- 用户登录信息 -->
<template>
    <div class="vue-box submit-box--dialog" style="width: 700px;">
        <!-- ------- 内容部分 ------- -->
        <div class="c-card">
            <el-form label-width="12em">
                <show-info name="账号id：">{{ state.model.id }}</show-info>
                <show-info name="用户id：">{{ state.model.userId }}</show-info>
                <show-info name="账号昵称：">{{ state.model.sysUserUsername }}</show-info>
                <show-info name="头像：" :value="state.model.sysUserAvatar" type="img"></show-info>
                <show-info name="本次登录Token：" :value="state.model.accToken"></show-info>
                <show-info name="登陆IP：" :value="state.model.loginIp"></show-info>
                <show-info name="登录地：" :value="state.model.loginAddress"></show-info>
                <show-info name="登录客户端：" :value="state.model.loginDevice"></show-info>
                <show-info name="所属系统：" :value="state.model.loginSystem"></show-info>
                <show-info name="所属应用：" :value="state.model.sysClientName"></show-info>
                <show-info name="授权地址：" :value="state.model.clientDomain"></show-info>
                <show-info name="创建时间：" :value="state.model.createTime" type="datetime"></show-info>
            </el-form>
        </div>
    </div>
</template>

<script setup name="sp-login-log-info">
import {onMounted} from "vue";

// 获取插值 
const prop = defineProps({
    param: {type: Object}
})

// ------------------ 数据 ------------------
const state = reactive({
    id:  prop.param.id || 0,   // 获取传值id （0=添加，非0=修改）
    model: {},  // 数据 Model
})

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

// ------------------ 函数 ------------------
// 查询 
const f5 = function () {
    sa.ajax('/SysLoginLog/getById?id=' + state.id, function(res) {
        if(res.data == null) {
            return sa.alert('未能查找到 id=' + state.id + " 详细数据");
        }
        state.model = res.data;
    });
}

</script>

<style scoped>

</style>
