<template>
	<el-dialog v-model="state.dialogVisible" draggable title="操作日志明细">
		<el-form :model="state.ruleForm" label-width="110px" label-position="left" class="show-info-form">
			<el-divider content-position="left" class="mb20">
				<el-text tag="b" size="large"> 操作信息 </el-text>
			</el-divider>
			<el-row :gutter="30">
				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<el-form-item label="操作时间：">
						{{ formatDate(state.ruleForm.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<el-form-item label="操作人：">
						{{ state.ruleForm.creatorName }}
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<el-form-item label="操作动作：">
						{{ state.ruleForm.name }}
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<el-form-item label="操作地址：">
						{{ state.ruleForm.executeUrl }}
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="操作IP：">
						{{ state.ruleForm.ipUrl }}
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="请求参数：">
						<el-scrollbar>{{state.ruleForm.executeParam}}</el-scrollbar>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider content-position="left" class="mb20">
				<el-text tag="b" size="large"> 结果信息 </el-text>
			</el-divider>
			<el-row :gutter="30">
				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<el-form-item label="操作结果：">
						<el-tag :type="state.ruleForm.statusText === '成功' ? 'success' : 'danger'"> {{ state.ruleForm.statusText }}</el-tag>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="返回结果：">
						<el-scrollbar>{{state.ruleForm.executeResult}}</el-scrollbar>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider content-position="left" class="mb20">
				<el-text tag="b" size="large"> 备注信息 </el-text>
			</el-divider>
			<el-form-item label="备注：">
				{{ state.ruleForm.remark }}
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script lang="ts" setup name="systemLogDetail">
import { reactive } from 'vue';
import { logDetail } from '@/api/system/log';
import { formatDate } from '@/utils/formatTime';
import { isJSON } from '@/utils/tools';
// 定义变量内容
const state = reactive<any>({
	ruleForm: {
		phone: null, // 电话号码
		specialFlag: null,
	},
	dialogVisible: false, // 弹窗显示隐藏
});
// 打开弹窗
const openDialog = async (row: any) => {
	try {
		const res = await logDetail(row.id);
		state.ruleForm = res.result;
		if (state.ruleForm.executeParam) {
			if (isJSON(state.ruleForm.executeParam)) {
				const jsonStr = JSON.parse(state.ruleForm.executeParam);
				state.ruleForm.executeParam = JSON.parse(jsonStr);
			}
		} else {
			state.ruleForm.executeParam = '';
		}
		if (state.ruleForm.executeResult) {
			if (isJSON(state.ruleForm.executeResult)) {
				const jsonStr = JSON.parse(state.ruleForm.executeResult);
				state.ruleForm.executeResult = JSON.parse(jsonStr);
			}
		} else {
			state.ruleForm.executeResult = '';
		}
		state.dialogVisible = true;
	} catch (error) {
		console.log(error);
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
//暴漏变量和方法
defineExpose({ closeDialog, openDialog });
</script>
