<script setup lang="ts">

import {Lightning} from "@element-plus/icons-vue";
import type {IApiQueryReq} from "@/interface/page/api/IApiQueryReq.ts";
import {onMounted, ref} from "vue";
import type {IBaseApiData} from "@/model/table/IBaseApiData.ts";
import ApiApi from "@/api/api.ts";
import type {AppServeDataResponse} from "@/interface/api/AppServeDataResponse.ts";
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
import MessageUtils from "@/utils/MessageUtils.ts";
import AddApiBaseComponent from "@/components/page/api/AddApiBaseComponent.vue";
import ApiBaseDetailComponent from "@/components/page/api/ApiBaseDetailComponent.vue";
import type {AppServeResponse} from "@/interface/api/AppServeResponse.ts";

const searchParam = ref<IApiQueryReq>({}); // 查询参数
const tableData = ref<IBaseApiData[]>([]); // 表格数据
const showAdd = ref<boolean>(false); // 添加信息弹窗显隐
const showDetail = ref<boolean>(false); // 详情信息弹窗显隐
const detailData = ref<IBaseApiData>({}); // 详情信息

onMounted(() => {
  query();
})
// 查询数据
const query = () => {
  const loadingInstance = MessageUtils.loading('正在查询...');
  ApiApi.queryApi(searchParam.value).then((res) => {
    const responseString = JSON.stringify(res.data);
    const response = JSON.parse(responseString) as AppServeDataResponse<IBaseApiData[]>;
    if (response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      tableData.value = response.data;
      MessageUtils.successMessage('查询成功');
      return;
    }
    MessageUtils.errMessage('查询失败');
  }).catch(() => {}).finally(() => {
    loadingInstance.close();
  })
};
// 重置查询参数
const resetInput = () => {
  searchParam.value = {};
};
// 添加信息
const addInfo = () => {
  showAdd.value = true;
};
// 编辑信息
const handleEdit = (index: number, row:  any) => {
  detailData.value = {
    apiKey: row.apiKey,
    apiName: row.apiName,
    rootKey: row.rootKey,
    address: row.address,
    tag: row.tag,
    remark: row.remark
  };
  showDetail.value = true;
};
// 重载接口参数
const reloadApikey = () => {
  MessageUtils.confirmMessageBox('确定要重载接口参数吗？重载瞬间可能会有请求丢失，确定要继续吗？', '重载接口参数').then(() => {
    ApiApi.reloadApi().then((res) => {
      const responseString = JSON.stringify(res.data);
      const response = JSON.parse(responseString) as AppServeResponse;
      if (response && response.code == AppServeResponseCodeEnum.SUCCESS) {
        MessageUtils.successMessage('重载成功');
        return;
      }
      MessageUtils.errMessage('重载失败:' + response.msg);
    }).catch(() => {});
  }).catch(() => {});
}

</script>

<template>
  <div style="margin-left: 10px;margin-top: 10px; width: calc(100vw - 280px);">
    <h3>API基础资料管理</h3>
    <el-row class="searchCard">
      <el-row style="width: 100%;">
        <el-form class="searchForm" :model="searchParam" label-position="top" label-width="150px" inline>
          <el-form-item label="API键名：" style="width: 250px;">
            <el-input v-model="searchParam.apiKey" placeholder="请输入API键名" clearable></el-input>
          </el-form-item>
          <el-form-item label="API名称：" style="width: 250px;">
            <el-input v-model="searchParam.apiName" placeholder="请输入API名称" clearable></el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-button-group style="width: 100%;margin-left: 10px; margin-bottom: 10px">
          <el-button type="primary" @click="query">查询/刷新</el-button>
          <el-button type="warning" @click="resetInput">重置查询参数</el-button>
          <el-button type="success" @click="addInfo"><el-icon><Lightning /></el-icon>添加信息</el-button>
          <el-button type="info" @click="reloadApikey">重载接口参数</el-button>
        </el-button-group>
      </el-row>
    </el-row>
    <el-row class="dataTable">
      <el-table :data="tableData" stripe border style="width: 100%" max-height="calc(100vh - 270px)">
        <el-table-column prop="apiKey" label="API键" width="320" align="center" show-overflow-tooltip fixed="left"/>
        <el-table-column prop="apiName" label="API名称" align="center" width="150" show-overflow-tooltip/>
        <el-table-column prop="rootKey" label="根键" align="center" width="120" show-overflow-tooltip/>
        <el-table-column prop="address" label="地址" align="center" width="350" show-overflow-tooltip/>
        <el-table-column prop="tag" label="标记" align="center" width="100" show-overflow-tooltip/>
        <el-table-column prop="remark" label="备注" align="center" min-width="120" show-overflow-tooltip/>
        <el-table-column label="操作" width="80" align="center" fixed="right">
          <template #default="scope">
            <el-button-group>
              <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
<!--  添加信息-->
  <AddApiBaseComponent v-model="showAdd" @reLoadingTableData="query"/>
<!--  信息详细-->
  <ApiBaseDetailComponent v-model="showDetail" :form-data="detailData" @reLoadingTableData="query"/>
</template>

<style scoped>
.searchCard {
  width: 100%;
  border: #ccc solid 1px;
  border-radius: 4px;
  background-color: #fff;
}
.dataTable {
  margin: 10px 10px 0 auto;
  width: 100%;
  border: #ccc solid 1px;
  border-radius: 4px;
  background-color: #fff;
}
.searchForm {
  margin: 5px 10px 0 10px;
  width: 100%;
}
.searchForm :deep(.el-form-item__label){
  font-size: 13px;
}
</style>