<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: 舟舟
 * @Date: 2022-06-25 23:00:54
 * @LastEditors: 舟舟
 * @LastEditTime: 2022-07-27 10:26:33
 * @FilePath: /ouicai_web_framework_vite_ep_nolang/src/views/backend/system/auth/adminLog/info.vue
-->
<template>
    <!-- 查看详情 -->
    <el-dialog
        custom-class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="baTable.form.operate ? true : false"
        @close="baTable.toggleForm"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">查看详情</div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'">
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="id">
                        {{baTable.form.extend!.info.id}}
                    </el-descriptions-item>
                    <el-descriptions-item label="管理员">
                        {{baTable.form.extend!.info.accountName}}
                    </el-descriptions-item>
                    <el-descriptions-item label="标题">
                        {{baTable.form.extend!.info.title}}
                    </el-descriptions-item>
                    <el-descriptions-item label="IP">
                        {{baTable.form.extend!.info.ip}}
                    </el-descriptions-item>
                    <el-descriptions-item :width="120" :span="2" label="URL">
                        {{baTable.form.extend!.info.url}}
                    </el-descriptions-item>
                    <el-descriptions-item :width="120" :span="2" label="User Agent">
                        {{baTable.form.extend!.info.useragent}}
                    </el-descriptions-item>
                    <el-descriptions-item :width="120" :span="2" label="创建时间">
                        {{ timeFormat(baTable.form.extend!.info.createTime) }}
                    </el-descriptions-item>
                    <el-descriptions-item :width="120" :span="2" label="请求数据">
                        <el-tree class="table-el-tree" :data="baTable.form.extend!.info.data" :props="{ label: 'label', children: 'children' }" />
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </el-scrollbar>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject } from 'vue'

import type BaTable from '/@/utils/baTable'
import { timeFormat } from '/@/components/table'

const baTable = inject('baTable') as BaTable


</script>

<style scoped lang="scss">
.table-el-tree {
    :deep(.el-tree-node) {
        white-space: unset;
    }
    :deep(.el-tree-node__content) {
        display: block;
        align-items: unset;
        height: unset;
    }
}
</style>
