<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter title="历史记录" width="60%" @ok="handleSubmit">
    <BasicTable @register="registerTable" :searchInfo="searchInfo">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="[
              {
                icon: 'clarity:info-standard-line',
                tooltip: '查看历史记录',
                onClick: handleHistory.bind(null, record),
              }
            ]" />
        </template>
      </template>

    </BasicTable>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, computed, unref, reactive, onMounted } from 'vue';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import {columnsHistory} from './scheme.data'
  import { getLoadHistoryPage } from '@/api/sys/WFSchemeInfo';
  import { BasicTable, useTable, TableAction } from '@/components/Table';

  defineOptions({ name: 'HistoryDrawer' });

  const emit = defineEmits(['success', 'register']);

  const rowId = ref('');
  const searchInfo = reactive < Recordable > ({});

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ confirmLoading: false });
    searchInfo.id = data.record.id
  });
  const [registerTable, { reload, getPaginationRef, }] = useTable({
    api: getLoadHistoryPage,
    columns: columnsHistory,
    useSearchForm: false,
    showTableSetting: false,
    tableSetting: { fullScreen: true },
    showIndexColumn: false,
    isCanResizeParent: true,
    rowKey: 'id',
    handleSearchInfoFn(info) {
      return info;
    },
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
    },
  });
  function handleHistory(record){

  }
  onMounted(() => {
  });
  async function handleSubmit() {
    try {
      const values = await validate();
      let query = values
      // 调用接口
      if (!unref(isUpdate)) {
        const data = await addRole(query);
      } else {
        const data = await updateRole(query);
      }


      setModalProps({ confirmLoading: true });
      // TODO custom api
      closeModal();
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>
