<template>
  <div class="page_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="page_content">
      <bg-form-gap title="详情"></bg-form-gap>
      <bg-detail-table2 class="detail_info" :list="instanceData.detailInfo">
        <template #req_url_value="{ data }">
          <el-popover placement="top-start" :width="600" trigger="hover" :content="data.value">
            <template #reference>
              <p class="show_in_line">{{ data.value }}</p>
            </template>
          </el-popover>
        </template>
        <template #res_fields_value="{ data }">
          <el-popover placement="bottom-start" :width="800" trigger="hover" :content="data.value">
            <template #reference>
              <p class="show_in_line">{{ data.value }}</p>
            </template>
          </el-popover>
        </template>
      </bg-detail-table2>
    </div>
  </div>
</template>

<script setup>
import { reactive, onBeforeMount } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import { useRoute } from "vue-router";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";

const route = useRoute();

const instanceData = reactive({
  detailInfo: [
    {
      key: "system_account",
      label: "账号",
      value: "",
      // slot: "approvalStatus",
    },
    {
      key: "phone",
      label: "手机号",
      value: "",
    },
    {
      key: "org_name",
      label: "所属组织",
      value: "",
    },
    {
      key: "system_module",
      label: "系统模块",
      value: "",
    },
    {
      key: "created_time",
      label: "操作时间",
      value: "",
    },
    {
      key: "operate_type",
      label: "操作类型",
      value: "",
    },
    {
      key: "req_method_str",
      label: "请求方式",
      value: "",
    },
    {
      key: "operate_status_str",
      label: "操作状态",
      value: "",
    },
    {
      key: "operate_ip",
      label: "操作地址",
      value: "",
    },
    {
      key: "operate_addr",
      label: "操作地点",
      value: "",
      width: "100%",
    },
    {
      key: "req_url",
      label: "请求地址",
      value: "",
      width: "100%",
      childSlot: "req_url_value",
    },
    {
      key: "req_param",
      label: "请求参数",
      value: "",
    },
    {
      key: "operate_method",
      label: "操作方法",
      value: "",
    },
    {
      key: "res_fields",
      label: "返回参数",
      value: "",
      childSlot: "res_fields_value",
    },
  ],
});
onBeforeMount(() => {
  getDetailInfo();
});
const getDetailInfo = () => {
  axios
    .get(`/v1/api/log/userBehavior/detail/${route.query.id}`)
    .then((res) => {
      if (res.data.code == 200) {
        const result = res.data.data || {};
        instanceData.detailInfo.forEach((item) => {
          item.value = result[item.key];
        });
      } else {
        ElMessage.error(res.data.data);
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
</script>

<style lang="scss" scoped>
.page_content {
  position: relative;
  padding: 24px 0 68px 24px;
  .detail_info,
  .approve_info {
    margin-bottom: 24px;
    width: 960px;
  }
  .show_in_line {
    overflow: hidden;
    width: 824px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
