import { ref } from "vue";
import { type PlusColumn, useTable } from "plus-pro-components";
import { withInstall } from "@pureadmin/utils";
import permGroupApi from "./permGroupApi.vue";
import { StatusEnum } from "@/model/enums";
import { api as serveApi } from "@/api/serveApi";

// ========= search form =========

// 查询表单对象
export const searchFormData = ref({
  groupId: 0,
  apiName: "",
  status: ""
});

// 查询表单字段定义
export const searchFormColumns: PlusColumn[] = [
  {
    label: "接口名称",
    prop: "apiName"
  },
  {
    label: "状态",
    prop: "status",
    width: 80,
    valueType: "select",
    options: [
      {
        label: "启用",
        value: StatusEnum.ENABLE,
        color: "green"
      },
      {
        label: "禁用",
        value: StatusEnum.DISABLE,
        color: "red"
      }
    ]
  }
];

// ========= table =========

// 表格对象
export const { tableData } = useTable<any[]>();

// 表格字段定义
export const tableColumns: PlusColumn[] = [
  {
    label: "所属应用",
    prop: "application",
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "接口名称",
    prop: "apiName",
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "版本号",
    prop: "apiVersion",
    width: 80
  },
  {
    label: "接口描述",
    prop: "description",
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "注册来源",
    prop: "regSource",
    width: 100,
    valueType: "select",
    options: [
      {
        label: "系统",
        value: 1,
        color: "blue"
      },
      {
        label: "手动",
        value: 2,
        color: "green"
      }
    ]
  },
  {
    label: "状态",
    prop: "status",
    width: 80,
    valueType: "select",
    options: [
      {
        label: "启用",
        value: StatusEnum.ENABLE,
        color: "green"
      },
      {
        label: "禁用",
        value: StatusEnum.DISABLE,
        color: "red"
      }
    ]
  }
];

export const searchTable = groupId => {
  searchFormData.value.groupId = groupId;
  search();
};

// 点击查询按钮
export const handleSearch = () => {
  search();
};

// 查询
export const search = async () => {
  try {
    const { data } = await doSearch();
    tableData.value = data;
  } catch (error) {}
};
// 请求接口
const doSearch = async () => {
  // 查询参数
  const data = searchFormData.value;
  return serveApi.listAll(data);
};

const PermGroupApi = withInstall(permGroupApi);

export { PermGroupApi };