<script setup lang="ts">
import { useRoute } from "vue-router";
import { onMounted, computed, ref } from "vue";
import {
  getIpInterfaceCallDetailById,
  getIpInterfaceCallRecord
} from "@/api/system/ipInterfaceCall";
import { PlusForm, PlusTable, useTable } from "plus-pro-components";
import type { PlusColumn, FieldValues } from "plus-pro-components";

defineOptions({
  name: "IpInterfaceCallDetail"
});
const route = useRoute();

console.log(route.query);

onMounted(() => {
  getDetail();
});

const getDetail = async () => {
  let id: any = route.query.id;
  let res = await getIpInterfaceCallDetailById(id);
  let res2 = await getIpInterfaceCallRecord(id);
  console.log(res, res2);
  Object.assign(form.value, res.data);
  tableData.value = res2.data;
};

const columns: PlusColumn[] = [
  {
    label: "调用编号",
    width: 120,
    prop: "id",
    valueType: "input",
    fieldProps: {
      placeholder: "无",
      disabled: true
    },
    colProps: { span: 8 }
  },
  {
    label: "账户编号",
    width: 120,
    prop: "accountNo",
    valueType: "input",
    fieldProps: {
      placeholder: "无",
      disabled: true
    },
    colProps: { span: 8 }
  },
  {
    label: "调用接口",
    width: 120,
    prop: "interfaceName",
    valueType: "input",
    fieldProps: {
      placeholder: "无",
      disabled: true
    },
    colProps: { span: 8 }
  }
];

const columns1: PlusColumn[] = [
  {
    label: "接口参数",
    prop: "interfaceParam",
    valueType: "input",
    fieldProps: {
      placeholder: "无",
      type: "textarea",
      rows: 2,
      disabled: true
    },
    colProps: { span: 12 }
  },
  {
    label: "配置参数",
    prop: "configParam",
    valueType: "input",
    fieldProps: {
      placeholder: "无",
      type: "textarea",
      rows: 2,
      disabled: true
    },
    colProps: { span: 12 }
  },
  {
    label: "请求参数",
    prop: "requestParam",
    fieldProps: {
      placeholder: "无",
      type: "textarea",
      rows: 4,
      disabled: true
    },
    colProps: { span: 12 }
  },
  {
    label: "相应结果",
    prop: "responseParam",
    fieldProps: {
      placeholder: "无",
      type: "textarea",
      rows: 4,
      disabled: true
    },
    colProps: { span: 12 }
  }
];

const columns2: PlusColumn[] = [
  {
    label: "回调地址",
    prop: "callbackUrl"
  },
  {
    label: "请求参数",
    prop: "requestParam"
  },
  {
    label: "回调时间",
    prop: "addTime"
  },
  {
    label: "状态",
    width: 120,
    prop: "status",
    valueType: "select",
    options: [
      { name: "处理中", value: "handle" },
      { name: "成功", value: "success" },
      { name: "失败", value: "fail" }
    ]
  },
  {
    label: "相应结果",
    prop: "responseParam"
  },
  {
    label: "响应时间",
    prop: "updateTime"
  }
];

const form = ref<FieldValues>({});

const { tableData } = useTable();
</script>

<template>
  <div>
    <el-card class="w-full h-full">
      <PlusForm
        v-model="form"
        :columns="columns"
        :hasFooter="false"
        :row-props="{ gutter: 20 }"
        :col-props="{ span: 24 }"
      />
      <el-card class="mt-2" header="请求记录">
        <PlusForm
          v-model="form"
          :hasFooter="false"
          :columns="columns1"
          :row-props="{ gutter: 20 }"
          :col-props="{ span: 24 }"
        />
      </el-card>
      <el-card class="mt-5" header="回调记录">
        <PlusTable
          :columns="columns2"
          :data="tableData"
          :table-props="{ height: '400px' }"
        />
      </el-card>
    </el-card>
  </div>
</template>

<style scoped lang="scss"></style>
