<template>
  <div class="page-view flex-row-sb">
    <!-- 左侧树-->
    <app-sync-tree
      ref="appAsyncTree"
      :actions="treeActions"
      :default-data="{ customConfigField: 'custom config field' }"
      :default-expanded-keys="defaultExpandedKeys"
      :expand-all="expandAll"
      :fields="treeFields"
      :props="treeProps"
      :request-method="getTreeNodes"
      highlight-first
      title="接口目录"
      @select="onTreeNodeClick"
    />
    <!-- 右侧-->
    <div class="page-view flex-1 ml-15 h-100">
      <!-- 搜索-->
      <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" label-width="90px"
                  @query="onQuery" @reset="onReset"
      >
        <app-filter-item :span="6" label="接口名称" prop="apiName">
          <el-input v-model="filters.apiName" clearable placeholder="请输入"
                    @keyup.enter.native="$refs['app-filter'].query"
          />
        </app-filter-item>
        <app-filter-item label="请求方式" prop="apiMode">
          <el-select v-model="filters.apiMode" filterable placeholder="请选择"
                     @keyup.enter.native="$refs['app-filter'].query"
          >
            <el-option v-for="item in createdList" :key="item.value" :label="item.label" :value="item.label" />
          </el-select>
        </app-filter-item>
      </app-filter>
      <!-- table列表 -->
      <div class="flex-1 pa-15 bg-white h-100 flex-col mt-15 border-radius-5">
        <div class="mb-15">
          <el-button icon="el-icon-plus" size="mini" type="primary" @click="addData"> 新增</el-button>
        </div>
        <app-table
          :column="columns"
          :pagination="pagination"
          :table-data="tableData"
          :table-loading="tableLoading"
          :total="total"
          @pagination-change="onPaginationChange"
          @row-dblclick="handleRowDblClick"
        >
          <!-- 插槽-->
          <template #apiMode="scope">
            <el-tag :type="determineTagType(scope.row.apiMode)">{{ scope.row.apiMode }}</el-tag>
          </template>
          <template #status="scope">
            <el-tag :type="scope.row['status'] === '1' ? '' : 'danger'">
              {{ scope.row['status'] === '1' ? '正式' : '下架' }}
            </el-tag>
          </template>
        </app-table>
      </div>
      <!-- 新增-->
      <add-dialog v-model="addVisible" :add-id="treeId" :data="dialogdData" :title="addTitle"
                  @confirm="onConfirm" />
      <!-- 编辑/详情组件 @data-added="fetchUpdatedData"-->
      <detail-dialog v-model="detailVisible" :add-id="treeId" :data="dialogdData" :title="detailTitle"
                     @confirm="onConfirm"
      />
      <!-- 查看日志的弹层-->
      <service-dialog v-model="dialogService" :data="currentRow" :title="dialogServiceTitle" />
      <!--接口详情-->
      <show-dialog v-model="dialogDetails" :data="currentRowa" :title="dialogDetailsTitle" />
      <!-- 抽屉内部的内容 -->
      <div>
        <el-drawer :visible.sync="drawerVisible" direction="rtl" size="30%" title="接口测试">
          <div class="drawer-content">
            <!--   头部    -->
            <div class="drawer-select-input" style="margin-top: 15px">
              <el-input v-model="requestUrl" :disabled="isUrlDisabled" class="input-with-select"
                        placeholder="请输入内容"
              >
                <el-select slot="prepend" v-model="requestMethod" :disabled="isMethodDisabled" placeholder="请选择" />
                <el-button slot="append" icon="el-icon-search" label="发送" type="primary" @click="sendRequest">发送
                </el-button>
              </el-input>
            </div>
            <!-- 新增的Tabs标签页 -->
            <el-tabs v-model="activeRequestTab" style="margin-top: 15px">
              <el-tab-pane v-if="requestMethod.toLowerCase() === 'get'" label="Params" name="params">
                <div>
                  <el-table :data="requestParams" border class="params-table" style="width: 100%">
                    <el-table-column label="key" prop="key" width="150px">
                      <template #default="{ $index }">
                        <el-input v-model="requestParams[$index].key" placeholder="key" />
                      </template>
                    </el-table-column>
                    <el-table-column label="value" prop="value">
                      <template #default="{ $index }">
                        <el-input v-model="requestParams[$index].value" placeholder="value" />
                      </template>
                    </el-table-column>
                    <el-table-column width="70">
                      <template #default="{ $index }">
                        <el-button
                          circle
                          icon="el-icon-delete"
                          size="mini"
                          type="danger"
                          @click="removeParam($index)"
                        />
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-button
                    icon="el-icon-plus"
                    style="margin-top: 10px"
                    type="text"
                    @click="addParam"
                  >
                    添加参数
                  </el-button>
                </div>
              </el-tab-pane>
              <el-tab-pane label="Headers" name="headers">
                <div>
                  <el-table :data="requestHeaders" border class="params-table" style="width: 100%">
                    <el-table-column label="key" prop="key" width="150px">
                      <template #default="{ $index }">
                        <el-input v-model="requestHeaders[$index].key" placeholder="key" />
                      </template>
                    </el-table-column>
                    <el-table-column label="value" prop="value">
                      <template #default="{ $index }">
                        <el-input v-model="requestHeaders[$index].value" placeholder="value" />
                      </template>
                    </el-table-column>
                    <el-table-column width="70">
                      <template #default="{ $index }">
                        <el-button
                          circle
                          icon="el-icon-delete"
                          size="mini"
                          type="danger"
                          @click="removeHeader($index)"
                        />
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-button
                    icon="el-icon-plus"
                    style="margin-top: 10px"
                    type="text"
                    @click="addHeader"
                  >
                    添加Header
                  </el-button>
                </div>
              </el-tab-pane>

              <el-tab-pane v-if="['post', 'put', 'patch', 'delete'].includes(requestMethod.toLowerCase())" label="Body"
                           name="body"
              >
                <div class="body-format-selector" style="margin-bottom: 15px;margin-left: 10px">
                  <el-radio-group v-model="bodyFormat" size="small" @change="handleBodyFormatChange">
                    <!--                    <el-radio label="none" >none</el-radio>-->
                    <!--                    <el-radio label="x-www-form-urlencoded">x-www-form-urlencoded</el-radio>-->
                    <!--                    <el-radio label="form-data">form-data</el-radio>-->
                    <el-radio label="raw">raw</el-radio>
                  </el-radio-group>
                  <el-select
                    v-if="bodyFormat === 'raw'"
                    v-model="rawFormat"
                    size="mini"
                    style="width: 90px; margin-left: 10px"
                  >
                    <el-option label="JSON" value="application/json" />
                    <!--                    <el-option label="XML" value="application/xml" />-->
                    <!--                    <el-option label="HTML" value="text/html" />-->
                    <!--                    <el-option label="Plain Text" value="text/plain" />-->
                  </el-select>
                </div>
                <!-- 根据bodyFormat显示不同的内容 -->
                <div v-if="bodyFormat === 'raw'" class="raw-body" style="margin-top: 15px">
                  <el-input
                    v-model="rawBody"
                    :rows="8"
                    placeholder="请输入请求体内容"
                    type="textarea"
                  />
                </div>

                <div v-else-if="bodyFormat === 'form-data' || bodyFormat === 'x-www-form-urlencoded'"
                     style="margin-top: 15px"
                >
                  <el-table :data="bodyParams" style="width: 100%">
                    <el-table-column label="key" prop="key" width="150px">
                      <template #default="{ $index }">
                        <el-input v-model="bodyParams[$index].key" placeholder="key" />
                      </template>
                    </el-table-column>
                    <el-table-column label="value" prop="value">
                      <template #default="{ $index }">
                        <el-input v-model="bodyParams[$index].value" placeholder="value" />
                      </template>
                    </el-table-column>
                    <el-table-column width="70">
                      <template #default="{ $index }">
                        <el-button
                          circle
                          icon="el-icon-delete"
                          size="mini"
                          type="danger"
                          @click="removeBodyParam($index)"
                        />
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-button
                    icon="el-icon-plus"
                    style="margin-top: 10px"
                    type="text"
                    @click="addBodyParam"
                  >
                    添加参数
                  </el-button>
                </div>
                <div v-else-if="bodyFormat === 'none'" class="empty-body"
                     style="text-align: center; padding: 20px; color: #909399;"
                >
                  This request does not have a body
                </div>
              </el-tab-pane>
            </el-tabs>
            <div class="response-section">
              <div class="response-header">
                <h3>响应内容</h3>
                <div class="response-status">
                  <span v-if="responseStatus" :class="statusClass" class="status-code">
                    {{ responseStatus }}
                  </span>
                  <span v-if="responseTime" class="response-time">
                    耗时: {{ responseTime }}ms
                  </span>
                </div>
              </div>
              <div class="dataList">
                <!--                {{ formattedResponse }}-->
                <pre v-if="formattedResponse">{{ formattedResponse }}</pre>
                <div v-else class="empty-response">暂无响应数据</div>
              </div>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>
<script>
import API from '@/api/business/dataServiceAPI'
import ServiceDialog from '../dataServiceAPI/ServiceDialog.vue'
import DetailDialog from './DetailDialog.vue'
import AddDialog from '@/views/dataResource/dataServices/dataServiceAPI/AddDialog.vue'
import tableMixin from '@/mixins/table.js' // 列表mixins
import ShowDialog from '@/views/dataResource/dataServices/dataServiceAPI/ShowDialog.vue'
import axios from 'axios' // 在文件顶部添加
export default {
  components: {
    DetailDialog,
    ServiceDialog,
    ShowDialog,
    AddDialog
  },
  mixins: [tableMixin],
  data() {
    // 树
    const TREE_CONFIG = {
      name: '',
      treeId: '',
      treeProps: {
        value: 'id',
        label: 'name'
      },
      expandAll: false,
      defaultExpandedKeys: ['0'],
      // 此处fields内配置对象属性包括: label/prop/rules/type(枚举:switch/number/input(默认))/span/
      treeFields: [
        {
          label: '接口目录名称',
          prop: 'name',
          labelWidth: '120',
          rules: [{required: true, message: '接口目录名称不能为空'}]
        },
        {
          label: '接口目录编码',
          prop: 'code',
          labelWidth: '120',
          rules: [{required: true, message: '接口目录编码不能为空'}]
        }
      ],
      curNode: {} // 当前选择节点
    }
    // table列表
    const TABLE_CONFIG = {
      // filters: {
      //   apiMode: 1, // 请求方式默认为GET
      // },
      createdList: [
        {label: 'GET', value: '1'},
        {label: 'POST', value: '0'}
      ],
      // 列表表头
      columns: [
        {label: '接口名称', prop: 'apiName', width: '200px', align: 'center'},
        {label: '接口描述', prop: 'apiDesc', width: '200px', align: 'center'},
        {label: '接口地址', prop: 'apiUrl', align: 'center'},
        {label: '数据库表名', prop: 'dbAlias', width: '100px', align: 'center'},
        {label: '请求方式', prop: 'apiMode', dataType: 'slot', slot: 'apiMode', width: '100px', align: 'center'},
        {
          label: '接口状态',
          prop: 'status',
          width: '100',
          align: 'center',
          dataType: 'slot', // 使用插槽
          slot: 'status'
        },
        {
          dataType: 'option',
          label: '操作',
          width: '220',
          operation: [
            {
              name: '测试',
              icon: 'el-icon-s-unfold',
              color: '#409eff',
              clickFun: (row) => {
                this.showDrawer(row)
              }
            },
            {
              name: '查看日志',
              icon: 'el-icon-document',
              clickFun: (row) => {
                this.serviceshow(row)
              }
            },
            {
              name: '接口文档查看',
              icon: 'el-icon-tickets',
              color: '#407cff',
              clickFun: (row) => {
                this.detailsshow(row)
              }
            },
            {
              name: '发布',
              icon: 'el-icon-s-promotion',
              color: '#fa912a',
              showHide: (row) => {
                return row.status !== '1'
              },
              clickFun: (row) => {
                this.publishTable(row)
              }
            },
            {
              name: '下架',
              icon: 'el-icon-remove',
              color: '#f56c6c',
              showHide: (row) => {
                return row.status === '1' // 已发布时显示 "下架" 按钮
              },
              clickFun: (row) => {
                this.publishTable(row)
              }
            },
            {
              name: '删除',
              icon: 'el-icon-delete',
              color: 'red',
              showHide: (row) => {
                return row.status !== '1' // 已发布时显示 "下架" 按钮
              },
              clickFun: (row) => {
                this.delApi(row)
              }
            }
          ]
        }
      ],
      defaultFilter: [
        {
          operation: 'EQUAL',
          property: 'catalogId',
          relation: 'AND',
          value: ''
        }
      ]
    }
    // dialog弹出
    const DIALOG_CONFIG = {
      detailVisible: false,
      addVisible: false,
      dialogService: false,
      dialogDetails: false,
      drawerVisible: false, // 控制抽屉显示和隐藏的变量
      detailTitle: '编辑',
      addTitle: '新增',
      dialogServiceTitle: '查看日志',
      dialogDetailsTitle: '接口详情',
      dialogdData: {}
    }
    return {
      ...TREE_CONFIG, // 树相关
      ...TABLE_CONFIG, // table相关
      ...DIALOG_CONFIG, // 主列表dialog相关
      // status: '', // 初始化接口状态为空
      tableData: [], // 初始化列表为空数组
      value: '',
      requestUrl: '',
      requestMethod: '',
      responseData: null,
      responseStatus: null,
      responseTime: null,
      responseHeaders: [],
      responseCookies: [],
      activeResponseTab: 'body',
      currentRow: null,
      currentRowa: null,
      isUrlDisabled: false, // 控制requestUrl输入框是否禁用
      isMethodDisabled: false, // 控制requestMethod选择框是否禁用
      bodyFormat: 'raw',
      rawFormat: 'application/json',
      activeRequestTab: 'params', // 新增：当前激活的请求标签页
      requestHeaders: [ // 新增：请求头参数
        {key: '', value: ''}
      ],
      bodyParams: [ // 新增：请求体参数
        {key: '', value: ''}
      ],
      rawBody: '', // 新增：raw格式的请求体内容
      // Request parameters
      requestParams: [
        {key: '', value: '', description: ''}
      ]
    }
  },
  computed: {
    showBodyFormatSelector() {
      // 允许带body的HTTP方法
      return ['POST', 'PUT', 'PATCH', 'DELETE'].includes(this.requestMethod?.toUpperCase())
    },
    // 配置列表接口方法；只有配置了该计算属性才会执行table mixins中的getData方法
    dataMethod() {
      return API.treequeryTable
    },
    formattedResponse() {
      if (!this.responseData) return ''
      try {
        return JSON.stringify(JSON.parse(this.responseData), null, 2)
      } catch (e) {
        return this.responseData
      }
    },
    statusClass() {
      if (!this.responseStatus) return ''
      const code = parseInt(this.responseStatus)
      if (code >= 200 && code < 300) return 'success'
      if (code >= 300 && code < 400) return 'redirect'
      if (code >= 400 && code < 500) return 'client-error'
      if (code >= 500) return 'server-error'
      return ''
    }
  },
  methods: {
    // apiMode标签颜色
    determineTagType(apiMode) {
      return apiMode === 'GET' ? '' : 'warning'
    },
    // 树
    async getTreeNodes() {
      const {value = []} = await API.treeAction()
      this.defaultExpandedKeys = [value?.[0].id || '']
      return {data: value || []}
    },
    reloadTree() {
      this.$refs.appAsyncTree.getTreeData()
    },
    /**
     * @description: treeActions支持函数也支持数组，由于实际场景当中 可能会动态设置按钮，故以函数示例来展示
     * @param {*} data 当前点击节点数据
     * @return {*} 当前节点展示的操作项数组
     */
    treeActions(data) {
      // 根节点判断方式以业务为准，此处仅为示例
      return [
        {label: '添加', type: 'add', method: this.addNode},
        {label: '编辑', type: 'edit', method: this.editNode},
        {label: '删除', type: 'delete', method: this.delNode}
      ]
    },
    onTreeNodeClick(node) {
      this.treeId = node.id
      // 构建查询参数对象，按照你提供的格式示例
      const queryParams = {
        groupRelation: 'AND',
        groupTree: {},
        params: {},
        querys: [
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: '',
            relation: 'AND',
            value: {}
          },
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'catalogId',
            relation: 'AND',
            value: this.treeId
          }
        ],
        sorter: [
          {
            direction: 'ASC',
            property: ''
          }
        ]
      }
      if (node.id === this.curNode?.id) return
      this.deptName = node.label
      this.curNode = {...node}
      this.form = this.$options.data().form
      this.getData(queryParams)
    },
    // 目录新增
    async addNode(params, node) {
      const {code, name} = params
      const {id} = node
      const newNode = {
        code,
        name,
        parentId: id
      }
      try {
        const {state, message} = await API.addAPITree(newNode)
        if (state) {
          this.reloadTree()
          this.$message.success('添加资源目录成功！')
        } else {
          this.$message.warning(message || '添加接口目录失败！')
        }
      } catch (err) {
        this.$message.warning(err || '添加接口目录失败！')
      }
    },
    // 目录编辑
    async editNode(params) {
      const {code, name, parentId, id} = params
      const newNode = {
        code,
        name,
        id,
        parentId
      }
      try {
        const {state, message} = await API.editAPITree(newNode)
        if (state) {
          this.reloadTree()
          this.$message.success('编辑资源目录成功！')
        } else {
          this.$message.warning(message || '编辑接口目录失败！')
        }
      } catch (err) {
        this.$message.warning(err || '编辑接口目录失败！')
      }
    },
    // 目录删除
    async delNode(params, node) {
      try {
        const {state, message} = await API.removeAPITree(node.id)
        if (state) {
          this.reloadTree()
          this.$message.success('删除资源目录成功！')
        } else {
          this.$message.warning(message || '删除接口目录失败！')
        }
      } catch (err) {
        this.$message.warning(err || '删除资接口目录失败！')
      }
    },
    // table列表新增
    addData() {
      this.addTitle = '新增API接口'
      this.dialogdData = {
        catalogId: this.curNode.id
      }
      this.addVisible = true
    },
    // 处理双击事件
    handleRowDblClick(row) {
      console.log(row, '777777744')
      if (row.status === '1') {
        this.$message.warning('只有下架的接口才能编辑！')
        return
      }
      this.editData(row)
    },
    // table列表编辑
    editData(row) {
      if (row.status === '1') {
        this.$message.warning('只有下架的接口才能编辑！')
        return // 直接返回，不执行后续逻辑
      }
      this.detailTitle = `编辑 - ${row.apiName}`
      this.dialogdData = row
      this.detailVisible = true
    },
    // table列表删除
    delApi(row) {
      this.$confirm(`此操作将永久删除该接口项（${row.apiName}）, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await API.delApiData(row.id)
          this.getData()
          this.$message.success('删除成功')
          // 找到要删除的数据在tableData中的索引
          const index = this.tableData.findIndex((item) => item.id === row.id)
          if (index !== -1) {
            // 从tableData数组中删除对应的数据
            this.tableData.splice(index, 1)
          }
        })
        .catch((error) => {
          console.error('删除数据失败:', error)
        })
    },
    onBeforeGetData(queryParams, formData) {
      this.setFilterValue(this.queryParams, this.defaultFilter, 'catalogId', this.curNode.id)
    },
    // 新增确定按钮
    onConfirm(data, pData) {
      this.getData()
    },

    // 查看日志按钮
    serviceshow(row) {
      this.dialogServiceTitle = `查看日志- ${row.apiName}`
      this.currentRow = row
      const rowId = row.id // 获取当前行的id
      this.dialogService = true
      this.$refs.ServiceDialog.initData({id: rowId}) // 将id传递给ServiceDialog组件
    },
    // 接口文档查看
    detailsshow(row) {
      console.log(row, '99999999')
      this.dialogDetailsTitle = `接口详情- ${row.apiName}`
      this.currentRowa = row
      this.dialogDetails = true
    },
    // 发布
    async publishTable(data) {
      const isPublished = data.status === '1' // 判断当前状态是否已发布
      const action = isPublished ? '下架' : '发布'
      // const apiMethod = isPublished ? API.TakeoffAPI : API.publishAPI
      this.$confirm(`此操作将${action}接口（${data.apiName}），是否继续？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // data.status = '1'
          try {
            this.tableLoading = true
            // const {state, message} = await apiMethod(data) //动态调用接口
            const payload = new URLSearchParams()
            payload.append('id', data.id)
            // 创建只包含id的FormData
            // const formData = new FormData()
            // formData.append('id', data.id)

            // 根据状态调用不同接口
            const response = isPublished
              ? await API.TakeoffAPI(payload)
              : await API.publishAPI(payload)

            if (response.state) {
              this.getData()
              this.$message.success(`接口${action}成功！`)
            } else {
              this.tableLoading = false
              this.$message.warning(response.message || `接口${action}失败！`)
            }
          } catch (err) {
            this.$message.warning(err || `接口${action}失败！`)
          }
        })
        .catch(() => {
        })
    },
    // 测试按钮
    showDrawer(row) {
      this.currentRow = row
      this.drawerVisible = true
      this.requestMethod = row.apiMode.toUpperCase()
      // 在apiUrl前面加上请求头https://8080
      // this.requestUrl = `http://120.46.15.165:9166${row.apiUrl}`;
      // this.requestUrl = `http://10.31.243.182:9157${row.apiUrl}`;//本地环境
      this.requestUrl = window.context.dataApi + row.apiUrl// 正式环境
      this.isUrlDisabled = true// 禁用requestUrl输入框
      this.isMethodDisabled = true // 禁用requestMethod选择框
      this.responseData = null
      this.responseStatus = null
      this.responseTime = null
      this.responseHeaders = []
      this.responseCookies = []
      this.requestParams = [{key: '', value: ''}]
      // this.bodyFormat = 'raw'; // 重置为none
      // 根据请求方法设置默认激活的标签页和bodyFormat
      if (this.requestMethod.toLowerCase() === 'get') {
        this.activeRequestTab = 'params'
        this.bodyFormat = 'none'
      } else {
        this.activeRequestTab = 'body'
        this.bodyFormat = 'raw'
      }
      this.bodyParams = [{key: '', value: ''}] // 重置参数
      this.rawBody = '' // 清空raw body
    },
    handleBodyFormatChange(val) {
      // 当body格式改变时可以执行一些逻辑
      console.log('Body format changed to:', val) // 打印点击的单选框

      // 如果切换到none，可以清空相关数据
      if (val === 'none') {
        this.bodyParams = [{key: '', value: ''}]
        this.rawBody = ''
      }

      // 如果切换到form-data或x-www-form-urlencoded，确保至少有一个参数
      if (val === 'form-data' || val === 'x-www-form-urlencoded') {
        if (this.bodyParams.length === 0) {
          this.bodyParams = [{key: '', value: ''}]
        }
      }
    },
    addParam() {
      this.requestParams.push({key: '', value: '', description: ''})
    },

    removeParam(index) {
      this.requestParams.splice(index, 1)
    },
    // 新增：添加请求头
    addHeader() {
      this.requestHeaders.push({key: '', value: ''})
    },

    // 新增：删除请求头
    removeHeader(index) {
      this.requestHeaders.splice(index, 1)
    },

    // 新增：添加请求体参数
    addBodyParam() {
      this.bodyParams.push({key: '', value: ''})
    },
    // 新增：删除请求体参数
    removeBodyParam(index) {
      this.bodyParams.splice(index, 1)
    },
    // c测试按钮发送
    // c测试按钮发送
    async sendRequest() {
      if (!this.requestUrl) {
        this.$message.warning('请输入请求URL')
        return
      }

      const startTime = Date.now()
      const config = {
        method: this.requestMethod.toLowerCase(),
        url: this.requestUrl,
        headers: {},
        withCredentials: false // 修改为false，除非你需要发送cookies
      }
      // 处理请求头
      this.requestHeaders.forEach(header => {
        if (header.key) {
          config.headers[header.key] = header.value
        }
      })
      try {
        // 根据请求方法决定如何处理参数
        if (['post', 'put', 'patch', 'delete'].includes(this.requestMethod.toLowerCase())) {
          // 可以带body的请求方法
          if (this.bodyFormat === 'form-data') {
            const formData = new FormData()
            this.bodyParams.forEach(param => {
              if (param.key) formData.append(param.key, param.value)
            })
            config.data = formData
          } else if (this.bodyFormat === 'x-www-form-urlencoded') {
            const params = new URLSearchParams()
            this.bodyParams.forEach(param => {
              if (param.key) params.append(param.key, param.value)
            })
            config.data = params
            config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
          } else if (this.bodyFormat === 'raw') {
            config.data = this.rawBody
            config.headers['Content-Type'] = this.rawFormat
          }
        } else {
          // GET/HEAD等请求，参数作为查询参数
          const params = {}
          this.requestParams.forEach(param => {
            if (param.key && param.value) {
              params[param.key] = param.value
            }
          })
          config.params = params
        }

        console.log('Sending request with config:', config)// 此处打印了方式，地址
        const response = await axios(config)
        const responseTime = Date.now() - startTime

        // 处理响应...
        this.responseStatus = response.status
        this.responseTime = responseTime
        this.responseHeaders = []

        Object.entries(response.headers).forEach(([key, value]) => {
          this.responseHeaders.push({key, value})
        })

        this.responseData = response.data
        this.processCookies(response)
      } catch (error) {
        if (error.response) {
          this.responseStatus = error.response.status
          this.responseData = error.response.data
        } else if (error.request) {
          this.responseData = '请求出错: 没有收到响应'
        } else {
          this.responseData = `请求出错: ${error.message}`
        }
        this.responseStatus = 'Error'
        this.$message.error(`请求失败: ${error.message}`)
      }
    },

    processCookies(response) {
      this.responseCookies = []
      const cookieHeader = response.headers['set-cookie'] || ''

      if (cookieHeader) {
        // 处理多个 cookie
        const cookies = Array.isArray(cookieHeader) ? cookieHeader : [cookieHeader]

        cookies.forEach(cookie => {
          // 分割每个 cookie 字符串
          const parts = cookie.split(';')
          if (parts.length > 0) {
            const [keyValue] = parts[0].split('=')
            if (keyValue) {
              this.responseCookies.push({key: keyValue.trim(), value: parts[0].substring(keyValue.length + 1)})
            }
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.drawer-content {
  //width: 100%;
  padding: 20px;
  height: 100%;
  margin-top: -20px;
  display: flex;
  flex-direction: column;
  //margin-left: 20px;
  ////border: solid 1px #114d77;
  //align-items: center;
  //overflow: hidden;

  .request-header {
    display: flex;
    margin-bottom: 15px;
  }

  .body-format-selector {
    //margin-top: 20px;
    //margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 15px;

    .el-radio {
      margin-right: 10px !important;
    }
  }

  .raw-body {
    margin-top: 10px;
  }

  .empty-body {
    text-align: center;
    padding: 20px;
    color: #909399;
    font-size: 14px;
  }

  .response-section {
    margin-top: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;

    .response-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .response-status {
        .status-code {
          padding: 2px 8px;
          border-radius: 3px;
          margin-right: 10px;

          &.success {
            background-color: #f0f9eb;
            color: #67c23a;
          }

          &.redirect {
            background-color: #fdf6ec;
            color: #e6a23c;
          }

          &.client-error {
            background-color: #fef0f0;
            color: #f56c6c;
          }

          &.server-error {
            background-color: #f56c6c;
            color: white;
          }
        }

        .response-time {
          color: #909399;
          font-size: 12px;
        }
      }
    }

    .response-data {
      flex: 1;
      background: #f5f7fa;
      padding: 10px;
      border-radius: 4px;
      overflow: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
      font-family: monospace;
      margin: 0;
    }

    .empty-response {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #909399;
    }
  }
}

.el-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;

  ::v-deep .el-tabs__content {
    flex: 1;
    overflow: auto;
  }
}

.drawer-footer {
  margin-top: 40px;
}

.el-select {
  width: 130px;
}

.el-input {
  width: 500px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.el-drawer_body {
  overflow: hidden;
}

//测试样式
.response-section {
  margin-top: 50px;
}

.dataList {
  //border: 1px solid #c6d1e0;
  //height: 350px;
  //overflow: auto;
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  max-height: 400px;
  overflow: auto;
  font-family: 'Consolas', 'Monaco', monospace;
  white-space: pre-wrap;
}

.dataList pre {
  margin: 0;
}

.empty-response {
  color: #909399;
  text-align: center;
  padding: 20px;
}

.response-section pre {
  //border: solid 1px #ebeef5;
  height: 500px;
  //white-space: pre-wrap;
  //word-wrap: break-word;
}

/* 新增表格样式 */
.params-table {
  /* 确保表格宽度100%填充容器 */
  width: 100% !important;

  /* 强制显示所有边框 */
  ::v-deep .el-table__header-wrapper,
  ::v-deep .el-table__body-wrapper {
    th, td {
      border-right: 1px solid #ebeef5 !important;
    }

    /* 最后一列的右边框 */
    th:last-child,
    td:last-child {
      border-right: 1px solid #ebeef5 !important;
    }
  }

  /* 单元格内边距调整 */
  ::v-deep .el-table__cell {
    padding: 8px 0;

    .cell {
      padding: 0 10px;
    }
  }

  /* 输入框样式调整 */
  ::v-deep .el-input {
    width: 100%;

    .el-input__inner {
      border: none;
      background: transparent;
      padding: 0 10px;
    }
  }

  /* 表格外边框 */
  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #ebeef5;
  }
}
</style>
