<script setup lang="ts">
import { useToggle } from '@vueuse/core';
import { ref } from 'vue';
import { postBpmProcessListenerPage } from '@/api/modules/bpmDefinition/bpMliuchengjiantingqibiaokongzhiqi';

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

const emit = defineEmits(['submit']);

const chosedListener = ref<any | null>(null);
const [open, setOpen] = useToggle(false);

const columns = [
  {
    title: '名字',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '事件',
    dataIndex: 'event',
    key: 'event',
  },
  {
    title: '值类型',
    dataIndex: 'valueType',
    key: 'valueType',
    customRender: (obj: { text: string, record: any, index: number }) => {
      return obj.text === 'class'
        ? 'Java类'
        : obj.text === 'expression'
          ? '表达式'
          : obj.text === 'delegateExpression'
            ? '代理表达式'
            : obj.text;
    },
  },
  {
    title: '值',
    dataIndex: 'value',
    key: 'value',
    ellipsis: true,
  },
];

const executionData = ref<any[]>([
  {
    id: 122,
    name: 'jtq001',
    type: 'execution',
    status: 0,
    event: 'start',
    valueType: 'expression',
    value: `\${demoSpringExpressionExecutionListener.execute(execution)}`,
    createTime: 1762484926000,
  },
  {
    id: 121,
    name: '代理表达式',
    type: 'execution',
    status: 0,
    event: 'start',
    valueType: 'delegateExpression',
    value: `\${demoSpringExpressionExecutionListener.execute(execution)}`,
    createTime: 1762484580000,
  },
  {
    id: 120,
    name: '表达式',
    type: 'execution',
    status: 0,
    event: 'start',
    valueType: 'expression',
    value: `\${demoDelegateExpressionExecutionListener}`,
    createTime: 1762484549000,
  },
  {
    id: 119,
    name: 'test',
    type: 'execution',
    status: 0,
    event: 'start',
    valueType: 'class',
    value: 'cn.iocoder.yudao.module.bpm.framework.flowable.core.listener.demo.exection.DemoDelegateClassExecutionListener',
    createTime: 1762483164000,
  },
]);

const taskData = ref<any[]>([{
  id: 123,
  name: 'ka-task-listener',
  type: 'task',
  status: 0,
  event: 'create',
  valueType: 'expression',
  value: `\${demoDelegateExpressionExecutionListener}`,
  createTime: 1762829690000,
}]);
const data = ref<any[]>([]);
function onOpen(type: string) {
  setOpen(true);
  postBpmProcessListenerPage({
    type,
    currentPage: 1,
    pageSize: 100,
  }).then((response) => {
    data.value = response.data?.records ?? [];
  });
}
const [loading, setLoading] = useToggle(false);

function onSubmit() {
  setLoading(true);
  emit('submit', chosedListener.value);
  setLoading(false);
  setOpen(false);
}

function close() {
  setOpen(false);
}

defineExpose({
  open: onOpen,
});
</script>

<template>
  <a-drawer
    v-model:open="open"
    title="请选择监听器"
    placement="right"
    :width="820"
    destroy-on-close
    :footer-style="{ textAlign: 'right' }"
    @close="close"
  >
    <a-table
      size="small"
      :columns="columns"
      :data-source="data"
      :pagination="false"
      row-key="key"
      :row-class-name="(record) => { return chosedListener && (chosedListener.id === record.id) ? 'ant-table-row-selected' : '' }"
      :custom-row="(record) => { return { onClick: () => { chosedListener = record; } } }"
    />
    <template #footer>
      <a-space>
        <a-button @click="close">
          取消
        </a-button>
        <a-button type="primary" :loading="loading" @click="onSubmit">
          提交
        </a-button>
      </a-space>
    </template>
  </a-drawer>
</template>
