<template>
  <BasicModal @register="registerCategoryModal" v-bind="$attrs">
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <a-button type="link" @click="handleVersion(record)">{{ t('编辑') }} </a-button>
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';

  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';

  import { useI18n } from '/@/hooks/web/useI18n';

  import { getHistory } from '/@/api/system/pagedesign';
  const { t } = useI18n();
  const columns: BasicColumn[] = [
    {
      dataIndex: 'version',
      title: t('版本号'),
    },
    {
      dataIndex: 'createUserName',
      title: t('创建人'),
    },
    {
      dataIndex: 'createDate',
      title: t('创建时间'),
    },
    {
      dataIndex: 'state',
      title: t('状态'),
    },
    {
      dataIndex: 'remark',
      title: t('说明'),
    },
  ];
  const emit = defineEmits(['editHistory']);
  const formId = ref<string>('');

  const [registerCategoryModal, { setModalProps }] = useModalInner(async (data) => {
    formId.value = data.formId;
    setModalProps({
      confirmLoading: false,
      draggable: false,
      title: data.title,
      showOkBtn: false,
      showCancelBtn: false,
      destroyOnClose: true,
      width: 800,
      footer: null,
    });
  });
  const [registerTable, {}] = useTable({
    api: getHistory,
    beforeFetch: () => {
      return { id: formId.value };
    },
    rowKey: 'id',
    columns,
    showTableSetting: false,
    maxHeight: 200,
    actionColumn: {
      width: 80,
      title: t('操作'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const handleVersion = (data) => {
    emit('editHistory', data);
  };
</script>
<style lang="less" scoped></style>
