<route lang="yaml">
    name: apiManagement
    </route>

<script lang="ts" setup name="apiManagement">
import { ref } from 'vue';
import { TableColumnWidth } from '@/utils/enum';
import { commonPageConfig } from '@/components/PageNav/index';
import TableTools from '@/components/Tools/table_tools.vue'
import { useValidator } from '@/hooks/useValidator';
import { useRouter, useRoute } from "vue-router";
import { isNeedApprove, passFlowData, rejectFlowData, revokeFlowData } from "@/api/modules/workFlowService";
import {
  apiTypes,
  getAPIList,
  updateAPIState,
  addApiApprove,
  deleteApi,
  copyApi,
  checkExistAPIName,
} from "@/api/modules/dataService";
import useDataServiceStore from "@/store/modules/dataService";
import useUserStore from "@/store/modules/user";
import { changeNum } from '@/utils/common';

const router = useRouter();
const dataServiceStore = useDataServiceStore();
const { required, chOrEnPreffix, regexpValidate, checkExistName } = useValidator();
const userStore = useUserStore()
const userData = JSON.parse(userStore.userData)
const { proxy } = getCurrentInstance() as any;

onBeforeMount(() => {
  //TODO，需要调用isNeedApprove接口判断是否需要审批，判断是否显示审批列
  getTableData();
});

onActivated(() => {
  /** 若是新建则默认选中对应的标签展示列表。 */
  if (dataServiceStore.isUpdate) {
    getTableData();
    dataServiceStore.setIsUpdate(false);
  }
})

const APIDataPage: any = ref({
  ...commonPageConfig, apiType: '',
  apiName: '',//API标签名称搜索。
  approveState: ''
});

/** api管理列表表格数据上方搜索区域 */
const tableSearchItemList: any = ref([
  {
    type: 'input',
    label: '',
    field: 'apiName',
    default: '',
    placeholder: 'API名称',
    maxlength: 50,
    clearable: true
  }, {
    type: 'select',
    label: '',
    field: 'apiType',
    default: '',
    placeholder: 'API类型',
    options: apiTypes,
    clearable: true
  }, 
  // {
  //   type: 'select',
  //   label: '',
  //   field: 'approveState',
  //   default: '',
  //   placeholder: '全部状态',
  //   options: [
  //     { label: '草稿中', value: 'N' },
  //     { label: '审批中', value: 'A' },
  //     { label: '已通过', value: 'Y' },
  //     { label: '已驳回', value: 'R' },
  //     { label: '已撤销', value: 'C' },
  //   ],
  //   clearable: true
  // }
]);

const getTableData = () => {
  tableInfo.value.loading = true;
  getAPIList({
    // tagGuid: lastClickNode.value.guid,
    pageSize: APIDataPage.value.limit,
    pageIndex: APIDataPage.value.curr,
    apiName: APIDataPage.value.apiName,
    apiType: APIDataPage.value.apiType,
    approveState: APIDataPage.value.approveState
  }).then((res: any) => {
    tableInfo.value.loading = false;
    if (res.code == proxy.$passCode) {
      const data = res.data || {};
      tableInfo.value.data = data.records || []
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

const toTableSearch = (val, clear) => {
  APIDataPage.value.curr = 1;
  if (clear) {
    APIDataPage.value.apiType = '';
    APIDataPage.value.apiName = '';
    APIDataPage.value.dataState = null;
    APIDataPage.value.approveState = '';
    getTableData();
    return;
  }
  APIDataPage.value.apiType = val.apiType;
  APIDataPage.value.apiName = val.apiName;
  if (!val.approveState) {
    APIDataPage.value.approveState = '';
  } else {
    APIDataPage.value.approveState = val.approveState;
  }
  getTableData();
}

const handleAPICreateCommand = (command: string) => {
  router.push({
    name: 'apiCreate',
    query: {
      type: command,
    }
  });
}

/** 记录正在提交审批流程的api，防止重复提交 */
const addApprovePromise = ref({});
const selectRowData: any = ref([])
const currTableData: any = ref({});
const tableInfo = ref({
  id: 'api-data-table',
  rowKey: 'guid',
  loading: false,
  multiple: false,
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "API名称", field: "apiName", width: 140, align: "left" },
    {
      label: "API类型", field: "apiType", width: 100, align: "left", getName: (scope) => {
        return apiTypes.find(a => a.value == scope.row.apiType)?.label;
      }
    },
    {
      label: "调用次数", field: "invokeCount", width: 100, align: 'right', type: 'chnum'
    },
    {
      label: "调用异常数", field: "invokeErrorCount", width: 105, align: 'right', type: 'chnum'
    },
    {
      label: "平均响应时间(s)", field: "averageRespTime", width: 130, align: 'right', type: 'chnum'
    },
    {
      label: "绑定连接器数", field: "bindingCount", width: 130, align: 'right', type: "text_btn", value: "detail", click: (scope) => {
        if (!scope.row.bindingCount) {
          proxy.$ElMessage.warning('当前没有绑定连接器');
          return;
        }
        //TODO, 查看连接器信息。
      }, getName: (scope) => {
        return scope.row.bindingCount != null ? changeNum(scope.row.bindingCount ?? 0) : '--';
      }
    },
    { label: "API请求路径", field: "requestUrl", width: TableColumnWidth.DESCRIPTION },
    {
      label: '状态', field: 'apiState', type: 'switch', activeText: '启用', inactiveText: '停用', activeValue: 1, inactiveValue: 0, switchWidth: 56, width: 96, align: 'center'
    },
    { label: "API描述", field: "apiDescription", width: TableColumnWidth.DESCRIPTION },
    { label: "修改人", field: "updateUserName", width: TableColumnWidth.USERNAME },
    { label: "修改时间", field: "updateTime", width: 170 },
  ],
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...APIDataPage.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    isMore: false,
    width: 180,
    btns: (scope) => {
      const { row } = scope;
      let list: any = [];
      list.push({ label: "编辑", disabled: row.apiState == 1, value: "edit", click: apiManageTableBtnMap.EDIT });
      list.push({ label: "删除", disabled: row.apiState == 1, value: "del", click: apiManageTableBtnMap.DELETE });
      list.push({ label: "详情", value: "detail", click: apiManageTableBtnMap.DETAIL });
      list.push({ label: "复制", value: "copy", click: apiManageTableBtnMap.COPY })
      return list;
      // const approveVO = row.approveVO || {};
      // if (!approveVO && row.isApprove == 'N') {
      //   list.push({ label: "编辑", value: "edit", click: apiManageTableBtnMap.EDIT });
      //   list.push({ label: "删除", value: "del", click: apiManageTableBtnMap.DELETE });
      //   list.push({ label: "详情", value: "detail", click: apiManageTableBtnMap.DETAIL });
      //   list.push({ label: "复制", value: "copy", click: apiManageTableBtnMap.COPY })
      //   return list;
      // }
      // const currentStaffGuid = userData.staffGuid
      // const bizApproveState = row.bizApproveState;
      // const approveState = approveVO.approveState || null;
      // const approveStaffGuids = approveVO.approveStaffGuids || [];
      // const staffGuid = approveVO.staffGuid || '';
      // let isShowCancel = false;
      // let flowState;
      // if (approveState == 'N') {
      //   flowState = 1;
      // }
      // if (approveState == 'A' && approveStaffGuids.indexOf(currentStaffGuid) > -1) {
      //   flowState = 2;
      // }
      // if ((approveState == 'C' || approveState == 'R') && staffGuid == currentStaffGuid) {
      //   flowState = 3;
      // }
      // if (approveVO && approveVO.approveState == 'A' && staffGuid == currentStaffGuid) {
      //   isShowCancel = true;
      // }
      // if (flowState === 1) {
      //   list = [{ label: "编辑", value: "edit", click: apiManageTableBtnMap.EDIT }]
      // }
      // if (flowState === 2) {
      //   list = [{ label: "通过", value: "pass", click: apiManageTableBtnMap.PASS }, { label: "驳回", value: "reject", click: apiManageTableBtnMap.REJECT }]
      // }
      // if (approveState == 'Y' && row.apiState != 1 && staffGuid == currentStaffGuid) {
      //   list = [{ label: "编辑", value: "edit", click: apiManageTableBtnMap.EDIT }]
      // }
      // if (flowState === 3 || (row.apiState != 1 && approveState !== 'A')) {
      //   list.push({ label: "删除", value: "del", click: apiManageTableBtnMap.DELETE })
      // }
      // if (flowState === 3 && bizApproveState != 'D') {
      //   list.push({ label: "重新提交", value: "redit", click: apiManageTableBtnMap.EDIT })
      // }
      // if (isShowCancel) {
      //   list.push({ label: "撤销", value: "revoke", click: apiManageTableBtnMap.REVOKE })
      // }
      // if (flowState !== 1) {
      //   list.push({ label: "详情", value: "detail", click: apiManageTableBtnMap.DETAIL })
      // }
      // list.push({ label: "复制", value: "copy", click: apiManageTableBtnMap.COPY })
      // return list
    },
  }
});

/** api管理表格的操作按钮事件。 */
const apiManageTableBtnMap = {
  /** 编辑 */
  EDIT: (scope) => {
    router.push({
      name: 'apiCreate',
      query: {
        guid: scope.row.guid,
        apiName: scope.row.apiName,
        // tagGuid: lastClickNode.value.guid
      }
    });
  },
  /** 详情 */
  DETAIL: (scope) => {
    let row = scope.row;
    router.push({
      name: 'apiDetail',
      query: { guid: row.guid, apiName: row.apiName }
    });
    return;
    // const approveVO = row.approveVO || {};
    // if (!approveVO && row.isApprove == 'N') {
    //   router.push({
    //     name: 'apiDetail',
    //     query: { guid: row.guid, type: 'detail' }
    //   });
    //   return;
    // }
    // if (!row.approveGuid) {
    //   proxy.$ElMessage.error(`【${row.apiName}】关联流程已删除！`);
    //   return;
    // }
    // router.push({
    //   name: 'APIProcessDetail',
    //   query: { guid: row.approveGuid, type: 'detail' }
    // });
  },
  /** 撤回 */
  REVOKE: (scope) => {
    proxy.$openMessageBox('确定撤销该API审批吗？', () => {
      let params = {
        guid: scope.row.approveGuid,
        approveStaffGuid: userData.staffGuid
      }
      revokeFlowData(params).then((res: any) => {
        if (res.code == proxy.$passCode) {
          getTableData();
          proxy.$ElMessage.success('撤销成功');
        } else {
          proxy.$ElMessage.error(res.msg);
        }
      })
    }, () => {
      proxy.$ElMessage({
        type: 'info',
        message: '已取消撤销'
      });
    });
  },
  SUBMIT: (scope) => {
    if (addApprovePromise.value[scope.row.guid]) {
      return;
    }
    addApprovePromise.value[scope.row.guid] = addApiApprove(scope.row.guid).then((res: any) => {
      delete addApprovePromise.value[scope.row.guid];
      if (res.code == proxy.$passCode) {
        getTableData();
        proxy.$ElMessage({
          type: 'success',
          message: '该API提交成功'
        })
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    })
  },
  PASS: (scope) => {
    approveSuggest.value = '';
    approveType.value = 'pass';
    dialogTitle.value = '通过理由'
    dialogVisible.value = true;
  },
  REJECT: (scope) => {
    approveSuggest.value = '';
    approveType.value = 'reject';
    dialogTitle.value = '驳回理由'
    dialogVisible.value = true;
  },
  DELETE: (scope) => {
    proxy.$openMessageBox("确定要删除该API吗?", () => {
      deleteApi(scope.row.guid).then((res: any) => {
        if (res.code == proxy.$passCode) {
          APIDataPage.value.curr = 1;
          getTableData();
          proxy.$ElMessage.success('删除该API成功');
        } else {
          proxy.$ElMessage.error(res.msg);
        }
      });
    })
  },
  COPY: (scope) => {
    currTableData.value = scope.row;
    copyApiFormItems.value[0].default = scope.row.apiName + '_copy';
    copyApiFormItems.value[1].children && (copyApiFormItems.value[1].children[1].default = scope.row.requestPath + '-copy');
    copyApiDialogInfo.value.formInfo.items = copyApiFormItems.value;
    copyApiDialogInfo.value.visible = true;
  }
}

const approveSuggest = ref();
const dialogTitle = ref('通过理由');
const dialogVisible = ref(false);
//弹窗类型
const approveType = ref();

const passSubmit = () => {
  let row = currTableData.value
  dialogVisible.value = false;
  tableInfo.value.loading = true;
  passFlowData({
    guid: row.approveVO.approveGuid,
    flowType: row.approveVO.flowType,
    approveSuggest: approveSuggest.value,
    approveStaffGuid: userData.staffGuid,
  }).then((res: any) => {
    tableInfo.value.loading = false;
    if (res.code == '00000') {
      proxy.$ElMessage.success('审批通过！')
      getTableData();
    } else {
      proxy.$ElMessage.error(res.msg)
    }
  })

}
const rejectSubmit = () => {
  if (!approveSuggest.value) return proxy.$ElMessage.error('请填写驳回理由！')
  let row = currTableData.value
  dialogVisible.value = false;
  tableInfo.value.loading = true;
  rejectFlowData({
    guid: row.approveVO.approveGuid,
    flowType: row.approveVO.flowType,
    approveSuggest: approveSuggest.value,
    approveStaffGuid: userData.staffGuid,
  }).then((res: any) => {
    if (res.code == '00000') {
      tableInfo.value.loading = false;
      proxy.$ElMessage.success('驳回成功！')
      getTableData();
    } else {
      proxy.$ElMessage.error(res.msg)
    }
  })
}

const apiTablePageChange = (info) => {
  APIDataPage.value.curr = Number(info.curr);
  APIDataPage.value.limit = Number(info.limit);
  tableInfo.value.page.limit = APIDataPage.value.limit;
  tableInfo.value.page.curr = APIDataPage.value.curr;
  getTableData();
};

const tableSwitchBeforeChange = (scope, field, callback) => {
  const msg = `确定【${scope.row[field] == 1 ? '停用' : '启用'}】该API吗?`;
  proxy.$openMessageBox(msg, () => {
    const state = scope.row[field] == 1 ? 0 : 1
    const result = tableSwitchChange(state, scope, field)
    callback(result)
  }, () => {
    callback(false)
  });
}

const tableSwitchChange = (val, scope, field) => {
  return new Promise((resolve, reject) => {
    let params = {
      guid: scope.row.guid,
      apiState: val
    }
    updateAPIState(params).then((res: any) => {
      if (res.code == proxy.$passCode && res.data) {
        getTableData();
        proxy.$ElMessage({
          type: "success",
          message: `该API${val == 1 ? '启用' : '停用'}成功`,
        });
        resolve(true)
      } else {
        proxy.$ElMessage({
          type: "error",
          message: res.msg,
        });
        getTableData();
        reject(false)
      }
    }).catch(() => {
      getTableData();
      reject(false)
    })
  })
}

const tableSelectionChange = (val) => {
  selectRowData.value = val;
};

/** -------------- 复制功能 -------------------  */
const copyApiFormItems = ref([{
  type: 'input',
  label: 'API名称',
  field: 'apiName',
  default: '',
  regexp: /[^a-zA-Z0-9_\u4e00-\u9fa5-]/g,
  block: true,
  placeholder: '请输入',
  maxlength: 50,
  clearable: true,
  required: true
}, {
  type: "select-group",
  field: "httpInfo",
  col: ' select-input-long-reverse',
  block: true,
  children: [
    {
      label: "API请求路径",
      type: "input",
      placeholder: "请选择",
      default: "https",
      field: "httpType",
      required: true,
      disabled: true,
      visible: true,
    },
    {
      label: "   ",
      type: "input",
      placeholder: "请输入",
      default: '/',
      field: "requestPath",
      maxlength: 50,
      required: true,
      visible: true,
    },
  ],
  visible: true
}]);

/** 记录已检验过的APIName */
const checkedInfo = ref({});

const copyApiFormRules = ref({
  apiName: [required("请填写API名称"), chOrEnPreffix(), checkExistName(checkedInfo.value, checkExistAPIName, '')],
  requestPath: [required("请填写请求路径"), regexpValidate(/^\/[^\/][\w\u4e00-\u9fa5_-]*$/, '请输入合法的请求路径')],
});

const copyApiDialogInfo = ref({
  visible: false,
  size: 480,
  title: "复制API",
  type: 'add',
  formInfo: {
    id: 'add-authorize-form',
    items: copyApiFormItems.value,
    rules: copyApiFormRules.value
  },
  btns: {
    submit: (btn, info) => {
      info.guid = currTableData.value.guid;
      copyApiDialogInfo.value.submitBtnLoading = true;
      copyApi(info).then((res: any) => {
        copyApiDialogInfo.value.submitBtnLoading = false;
        if (res.code == proxy.$passCode) {
          APIDataPage.value.curr = 1;
          getTableData();
          proxy.$ElMessage({
            type: 'success',
            message: `【${info.apiName}】API复制成功`
          })
          copyApiDialogInfo.value.visible = false;
        } else {
          proxy.$ElMessage.error(res.msg);
        }
      })
    },
    cancel: () => {
      copyApiDialogInfo.value.visible = false;
    }
  },
  submitBtnLoading: false
});

</script>

<template>
  <div class="container_wrap full flex">
    <div class="main_wrap">
      <div class="table_tool_wrap">
        <TableTools ref="tableTools" :searchItems="tableSearchItemList" :init="false" :searchId="'api-table-search'"
          @search="toTableSearch" />
        <div class="tools_btns">
          <el-dropdown popper-class="table-create-menu" @command="handleAPICreateCommand" placement="bottom-start"
            trigger="click">
            <span class="el-dropdown-link">
              <el-button type="primary">新建API</el-button>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="1">
                  <el-icon style="width: 24px;height: 24px;">
                    <svg-icon style="width: 24px;height: 24px;" name="api-single-table" />
                  </el-icon>
                  <div class="item-content">
                    <span class="item-content-title">单表API</span>
                    <span class="item-content-desc">选单表中的字段进行对外输出</span>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item command="2">
                  <el-icon style="width: 24px;height: 24px;">
                    <svg-icon style="width: 24px;height: 24px;" name="api-sql" />
                  </el-icon>
                  <div class="item-content">
                    <span class="item-content-title">自定义sql</span>
                    <span class="item-content-desc">对复杂接口的配置</span>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item command="3">
                  <el-icon style="width: 24px;height: 24px;">
                    <svg-icon style="width: 24px;height: 24px;" name="api-regist" />
                  </el-icon>
                  <div class="item-content">
                    <span class="item-content-title">注册API</span>
                    <span class="item-content-desc">已有的API接口，通过注册进行线上监控和维护</span>
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="table_panel_wrap">
        <Table :tableInfo="tableInfo" @tablePageChange="apiTablePageChange"
          @tableSwitchBeforeChange="tableSwitchBeforeChange" @tableSelectionChange="tableSelectionChange" />
      </div>
    </div>
    <!-- 复制对话框 -->
    <Dialog_form :dialogConfigInfo="copyApiDialogInfo" />
    <el-dialog v-model="dialogVisible" width="40%">
      <template #title>
        <div v-if="dialogTitle == '驳回理由'">{{ dialogTitle }}<span style="color:red;">*</span></div>
        <div v-else>{{ dialogTitle }}</div>
      </template>
      <el-input type="textarea" :rows="4" maxlength="100" v-model="approveSuggest" show-word-limit resize="none">
      </el-input>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button v-if="approveType == 'pass'" type="primary" @click="passSubmit">通过</el-button>
          <el-button v-if="approveType == 'reject'" type="primary" @click="rejectSubmit">驳回</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.container_wrap {
  padding: 0;
  display: flex;
  justify-content: space-between;

  .aside_wrap {
    width: 199px;
    border-right: 1px solid #d9d9d9;
    box-shadow: none;

    .aside_title {
      width: calc(100% - 32px);
      display: inline-block;
    }

    .icon-add.el-icon {
      width: 24px;
      height: 24px;
      vertical-align: middle;
      cursor: pointer;

      svg {
        width: 24px;
        height: 24px;
      }
    }

    :deep(.tree_panel) {
      height: 100%;
      padding-top: 0;

      .el-tree {
        margin: 0;
        height: calc(100% - 68px);
        overflow: hidden auto;
      }
    }

  }

  .main_wrap {
    padding: 0 16px;
    height: auto;
    flex: 1;

    .table_panel_wrap {
      height: calc(100% - 92px);
    }
  }
}

:deep(.el-form) {
  .select-input-long {
    .el-form-item:first-child {
      width: 67%;
      margin-right: 0px;
    }

    .el-form-item:last-child {
      width: 33%;
      margin-right: 0px;

      .item-label {
        white-space: pre;

        .required_mark::after {
          content: '';
        }
      }
    }
  }

  .select-input-long-reverse {
    .el-form-item:first-child {
      width: 100px;
      margin-right: 0px;
    }

    .el-form-item:last-child {
      width: calc(100% - 100px);
      margin-right: 0px;

      .item-label {
        white-space: pre;

        .required_mark::after {
          content: '';
        }
      }
    }
  }
}
</style>