<script setup lang="ts">
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
import {computed} from "vue";
import {FormatterUtils} from "@/utils/FormatterUtils.ts";

const modelValue = defineModel<boolean>("modelValue", { default: false});
const props = defineProps(["formData"]);
const components = {
  components: {
    VueJsonPretty
  }
};

const rowData = computed(() => props.formData);
const close = () => {
  modelValue.value = false;
};


</script>

<template>
  <el-drawer v-model="modelValue" direction="ltr" :close-on-click-modal="false" size="80%">
    <template #header="{ close, titleId, titleClass }">
      <div :id="titleId" :class="titleClass" style="font-weight: bolder">API 请求记录详情</div>
    </template>
    <el-row>
      <el-col :span="8">
        <el-form class="elForm" v-model="rowData" label-position="top" label-width="150px">
          <el-form-item label="记录号：">
            <el-input v-model="rowData.recordId" disabled></el-input>
          </el-form-item>
          <el-form-item label="资源路径：" >
            <el-input v-model="rowData.path"
                      :rows="2"
                      type="textarea"
                      disabled></el-input>
          </el-form-item>
          <el-form-item label="请求方法：">
            <el-input v-model="rowData.method"></el-input>
          </el-form-item>
          <el-form-item label="响应码：">
            <el-text :type="(rowData.responseCode && rowData.responseCode.toString().startsWith('2') ? 'success' : 'warning')">{{rowData.responseCode}}</el-text>
          </el-form-item>
          <el-form-item label="媒体类型：">
            <el-input v-model="rowData.mediaType"></el-input>
          </el-form-item>
          <el-form-item label="客户端地址：">
            <el-input v-model="rowData.clientAddress"></el-input>
          </el-form-item>
          <el-form-item label="URL参数：">
            <el-input v-model="rowData.urlParam"
                      :rows="5"
                      type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="请求时间：">
            <el-text type="primary">{{ FormatterUtils.formatTime(rowData.requestTime) }}</el-text>
          </el-form-item>
          <el-form-item label="响应时间：">
            <el-text type="success">{{ FormatterUtils.formatTime(rowData.responseTime) }}</el-text>
          </el-form-item>
          <el-form-item label="耗时：">
            <el-input v-model="rowData.useTime"></el-input>
          </el-form-item>
          <el-form-item label="异常信息：">
            <el-input v-model="rowData.errMsg"
                      :rows="5"
                      type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-text type="primary">请求数据：</el-text>
        </el-row>
        <el-scrollbar style="height: 80vh; border: rgba(107,135,168,0.31) solid 1px; border-radius: 5px; padding: 10px; margin-left: 5px">
          <vue-json-pretty style="height: 80vh" :data="FormatterUtils.formatterStringToJson(rowData.requestMsg)" />
        </el-scrollbar>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-text type="success">响应数据：</el-text>
        </el-row>
        <el-scrollbar style="height: 80vh; border: rgba(107,135,168,0.31) solid 1px; border-radius: 5px; padding: 10px; margin-left: 5px">
          <vue-json-pretty :data="FormatterUtils.formatterStringToJson(rowData.responseMsg)" />
        </el-scrollbar>
      </el-col>
    </el-row>
    <template #footer>
      <el-button type="danger" @click="close">关闭窗口</el-button>
    </template>
  </el-drawer>
</template>

<style scoped>

</style>