<!--
文件: listeners/index.vue
功能: 管理流程监听器（Listener）列表页面
主要逻辑:
- 使用 `ProTable` 展示监听器列表，支持分页与搜索，通过 `postBpmProcessListenerPage` 获取数据并适配给表格组件。
- 定义 `columns` 包含 id、name、type、status、event、valueType、value、createTime、action 等字段，并设置搜索项与展示样式（如不同状态和类型的颜色/徽章）。
- 提供新增、编辑、删除操作：
  - 新增/编辑：通过 `DrawerListener` 抽屉组件进行表单操作，父组件通过 `drawerListenerRef` 调用其 `open` 方法并在提交后监听 `submit` 事件刷新列表。
  - 删除：调用 `postBpmProcessListenerDelete` 接口删除记录，删除成功后提示并刷新表格数据。
- `request` 方法负责将 ProTable 的分页参数映射为后端参数并返回 { success, data, total } 格式的数据。
- `onAction` 根据 `ACTION` 分发操作并与 `drawerListenerRef` 进行交互。
-->

<script setup lang="tsx">
import type { ProColumns } from '@pubinfo/pro-components';
import { ProTable } from '@pubinfo/pro-components';
import { message, Modal } from 'ant-design-vue';
import { postBpmProcessListenerDelete, postBpmProcessListenerPage } from '@/api/modules/bpmDefinition/bpMliuchengjiantingqibiaokongzhiqi';
import { ACTION, typeOptions } from '../enum';
import DrawerListener from './drawerListener.vue';

defineOptions({
  name: 'ListenerListPage',
});

const drawerListenerRef = ref<InstanceType<typeof DrawerListener>>();

const tableRef = ref<typeof ProTable>();

async function request(params: any) {
  const { current, pageSize, ...rest } = params;
  const res = await postBpmProcessListenerPage({
    doSearchTotal: true,
    currentPage: current,
    pageSize,
    ...rest,
  });
  return {
    success: res.success,
    data: res.data?.records ?? [],
    total: res.data?.total ?? 0,
  };
}
const columns: ProColumns<API.BpmProcessListenerRespVO> = [
  {
    hideInSearch: true,
    title: '编号',
    dataIndex: 'id',
    ellipsis: true,
  },
  {
    valueType: 'a-input',
    bind: 'value',
    title: '名字',
    dataIndex: 'name',
    ellipsis: true,
    fieldProps: {
      placeholder: '请输入名字',
      allowClear: true,
    },
  },
  {
    valueType: 'a-select',
    title: '类型',
    dataIndex: 'type',
    ellipsis: true,
    fieldProps: {
      placeholder: '请选择类型',
      allowClear: true,
      options: typeOptions,
    },
  },
  {
    hideInSearch: true,
    title: '状态',
    dataIndex: 'status',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '事件',
    dataIndex: 'event',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '值类型',
    dataIndex: 'valueType',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '值',
    dataIndex: 'value',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '创建时间',
    dataIndex: 'createTime',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    width: 200,
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
  },
];

function reloadData() {
  tableRef.value?.reload();
}

function onAction(key: string, record?: API.BpmProcessListenerRespVO): void {
  switch (key) {
    case ACTION.ADD:
      drawerListenerRef.value?.open(ACTION.ADD);
      break;
    case ACTION.EDIT:
      drawerListenerRef.value?.open(ACTION.EDIT, record);
      break;
    case ACTION.REMOVE:
      Modal.confirm({
        title: '确定删除该监听器吗?',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          postBpmProcessListenerDelete({ id: record!.id }).then((res: API.ResponseDataBoolean) => {
            if (res.success) {
              message.success('删除成功！');
              reloadData();
            }
          });
        },
        onCancel() {},
      });
      break;
  }
}
</script>

<template>
  <div
    py-10px
    px-10px
    w-full
    h-full
  >
    <ProTable
      ref="tableRef"
      row-key="id"
      :request="request"
      :columns="columns"
      auto-height
      :scroll="{ x: 1100 }"
    >
      <template #toolbar>
        <a-button type="primary" @click="onAction(ACTION.ADD)">
          <PlusCircleOutlined />
          {{ ACTION.ADD }}
        </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'type'">
          <span :class="[record.type === 'task' ? 'green' : 'blue']">
            {{ record.type === 'task' ? '任务监听器' : '执行监听器' }}
          </span>
        </template>
        <template v-if="column.dataIndex === 'status'">
          <a-badge v-if="record.status === 0" status="success" text="开启" />
          <a-badge v-else status="default" text="关闭" />
        </template>
        <template v-if="column.dataIndex === 'valueType'">
          <span v-if="record.valueType === 'expression'" class="green">
            表达式
          </span>
          <span v-if="record.valueType === 'delegateExpression'" class="grey">
            代理表达式
          </span>
          <span v-if="record.valueType === 'class'" class="blue">
            Java类
          </span>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a-space>
            <a class="flex items-center" @click="onAction(ACTION.EDIT, record)">
              <span class="ml-4px">{{ ACTION.EDIT }}</span>
            </a>
            <a class="flex items-center hover:opacity-80" @click="onAction(ACTION.REMOVE, record)">
              <span class="ml-4px text-red-500!">{{ ACTION.REMOVE }}</span>
            </a>
          </a-space>
        </template>
      </template>
    </ProTable>
    <DrawerListener ref="drawerListenerRef" @submit="reloadData" />
  </div>
</template>

<style scoped>
.green {
  padding: 2px 9px;
  color: #67c23a;
  background-color: rgb(239.8, 248.9, 235.3);
  border: 1px solid rgb(224.6, 242.8, 215.6);
  border-radius: 4px;
}
.blue {
  padding: 2px 9px;
  color: #409eff;
  background-color: #ecf5ff;
  border: 1px solid #d9ecff;
  border-radius: 4px;
}
.grey {
  padding: 2px 9px;
  color: #909399;
  background-color: rgb(243.9, 244.2, 244.8);
  border: 1px solid rgb(232.8, 233.4, 234.6);
  border-radius: 4px;
}
</style>
