<script lang="ts" setup>
import { useAccess } from '@vben/access';
import { Page, useVbenModal } from '@vben/common-ui';

import { Button, message, Modal } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableApi } from '#/api';
import { TableAction } from '#/components/table-action';
import FormDesign from '#/views/form/design/form-modal.vue';
import FormMenuEdit from '#/views/system/menu/components/editMenu.vue';

import FormEdit from './components/edit.vue';
import FormPreview from './components/preview.vue';
import { gridOptions, searchFormOptions } from './data.config';

const { hasAccessByCodes } = useAccess();

const [Grid, { reload }] = useVbenVxeGrid({
  formOptions: searchFormOptions,
  gridOptions,
});

const [FormEditModal, formEditApi] = useVbenModal({
  connectedComponent: FormEdit,
});

const [FormMenuEditModal, formMenuEditApi] = useVbenModal({
  connectedComponent: FormMenuEdit,
});

const [FormPreviewModal, formPreviewApi] = useVbenModal({
  connectedComponent: FormPreview,
});

const [FormDesignModal, formDesignApi] = useVbenModal({
  connectedComponent: FormDesign,
});

const handleDelete = (id: number) => {
  Modal.confirm({
    iconType: 'info',
    title: '删除提示',
    content: `确定要删除选择的记录吗?`,
    cancelText: `关闭`,
    onOk: async () => {
      await TableApi.deleteDetail(id);
      message.success('数据删除成功');
      reload();
    },
  });
};

const handleEdit = (record: any, isUpdate: boolean) => {
  formEditApi.setData({
    isUpdate,
    baseData: { ...record },
  });

  formEditApi.open();
};

const handlePreview = (record: any) => {
  formPreviewApi.setData({
    isPreview: true,
    baseData: { id: record.id, name: record.name, code: record.code },
  });

  formPreviewApi.open();
};
const handelSuccess = () => {
  reload();
};

const handleCreateMenu = (record: any) => {
  formMenuEditApi.setData({
    isUpdate: record.menuId > 0,
    baseData: {
      id: record.menuId,
      component: `/system/design/template/index`,
      meta: { query: { code: record.code } },
    },
  });
  formMenuEditApi.open();
};

const handleDesign = (id: number) => {
  formDesignApi.setData({
    isUpdate: false,
    baseData: {
      id,
    },
  });
  formDesignApi.open();
};
</script>

<template>
  <Page auto-content-height>
    <FormEditModal :close-on-click-modal="false" @success="handelSuccess" />
    <FormMenuEditModal :close-on-click-modal="false" @success="handelSuccess" />
    <FormPreviewModal :close-on-click-modal="false" />
    <FormDesignModal :close-on-click-modal="false" />
    <Grid>
      <template #toolbar-tools>
        <Button
          class="mr-2"
          type="primary"
          v-access:code="'page:add'"
          @click="() => handleEdit({}, false)"
        >
          新增页面
        </Button>
      </template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              type: 'text',
              disabled: !hasAccessByCodes(['page:edit']),
              onClick: handleEdit.bind(null, row, true),
            },
            {
              label: '预览',
              type: 'text',
              disabled: !hasAccessByCodes(['page:view']),
              onClick: handlePreview.bind(null, row),
            },
          ]"
          :drop-down-actions="[
            {
              label: row.menuId > 0 ? '修改菜单' : '配置菜单',
              type: 'text',
              disabled:
                row.tableType !== 'page_list'
                  ? true
                  : !hasAccessByCodes(['page:edit']),
              onClick: handleCreateMenu.bind(null, row),
            },
            {
              label: '表单设计',
              onClick: handleDesign.bind(null, row.id),
            },
            {
              label: '删除',
              type: 'link',
              disabled: !hasAccessByCodes(['page:delete']),
              onClick: handleDelete.bind(null, row.id),
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
