<script setup lang="ts">
import { useToggle } from '@vueuse/core';
import { postBpmProcessExpressionPage } from '@/api/modules/bpmDefinition/bpMliuchengbiaodashibiaokongzhiqi';

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

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

const excontent = ref<API.BpmProcessExpressionRespVO>();
const [open, setOpen] = useToggle(false);

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    ellipsis: true,
  },
  {
    title: '表达式',
    dataIndex: 'expression',
    key: 'expression',
    ellipsis: true,
  },
];

const data = ref<API.BpmProcessExpressionRespVO[]>();

async function onOpen() {
  excontent.value = undefined;
  postBpmProcessExpressionPage({ currentPage: 1, pageSize: 1000 }).then((response) => {
    if (response.success) {
      data.value = response.data?.records ?? [];
    }
  });
  setOpen(true);
}
const [loading, setLoading] = useToggle(false);

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

function close() {
  setOpen(false);
}

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

<template>
  <a-drawer
    v-model:open="open"
    title="请选择表达式"
    placement="right"
    :width="520"
    destroy-on-close
    :footer-style="{ textAlign: 'right' }"
    @close="close"
  >
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="false"
      row-key="key"
      :row-class-name="(record) => { return excontent?.id === record.id ? 'ant-table-row-selected' : '' }"
      :custom-row="(record) => { return { onClick: () => { excontent = 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>
