<script src="../authority/configData.js"></script>
<template>
  <div class="apiWrap">
    <div class="tablebox">
      <div class="tablebtn">
        <div class="search">
          <el-input
            placeholder="接口名称、API描述"
            v-model="searchForm.nameOrRemark"
            @keyup.enter.native="getApiModuleHandle(searchForm)"
          >
            <i slot="suffix" class="el-input__icon el-icon-search" @click="getApiModuleHandle(searchForm)"></i>
          </el-input>
        </div>
        <div class="btn">
          <el-button
            icon="el-icon-back"
            @click="
            $router.replace({ path: '/applicationList/applicationListAdmin' })
          "
          >返回
          </el-button
          >
          <el-button type="primary" @click="goAddHandle" icon="el-icon-plus" :disabled="!searchForm.catalogueId">
            添加接口
          </el-button>
        </div>
      </div>
      <div class="main">
        <div class="tree">
          <div class="title">
            <div class="text">业务模块</div>
            <i class="el-icon-plus" @click="openTreeDialog"></i>
          </div>
          <div class="item"
               v-for="(item, index) in treeList" :key="item.catalogueId" @click="treeCLick(item)"
               :class="{actived:searchForm.catalogueId===item.id}"
          >
            <div class="text">{{ item.name }}</div>
            <div class="btn">
              <i
                class="el-icon-edit"
                style="color: blue"
                @click.stop="editTree(item)"
              ></i>
              <i
                class="el-icon-delete"
                style="color: red"
                @click.stop="deleTree(item)"
              ></i>
            </div>
          </div>
        </div>
        <div class="left">
          <div class="tablecontent">
            <baseNewTable
              ref="mainTable"
              :tableData="mainTableData"
              :tableColumn="mainTableColumn"
              :funData="mainFunData"
              :funWidth="funWidth"
              :showIndex="true"
              :tabLoading="mainTabLoading"
              @onFunc="tableButtonHandle"
              @view="viewHandle"
              :border="false"
              :tableHeight="'73vh'"
            ></baseNewTable>
          </div>
          <div class="page">
            <basePage
              :pageModel="pageModel"
              @update:pageModel="currentChangeHandle"
            ></basePage>
          </div>
        </div>
      </div>
    </div>

    <baseRightDialog
      :dialogVisible="rightDialog"
      title="API调试"
      @handleClose="dialoghandleClose"
      @handleConfirmClick="debugGoHandle"
      :submitShow="false"
    >
      <div>
        <div
          class="rightdalog"
          style="width: 100%; padding: 20px"
          v-if="rightDialog"
        >
          <template v-if="debugInfo.needLogin == '是'">
            <div class="debugchunk">
              <div class="title" style="margin: 20px 0">
                <h1>认证接口</h1>
              </div>
              <div class="addressChunk">
                <div class="label">地址:</div>
                <div class="input">
                  <el-input v-model="authInterfaceAddress"></el-input>
                </div>
              </div>
              <div class="code-json-editor">
                <vue-json-editor
                  class="editor"
                  v-model="authInfo"
                  :showBtns="false"
                  :mode="'code'"
                  @json-change="onAuthJsonChange"
                  @json-save="onAuthJsonSave"
                  @has-error="onAuthError"
                />
              </div>
              <div class="btn">
                <el-button
                  type="primary"
                  :loading="authDebugGoLoading"
                  @click="authDebugGoHandle"
                  style="margin: 20px 0"
                >认证调试
                </el-button
                >
              </div>
              <div class="title" style="margin: 20px 0">
                <h1>认证结果展示</h1>
              </div>
              <div
                class="result"
                style="margin-top: 30px"
                v-loading="authResultLoading"
                v-if="Object.keys(authJsonData).length"
              >
                <json-view :data="authJsonData"/>
              </div>
            </div>
          </template>
          <template>
            <div class="debugchunk">
              <div class="title" style="margin: 20px 0">
                <h1>测试数据设置</h1>
              </div>
              <div class="addressChunk">
                <div class="label">地址:</div>
                <div class="input">
                  <el-input v-model="interfaceAddress"></el-input>
                </div>
              </div>
              <div class="code-json-editor">
                <vue-json-editor
                  v-model="resultInfo"
                  :showBtns="false"
                  :mode="'code'"
                  @json-change="onJsonChange"
                  @json-save="onJsonSave"
                  @has-error="onError"
                  class="json-editor"
                />
              </div>
              <div class="btn">
                <el-button
                  type="primary"
                  :loading="debugGoLoading"
                  @click="debugGoHandle"
                  style="margin: 20px 0"
                >开始调试
                </el-button
                >
              </div>
              <h1>测试结果展示</h1>
              <div
                class="result"
                style="margin-top: 30px"
                v-loading="resultLoading"
                v-if="Object.keys(jsonData).length"
              >
                <json-view :data="jsonData"/>
              </div>
            </div>
          </template>
        </div>
      </div>
    </baseRightDialog>
    <baseDialog
      :title="'树管理'"
      v-model="treeDialog"
      @confirm="treeConfirm"
      :width="'30%'"
    >
      <div class="chunk">
        <div class="label" style="margin-bottom: 10px">业务模块名称:</div>
        <div class="value">
          <el-input v-model="treeObj.name" placeholder=""></el-input>
        </div>
      </div>
    </baseDialog>
    <baseDialog
      :title="'分享配置'"
      v-model="shareDialog"
      @confirm="shareConfirm"
      @close="shareClose"
      :width="'40%'"
    >
      <div class="shareDialog" v-if="shareDialog">
        <div class="left">
          <div class="title">应用模块</div>
          <div class="list" v-infinite-scroll="appLoad">
            <div
              class="item"
              v-for="(item, index) in shareUseList"
              :class="{actived:item.id===appActived.id}"
              :key="index"
              @click="activeAppHandle(item)"
            >
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title">业务模块</div>
          <div class="list" v-loading="businessLoading">
            <template v-if="businessUserList.length">
              <div class="item" v-for="(item, index) in businessUserList"
                   :class="{actived:item.id===businessUserActive.id}"
                   :key="index"
                   @click="activebusinessUserHandle(item)">
                <div class="name">{{ item.name }}</div>
              </div>
            </template>
            <template v-else>
              <el-empty description="选择应用"></el-empty>
            </template>
          </div>
        </div>
      </div>
    </baseDialog>
    <baseDialog
      :title="'接口日志'"
      v-model="logDialog"
      @confirm="logConfirm"
      :width="'80%'"
    >
      <div>
        <logTableChunk v-if="logDialog" :receiveApi="receiveApi"></logTableChunk>
      </div>
    </baseDialog>
  </div>
</template>

<script>
import {deepClone} from "@/utils/index.js";
import jsonView from "vue-json-views";
import vueJsonEditor from "vue-json-editor";
import baseRightDialog from "./compoments/baseRightDialog";
import baseNewForm from "./compoments/baseNewForm.vue";
import baseNewTable from "./compoments/baseTable.vue";
import basePage from "./compoments/basePage.vue";
import {getApiModuleApi, getApiResultApi} from "@/api/apiChunks/index.js";
import axios from "axios";
import baseDialog from "@/views/integrationOption/compoments/baseDialog";
import logTableChunk from "./messageManagementLog/index.vue";

export default {
  name: "ApiAdmin",
  data() {
    return {
      // 调试loading
      debugGoLoading: false,
      authDebugGoLoading: false,
      authResultLoading: false,
      resultLoading: false,
      // json数据
      authJsonData: {},
      jsonData: {},
      // json是否验证通过
      hasJsonFlag: true, // json是否验证通过
      authJsonFlag: true,
      //json数据
      resultInfo: {},
      authInfo: {},
      // 侧边栏是否开启
      rightDialog: false,
      // 搜索框loading
      searchLoading: false,
      // 搜索框输入数据
      searchForm: {},
      // 搜索框模版
      searchformRow: [
        {
          elCol: [
            {
              type: "input",
              title: "API名称",
              id: "apiCode",
            },
            {
              type: "select",
              title: "选择系统",
              id: "appId",
              options: [],
            },
          ],
        },
      ],
      // mainloading
      mainTabLoading: false,
      // 表格数据
      mainTableData: [],
      // 表格框架
      mainTableColumn: [
        {
          id: "catalogueName",
          title: "业务模块",
        },
        {
          id: "apiName",
          title: "接口名称",
        },
        {
          id: "apiCode",
          title: "接口编码",
          width: 180
        },
        {
          id: "destinationAddress",
          title: "接口地址",
        },
        {
          id: "apiRemark",
          title: "API描述",
        },
        {
          id: "errorCount",
          title: "异常统计",
        },
      ],
      // 表格操作按钮
      mainFunData: [
        {
          type: "edit",
          text: "编辑",
          color: "#5a9cf8",
        },
        {
          type: "debug",
          text: "调试",
          color: "#5a9cf8",
        },
        {
          type: "share",
          text: "分享",
          color: "#5a9cf8",
        },
        {
          type: "date",
          text: "接口日志",
          color: "#5a9cf8",
        },
        {
          type: "dele",
          text: "删除",
          color: "#e47470",
        },
      ],
      // 应用模块页码
      appPageModel: {
        pageIndex: 1,
        total: 2,
        limit: 10,
      },
      // 页码
      pageModel: {
        pageIndex: 1,
        total: 2,
        limit: 10,
      },
      // 点击调试后api接口信息
      debugInfo: {},
      authDebugInfo: {},
      treeList: [],
      // 左侧树
      treeDialog: false,
      treeObj: {},
      // 分享相关
      shareDialog: false,
      shareUseList: [],
      appActived: {},
      businessUserList: [],
      businessUserActive: {},
      apiActived: "",
      businessLoading: false,
      // 日志相关
      logDialog: false,
      interfaceAddress: "",
      authInterfaceAddress: "",
      receiveApi: "",
    };
  },
  methods: {
    // 应用模块下滑分页
    appLoad() {
      if (this.appPageModel.total > this.appPageModel.limit * this.appPageModel.pageIndex) {
        this.appPageModel.pageIndex++
        this.initQueryApp()
      }
    },
    // 应用模块关闭
    shareClose() {
      this.shareDialog = false;
      this.appActived = {}
      this.businessUserActive = {}
      this.businessUserList = []
      this.apiActived = ""
      this.shareUseList = []
    },
    // 应用模块点击事件
    activebusinessUserHandle(item) {
      this.businessUserActive = item
    },
    async activeAppHandle(item) {
      this.appActived = item
      this.businessLoading = true
      const res = await getApiModuleApi({
        tl: "sysApplicationService",
        as: "application",
        dj: "queryAppApiType"
      }, {appId: item.id})
      this.businessUserList = []
      res.attribute.forEach(item => {
        this.businessUserList.push({id: item.id, name: item.name})
      })
      this.businessLoading = false
    },
    // 应用模块请求
    async initQueryApp() {
      const res = await getApiModuleApi({
        tl: "sysApplicationService",
        as: "application",
        dj: "queryApp"
      }, {
        pageNum: this.appPageModel.pageIndex,
        pageSize: this.appPageModel.limit
      })
      // shareUseList
      if (res.status === '200') {
        this.appPageModel.total = res.attribute.total
        res.attribute.list.forEach(item => {
          this.shareUseList.push({id: item.id, name: item.name})
        })
      }
    },
    // 日志相关
    logConfirm() {
    },
    // 分享相关
    async shareConfirm() {
      if (!this.businessUserActive.id) {
        this.$vmNews("请选择业务模块", "warning")
        return
      } else {
        const res = await getApiModuleApi({
          tl: "sysApplicationService",
          as: "application",
          dj: "saveApiShare"
        }, {id: this.apiActived, appId: this.appActived.id, catalogueId: this.businessUserActive.id})
        if (res.status === '200') {
          this.$vmNews("分享成功", "success")
          this.shareClose()
        }

      }
    },
    // 树相关
    editTree(obj) {
      this.treeDialog = true;
      this.treeObj = deepClone(obj);
    },
    treeCLick(item) {
      this.$set(this.searchForm, 'catalogueId', item.id)
      this.$set(this.searchForm, 'name', item.name)
      this.getApiModuleHandle(this.searchForm)
    },
    // 树的初始化
    async initTreeData() {
      const res = await getApiModuleApi({
        tl: "sysApplicationService",
        as: "application",
        dj: "queryAppApiType"
      }, {appId: this.$route.query.id})
      if (res.status === '200') {
        this.treeList = res.attribute
      }
    },
    deleTree(item) {
      this.$confirm('确认删除该模块吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await getApiModuleApi({
          tl: "sysApplicationService",
          as: "application",
          dj: "deleteAppApiType"
        }, {
          appId: this.$route.query.id,
          name: item.name,
          id: item.id,
        })
        if (res.status === '200') {
          this.$vmNews('删除模块成功', 'success')
          if (item.id === this.searchForm.catalogueId) {
            this.treeObj = {}
            this.treeCLick({id: "", name: ""})
          }
          this.initTreeData()
        }
      }).catch(() => {

      })
    },
    openTreeDialog() {
      this.treeDialog = true;
      this.treeObj = {};
    },
    // 新增树
    async treeConfirm() {
      if (this.treeObj.id) {
        const res = await getApiModuleApi({
          tl: "sysApplicationService",
          as: "application",
          dj: "updateAppApiType"
        }, {
          appId: this.$route.query.id,
          name: this.treeObj.name,
          id: this.treeObj.id,
        })
        if (res.status === '200') {
          this.$vmNews('修改模块成功', 'success')
          this.treeDialog = false
          this.initTreeData()
        }
      } else {
        const res = await getApiModuleApi({
          tl: "sysApplicationService",
          as: "application",
          dj: "saveAppApiType"
        }, {
          appId: this.$route.query.id,
          name: this.treeObj.name
        })
        if (res.status === '200') {
          this.$vmNews('添加模块成功', 'success')
          this.initTreeData()
        }
      }
      this.treeDialog = false;
    },
    // 删除行
    async deleTableHandle(id) {
      const res = await getApiModuleApi(
        {
          tl: "sysApplicationService",
          as: "application",
          dj: "deleteApi",
        },
        {id}
      );
      if (res.status == 200) {
        if (
          this.pageModel.pageIndex * this.pageModel.limit >=
          this.pageModel.total - 1 + this.pageModel.limit
        ) {
          this.pageModel.pageIndex--;
        }
        this.$nextTick(() => {
          this.getApiModuleHandle(this.searchForm);
        });
      }
    },
    // 获取api模块
    async getApiModuleHandle(obj = {}) {
      this.mainTabLoading = true;
      const res = await getApiModuleApi(
        {
          tl: "sysApplicationService",
          as: "application",
          dj: "queryAppApi",
        },
        {
          pageNum: this.pageModel.pageIndex,
          pageSize: this.pageModel.limit,
          appId: this.$route.query.id,
          ...obj,
        }
      );
      if (res.status == 200) {
        if (
          this.pageModel.pageIndex * this.pageModel.limit >=
          this.pageModel.total - 1 + this.pageModel.limit
        ) {
          this.pageModel.pageIndex--;
        }
        this.pageModel.total = res.attribute.total;
        this.mainTableData = res.attribute.list;
        this.$nextTick(() => {
          this.$refs.mainTable.setTableKey();
        });
      }
      this.mainTabLoading = false;
    },
    // 实时保存
    onAuthJsonChange(value) {
      this.onAuthJsonSave(value);
    },
    onAuthJsonSave(value) {
      this.authInfo = value;
      this.authJsonFlag = true;
    },
    onAuthError(value) {
      this.authJsonFlag = false;
    },
    checkAuthJson() {
      if (this.authJsonFlag === false) {
        alert("json验证失败");
        return false;
      } else {
        return true;
      }
    },
    onJsonChange(value) {
      this.onJsonSave(value);
    },
    // json相关
    onJsonSave(value) {
      this.resultInfo = value;
      this.hasJsonFlag = true;
    },
    // json相关（不用管）
    onError(value) {
      this.hasJsonFlag = false;
    },
    // json相关（不用管）
    checkJson() {
      if (this.hasJsonFlag === false) {
        alert("json验证失败");
        return false;
      } else {
        return true;
      }
    },
    // 关闭dialog事件
    dialoghandleClose() {
      this.rightDialog = false;
      this.jsonData = {};
      this.authJsonData = {};
      this.resultInfo = {};
      this.authInfo = {};
    },
    // 搜索框按钮
    searchBtnHandle() {
      this.pageModel.pageIndex = 1;
      this.$nextTick(() => {
        this.getApiModuleHandle(this.searchForm);
      });
    },
    // 重置按钮
    resizeBtnHandle() {
      this.searchForm = {};
    },
    // 点击调试后接口信息获取以及二次加工
    async getDebugInfoHandle(id, json, auth = false) {
      const res = await getApiModuleApi(
        {
          tl: "sysApplicationService",
          as: "application",
          dj: "debugAppApi",
        },
        {id, appId: this.$route.query.id}
      );
      if (res.status === '200') {
        // 拼接请求连接
        if (auth) {
          this.authInterfaceAddress = res.attribute.app.interfaceAddress ? res.attribute.app.interfaceAddress + res.attribute.api.destinationAddress : res.attribute.api.destinationAddress
        } else {
          this.interfaceAddress = res.attribute.app.interfaceAddress ? res.attribute.app.interfaceAddress + res.attribute.api.destinationAddress : res.attribute.api.destinationAddress
        }
        // 将表格数据转json
        let bodyIn = JSON.parse(res.attribute.api.bodyIn)
        let bodyFlag = bodyIn[0].parameterType !== "complex"
        let queryObj = {};
        let headerObj = {};
        let bodyObj
        let bodyOut = {};
        if (!bodyFlag) {
          bodyObj = {};
        } else {
          bodyObj = [{}];
        }
        // 应用带下来的header和body拼接
        res.attribute.para.forEach(item => {
          if (item.interfaceType === '1') {
            headerObj[item.interfaceKey] = item.interfaceValue === null ? "" : item.interfaceValue;
          } else if (!bodyFlag) {
            bodyObj[item.interfaceKey] = item.interfaceValue === null ? "" : item.interfaceValue;
          }
        })
        // 如果存在认证接口
        if (res.attribute.api.needLogin == 1) {
          this.getDebugInfoHandle(
            res.attribute.api.authenticationPort,
            this.authInfo,
            true
            // this.authDebugInfo
          ).then((val) => (this.authDebugInfo = val));
        }
        if (
          JSON.parse(res.attribute.api.headerIn)
        ) {
          this.DebugDataHandle(headerObj, JSON.parse(res.attribute.api.headerIn));
          this.$set(json, "headers", deepClone(headerObj));
        } else {
          this.$set(json, "headers", {});
        }
        if (
          JSON.parse(res.attribute.api.queryIn).length &&
          JSON.parse(res.attribute.api.queryIn).length
        ) {
          this.DebugDataHandle(queryObj, JSON.parse(res.attribute.api.queryIn));
          this.$set(json, "query", deepClone(queryObj));
        } else {
          this.$set(json, "query", {});
        }
        if (
          JSON.parse(res.attribute.api.bodyIn)
        ) {
          if (!bodyFlag) {
            this.DebugDataHandle(bodyObj, bodyIn[0].children)
          } else {
            this.DebugDataHandle(bodyObj[0], bodyIn[0].children)
          }
          this.$set(json, "body", deepClone(bodyObj));
        } else {
          this.$set(json, "body", {});
        }
        // 数据字典处理
        let tempObj = {...res.attribute.api};
        let obj = {
          needLogin: {
            1: "是",
            2: "否",
          },
          enableAccessEntry: {
            1: "APP",
            2: "H5",
          },
          requestCoding: {
            1: "UTF-8",
          },
          parameterPassingMode: {
            1: "query",
            2: "data",
          },
          requestMethod: {
            1: "POST",
            2: "GET",
          },
          serviceAccessProtocol: {
            1: "HTTP",
            2: "HTTPS",
          },
        };
        Object.keys(tempObj).forEach((item) => {
          if (obj[item]) {
            if (JSON.parse(tempObj[item]) instanceof Array) {
              let tempstr = "";
              JSON.parse(tempObj[item]).forEach((ele) => {
                tempstr += obj[item][ele] + "、";
              });
              tempObj[item] = tempstr.slice(0, -1);
            } else {
              tempObj[item] = obj[item][tempObj[item] * 1];
            }
          }
        });
        return tempObj;
      }
    },
    // 点击调试
    async debugGoHandle() {
      if (this.checkJson()) {
        this.debugGoLoading = true;
        this.resultLoading = true;
        let tempUrl =
          this.interfaceAddress;
        try {
          if (
            this.resultInfo.query &&
            Object.keys(this.resultInfo.query).length
          ) {
            tempUrl = tempUrl + "?";
            Object.keys(this.resultInfo.query).forEach((item) => {
              tempUrl += `${item}=${this.resultInfo.query[item]}&`;
            });
            tempUrl = tempUrl.slice(0, -1);
          }
          const res = await getApiResultApi({
            method: this.debugInfo.requestMethod,
            url: tempUrl,
            ...this.resultInfo,
          });
          if (res.status == 200) {
            this.jsonData = deepClone(JSON.parse(res.msg));
          }
        } catch (error) {
          // this.$message({
          //   type: "warning",
          //   message: error,
          // });
        }
        this.resultLoading = false;
        this.debugGoLoading = false;
      }
    },
    //点击认证调试
    async authDebugGoHandle() {
      this.authDebugGoLoading = true;
      if (this.checkAuthJson()) {
        this.authResultLoading = true;
        let tempUrl =
          this.authInterfaceAddress;
        try {
          if (this.authInfo.query && Object.keys(this.authInfo.query).length) {
            tempUrl = tempUrl + "?";
            Object.keys(this.authInfo.query).forEach((item) => {
              tempUrl += `${item}=${this.authInfo.query[item]}&`;
            });
            tempUrl = tempUrl.slice(0, -1);
          }
          const res = await getApiResultApi({
            method: this.authDebugInfo.requestMethod,
            url: tempUrl,
            ...this.authInfo,
          });
          if (res.status == 200) {
            this.authJsonData = deepClone(JSON.parse(res.msg));
            this.authDataSearch();
          }
        } catch (error) {
          // this.$message({
          //   type: "warning",
          //   message: error,
          // });
        }
        this.authResultLoading = false;
      }
      this.authDebugGoLoading = false;
    },
    authDataSearch() {
      if (JSON.parse(this.debugInfo.headerIn)) {
        this.authDataHandle(
          this.resultInfo.headers,
          JSON.parse(this.debugInfo.headerIn)
        );
      }
      if (JSON.parse(this.debugInfo.bodyIn)) {
        this.authDataHandle(
          this.resultInfo.body,
          JSON.parse(this.debugInfo.bodyIn)
        );
      }
    },
    authDataHandle(obj, arr) {
      arr.forEach((item) => {
        if (item.parameterType === "authport") {
          obj[item.parameterName] = this.authDataReturn(item.example);
        }
        if (item.children && item.children.length) {
          this.authDataHandle(obj[item.parameterName], item.children);
        }
      });
    },
    authDataReturn(arr) {
      let temp = deepClone(this.authJsonData);
      let flag = arr.some((item) => {
        if (temp[item]) {
          temp = temp[item];
          return false;
        } else {
          this.$message({
            type: "error",
            message: "数据处理失败，认证存在无效值",
          });
          return true;
        }
      });
      if (!flag) {
        return temp;
      }
    },
    isNumberOrFloat(str) {
      let num = parseFloat(str);
      return !isNaN(num) && isFinite(num);
    },
    // delog数据处理辅助函数（递归）
    DebugDataHandle(obj, arr) {
      arr.forEach((item) => {
        const {parameterName, concreteType, parameterType, example, children} = item;
        if (parameterName && concreteType) {
          if (!["Object", "ObjectCom", "Map"].includes(concreteType)) {
            if (parameterType === "authport") {
              obj[parameterName] = "";
            } else if (parameterType === "fundamentallist") {
              obj[parameterName] = [example];
            } else if (concreteType === "Number" && this.isNumberOrFloat(example)) {
              obj[parameterName] = example * 1
            } else {
              obj[parameterName] = example !== "" ? (example === "false" || example === "true" ? JSON.parse(example) : example) : "";
            }
          } else {
            if (concreteType === "Object" || concreteType === "Map") {
              obj[parameterName] = {};
              if (children && children.length) {
                this.DebugDataHandle(obj[parameterName], children);
              }
            } else if (concreteType === "ObjectCom") {
              obj[parameterName] = [{}];
              this.DebugDataHandle(obj[parameterName][0], children);
            }
          }
        }
      });
    },
    // 主表的操作按钮方法
    tableButtonHandle(val, item) {
      if (item.type === "debug") {
        this.rightDialog = true;
        this.getDebugInfoHandle(val.id, this.resultInfo).then((val) => {
          this.debugInfo = val;
        });
      } else if (item.type === "dele") {
        this.$confirm("确认删除？")
          .then(() => {
            this.deleTableHandle(val.id);
          })
          .catch(() => {
          });
      } else if (item.type === "edit") {
        this.$router.push({
          name: "appApiAdd",
          query: {apiId: val.id, ...this.$route.query},
        });
      } else if (item.type == "share") {
        this.initQueryApp()
        this.apiActived = val.id
        this.shareDialog = true;
      } else if (item.type == "date") {
        this.logDialog = true;
        this.receiveApi = val.id
      }
    },
    // 点击查看
    viewHandle(row) {
      // this.$router.push({name: "appApiView", query: {id: row.id}});
    },
    // 切页吗
    currentChangeHandle(pageModel) {
      this.pageModel = pageModel;
      this.$nextTick(() => {
        this.getApiModuleHandle(this.searchForm);
      });
    },
    // 点击新增
    goAddHandle() {
      this.$router.push({
        name: "appApiAdd",
        query: {
          catalogueId: this.searchForm.catalogueId,
          catalogueName: this.searchForm.name,
          id: this.$route.query.id,
          name: this.$route.query.name,
          add: true,
        }
      });
    },
  },
  computed: {
    // 操作框的宽度
    funWidth() {
      return this.mainFunData.length * 70;
    },
  },
  components: {
    baseNewForm,
    baseNewTable,
    basePage,
    baseRightDialog,
    vueJsonEditor,
    jsonView,
    baseDialog,
    logTableChunk,
  },
  mounted() {
    this.initTreeData()
    this.getApiModuleHandle();
    this.$emit("flashActive", 2)
  },
  activated() {
    this.getApiModuleHandle(this.searchForm);
  },
  beforeRouteLeave(to, from, next) {
    if (
      to.path != "/middleground/jcapipz/apiview" &&
      to.path != "/middleground/jcapipz/apiAdd"
    ) {
      next();
      this.$destroy("ApiAdmin");
    } else {
      next();
    }
  },
};
</script>

<style scoped lang='scss'>
::v-deep .el-button {
  border-radius: 16px;
}

.apiWrap {
  background-color: #fbfbfb;
  overflow: scroll;
  width: 100%;

  .searchBox {
    margin: 10px;
    padding: 15px;
    background-color: #fff;
    border-radius: 20px;

    .searchbtn {
      margin-left: 80%;
    }
  }

  .tablebox {
    .tablebtn {
      padding: 10px 15px;
      border-radius: 16px;
      margin-bottom: 5px;
      background: #fff;
      display: flex;
      justify-content: space-between;

      > .search {
        margin-left: 10px;
      }
    }

    .main {
      display: flex;

      .tree {
        width: 15%;
        background-color: #fff;
        border-radius: 16px;
        margin-right: 0.5%;
        padding: 0 10px;
        height: 83vh;
        overflow: auto;

        > .title {
          margin-top: 26px;
          padding: 14px;
          border-radius: 16px;
          background-color: #f7f7f7;
          font-weight: 600;
          text-align: center;
          position: relative;

          > i {
            position: absolute;
            top: 14px;
            right: 10px;
            cursor: pointer;
          }
        }

        > .item {
          text-align: left;
          margin: 10px 0;
          border-radius: 16px;
          padding: 10px 15px;
          display: flex;
          justify-content: space-between;

          cursor: pointer;

          i {
            margin-right: 5px;
            cursor: pointer;
          }

          .btn {
            display: none;
          }

          &:hover {
            background-color: #f7f7f7;

            .btn {
              display: block;
            }
          }
        }

        .actived {
          background-color: #f7f7f7 !important;
        }
      }

      .left {
        background-color: #fff;
        border-radius: 16px;
        width: 84%;
        padding: 15px;
      }
    }
  }

  .page {
  }

  .rightdalog {
    width: 100vw;
    padding: 20px;

    .debugchunk {
      margin-bottom: 20px;


      .title {
        margin-bottom: 20px;
      }
    }
  }
}

.shareDialog {
  display: flex;
  justify-content: space-around;

  .left,
  .right {
    flex: 0.48;
    position: relative;

    > .title {
      text-align: center;
      font-size: 18px;
      padding: 10px;
      background-color: #f7f7f7;
      border-radius: 16px;
      margin-bottom: 10px;
    }

    > .list {
      height: 50vh;
      padding: 15px;
      height: 40vh;
      overflow: auto;

      .item {
        cursor: pointer;
        padding: 15px;
        border-radius: 16px;
        font-size: 14px;

        &:hover {
          background-color: #fafafa;
        }
      }

      .actived {
        background-color: #fafafa !important;
      }
    }
  }
}

.addressChunk {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .label {
    flex: 0.1;
  }

  .input {
    flex: 0.9;
  }
}
</style>

<style lang="less" scoped>
.code-json-editor {
  /* jsoneditor右上角默认有一个链接,加css去掉 */

  /deep/ .jsoneditor-poweredBy {
    display: none !important;
  }

  /deep/ .jsoneditor-menu {
    background-color: #fff !important;
    color: #000 !important;

    button {
      background-color: #4c81f2 !important;
    }
  }

  /deep/ .ace_gutter {
    background-color: #fff;
    border-right: 1px solid gainsboro;
  }

  /deep/ .ace-jsoneditor {
    height: 200px !important;
  }
}
</style>
