<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";
import TrueFalseTagStyleFormatter from "@/plugin/formatter/TrueFalseTagStyleFormatter.ts";

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

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="API键：">
            <el-input v-model="rowData.apiKey" ></el-input>
          </el-form-item>
          <el-form-item label="请求地址：" >
            <el-input v-model="rowData.requestUrl"
                      :rows="2"
                      type="textarea"
                      disabled></el-input>
          </el-form-item>
          <el-form-item label="是否成功：">
            <el-tag :type="trueFalseTagStyleFormatter.yesOrNoTagStyleFormatter(rowData.success).type">
              {{ trueFalseTagStyleFormatter.yesOrNoTagStyleFormatter(rowData.success).label}}
            </el-tag>
          </el-form-item>
          <el-form-item label="请求方法：">
            <el-input v-model="rowData.method"></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="耗时（ms）：">
            <el-text :type="rowData.useTime > 500 ? 'warning' : 'success'">{{ rowData.useTime }} ms</el-text>
          </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>
.elForm {
  margin-right: 10px;
}
.elForm .el-form-item {
  width: 100%;
}
</style>