<template>
  <div>
    <PlusPage
      ref="plusPageInstance"
      :columns="tableConfig"
      :request="getList"
      :is-card="true"
      :search="{
        labelWidth: 100,
        showNumber: 3
      }"
      :table="{
        actionBar: { buttons, type: 'link', width: 180 },
        adaptive: { offsetBottom: 50 },
        onFormChange: handleTableChange
      }"
      :pageInfoMap="{ page: 'pageNum', pageSize: 'pageSize' }"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, resolveDirective } from "vue";
import {
  type FieldValues,
  type PlusColumn,
  PlusPage,
  PlusPageInstance,
  useTable
} from "plus-pro-components";
import { isString } from "@pureadmin/utils";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRouter } from "vue-router";
import { getIpInterfaceCallList } from "@/api/system/ipInterfaceCall";
import {
  useDict,
  useDictClass,
  useDictClassAsync,
  useDictValue
} from "@/utils/dict";

defineOptions({
  name: "IpInterfaceCallIndex"
});

const router = useRouter();

const plusPageInstance = ref<PlusPageInstance | null>(null);

// const { interface_status } = useDict("interface_status");

const getList = async (query: Record<string, any>) => {
  let res = await getIpInterfaceCallList(query);
  return {
    data: res.list,
    total: res.total
  };
};

const handleTableChange = (values: FieldValues) => {
  console.log("表格参数变化：", values);
};

// 表格数据
const tableConfig: PlusColumn[] = [
  {
    label: "调用编号",
    prop: "id"
  },
  {
    label: "账户编号",
    prop: "accountNo"
  },
  {
    label: "调用接口",
    prop: "interfaceName"
  },
  {
    label: "接口厂商",
    prop: "manufacturer",
    hideInSearch: true
  },
  {
    label: "调用状态",
    prop: "status",
    hideInSearch: true,
    valueType: "tag",
    // options: computed(() => interface_status.value),
    fieldProps: async (value: string) => {
      return {
        type: await useDictClassAsync("interface_status", value)
      };
    },
    formatter: value => {
      return useDictValue("interface_status", value);
    }
  },
  {
    label: "回调状态",
    prop: "callbackStatus",
    hideInSearch: true
  },
  {
    label: "创建时间",
    prop: "addTime",
    valueType: "time-picker",
    hideInSearch: true
  }
];

const { buttons } = useTable();

const perms = resolveDirective("perms");

buttons.value = [
  {
    // 修改
    text: "查看日志",
    code: "interface",
    // props v0.1.16 版本新增函数类型
    props: {
      type: "primary"
    },
    onClick(val) {
      console.log("handleClick", val.row);
      let params = {
        id: val.row.id
      };
      Object.keys(params).forEach(param => {
        if (!isString(params[param])) {
          params[param] = params[param].toString();
        }
      });
      // 保存信息到标签页
      useMultiTagsStoreHook().handleTags("push", {
        path: `/ipInterfaceCall/ipInterfaceCallDetail`,
        name: "IpInterfaceCallDetail",
        query: params,
        meta: {
          title: `接口调用明细`,
          dynamicLevel: 1
        }
      });
      // 路由跳转
      router.push({ name: "IpInterfaceCallDetail", query: params });
    },
    directives: [[perms, "ipInterfaceCall:index:detail"]]
  }
];
</script>
