<template>
  <div>
    <el-dialog v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="768px" draggable>
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <span>详情</span>
        </div>
      </template>
      <el-descriptions class="margin-top" title="" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">操作模块</div>
          </template>
          {{ state.resdata.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">操作类型</div>
          </template>
          {{ state.resdata.operationType }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">操作状态</div>
          </template>
          <el-tag type="success" size="small" v-if="state.resdata.status == 1"
            >成功</el-tag
          >
          <el-tag type="danger" size="small" v-else>失败</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">消耗时间</div>
          </template>
          {{ state.resdata.useTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">请求方式</div>
          </template>
          {{ state.resdata.httpMethod }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">登录地址</div>
          </template>
          {{ state.resdata.remoteAddr }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">操作人员</div>
          </template>
          {{ state.resdata.username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">操作时间</div>
          </template>
          {{ formatDate(state.resdata.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item :span="4">
          <template #label>
            <div class="cell-item">浏览器</div>
          </template>
          {{ state.resdata.browser }}
        </el-descriptions-item>
        <el-descriptions-item :span="4">
          <template #label>
            <div class="cell-item">登录地区</div>
          </template>
          {{ state.resdata.area }}
        </el-descriptions-item>
        <el-descriptions-item :span="4">
          <template #label>
            <div class="cell-item">请求地址</div>
          </template>
          {{ state.resdata.requestUri }}
        </el-descriptions-item>
        <el-descriptions-item :span="4">
          <template #label>
            <div class="cell-item">请求方法</div>
          </template>
          {{ state.resdata.classMethod }}
        </el-descriptions-item>
        <el-descriptions-item :span="4">
          <template #label>
            <div class="cell-item">请求参数</div>
          </template>
          {{ JSON.parse(state.resdata.queryParams) }}
        </el-descriptions-item>
        <el-descriptions-item :span="4">
          <template #label>
            <div class="cell-item">返回内容</div>
          </template>
          {{ JSON.parse(state.resdata.response) }}
        </el-descriptions-item>
        <el-descriptions-item :span="4">
          <template #label>
            <div class="cell-item">异常信息</div>
          </template>
          {{ state.resdata.exception == null ? "null" : state.resdata.exception }}
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemlogDialog">
import { reactive, ref } from "vue";
import { logApi } from "/@/api/sys/role";
function formatDate(date: any) {
  var time = new Date(date);
  var newTime =
    time.getFullYear() +
    "-" +
    (time.getMonth() + 1) +
    "-" +
    time.getDate() +
    " " +
    (time.getHours() < 10 ? "0" + time.getHours() : time.getHours()) +
    ":" +
    (time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes()) +
    ":" +
    (time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds());
  return newTime;
}
// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh"]);

// 定义变量内容
const state = reactive({
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: "",
  },
  resdata: {} as any,
});

// 打开弹窗
const openDialog = async (row: any) => {
  let item = await logApi().selectlogOne(row.id);
  state.resdata = item.data;
  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = async () => {
  // if (state.dialog.type === 'add') { }
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>
<style lang="scss" scoped>
.cell-item {
  width: 100px;
  text-align: center;
}
</style>
