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

<script lang="ts" setup name="apiCalls">
import { ref } from 'vue';
import { TableColumnWidth } from '@/utils/enum';
import { commonPageConfig } from '@/components/PageNav/index';
import TableTools from '@/components/Tools/table_tools.vue';
import { useRouter, useRoute } from "vue-router";
import {
  getAppProductData,
  deleteAppProduct
} from "@/api/modules/dataService";
import useDataServiceStore from "@/store/modules/dataService";

const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const dataServiceStore = useDataServiceStore();

/** 分页及搜索传参信息配置。 */
const page = ref({
  ...commonPageConfig,
  productName: ''
});

const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "productName",
    default: "",
    placeholder: "应用名称",
    clearable: true,
  }
]);

const tableInfo = ref({
  id: 'data-app-table',
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "应用名称", field: "productName", width: 140 },
    { label: "appKey", field: "appKey", width: 140 },
    { label: "appSecret", field: "appSecret", width: 120 },
    {
      label: "绑定API数", field: "apiBingingNum", width: 100, align: 'right', type: 'chnum'
    },
    {
      label: "调用次数", field: "invokeNum", width: 100, align: 'right', type: 'chnum'
    },
    {
      label: "调用异常数", field: "invokeErrorNum", width: 105, align: 'right', type: 'chnum'
    },
    { label: "应用负责人", field: "directorName", width: TableColumnWidth.USERNAME },
    { label: "修改人", field: "updateUserName", width: TableColumnWidth.USERNAME },
    { label: "修改时间", field: "updateTime", width: TableColumnWidth.DATETIME },
  ],
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 120,
    fixed: 'right',
    btns: (scope) => {
      const row = scope.row
      let btnsArr: any = [];
      btnsArr.push({
        label: "编辑", value: "edit", click: (scope) => {
          router.push({
            name: 'apiBind',
            query: {
              guid: scope.row.guid,
              productName: scope.row.productName
            }
          });
        }
      });
      btnsArr.push({
        label: "删除", value: "delete", click: (scope) => {
          if (scope.row.apiBingingNum > 0) {
            proxy.$ElMessage.warning('该应用有绑定的API，无法删除');
            return;
          }
          proxy.$openMessageBox('确定要删除该应用吗？', () => {
            deleteAppProduct([scope.row.guid]).then((res: any) => {
              if (res.code == proxy.$passCode) {
                page.value.curr = 1;
                getTableData();
                proxy.$ElMessage.success("删除成功");
              } else {
                proxy.$ElMessage.error(res.msg);
              }
            });
          }, () => {
            proxy.$ElMessage.info("已取消");
          })
        }
      });
      return btnsArr
    },
  },
  loading: false
})

const toSearch = (val: any, clear: boolean = false) => {
  page.value.curr = 1;
  if (clear) {
    searchItemList.value.map((item) => (item.default = ""));
    page.value.productName = '';
  } else {
    page.value.productName = val.productName;
  }
  getTableData();
};

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

const getTableDataPromise: any = ref(null);
const getTableData = () => {
  tableInfo.value.loading = true
  getTableDataPromise.value = getAppProductData({
    pageIndex: page.value.curr,
    pageSize: page.value.limit,
    productName: page.value.productName
  }).then((res: any) => {
    getTableDataPromise.value = null;
    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({
        type: 'error',
        message: res.msg,
      })
    }
    tableInfo.value.loading = false
  })
};

const addAppProduct = () => {
  router.push({
    name: 'apiBind',
  });
}

onBeforeMount(() => {
  toSearch({})
})

onActivated(() => {
  if (dataServiceStore.isUpdate) {
    if (getTableDataPromise.value) {
      getTableDataPromise.value.then(() => {
        getTableData();
        dataServiceStore.setIsUpdate(false);
      });
    } else {
      getTableData();
      dataServiceStore.setIsUpdate(false);
    }
  }
});

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'data-source-search'" @search="toSearch" :init="false" />
      <div class="tools_btns">
        <el-button type="primary" @click="addAppProduct" v-preReClick>添加</el-button>
      </div>
    </div>
    <div class="table_panel_wrap">
      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table_tool_wrap {
  width: 100%;
  height: 84px !important;
  padding: 0 8px;

  .tools_btns {
    padding: 0px 0 0;
  }
}

.table_panel_wrap {
  width: 100%;
  height: calc(100% - 84px);
  padding: 0px 8px 0;
}
</style>