<template>
  <div v-if="columns?.length">
    <DynamicTable
      row-key="id"
      header-title="项目管理"
      title-tooltip=""
      :data-request="Api.project.projectList"
      :columns="columns"
      bordered
      size="small"
    >
      <template #toolbar>
        <a-button
          type="primary"
          :disabled="!$auth('system:role:create')"
          @click="openEditModal({})"
        >
          新增
        </a-button>
      </template>
    </DynamicTable>
  </div>
</template>

<script setup lang="tsx">
  import { useTable } from '@/components/core/dynamic-table';
  import { baseColumns, type TableColumnItem, type TableListItem } from './columns';
  import Api from '@/api/';
  import { useFormModal, useModal } from '@/hooks/useModal';
  import { formSchemas } from './formSchemas';
  import { Button } from 'ant-design-vue';
  import AttachmentManage from '@/components/business/attachment-manage/index.vue';
  import AttachmentUpload from '@/components/business/attachment-upload/index.vue';
  import { ref, onMounted, type FunctionalComponent } from 'vue';
  import { useDictStore } from '@/store/modules/dict';
  defineOptions({
    name: 'Project',
  });
  const [DynamicTable, dynamicTableInstance] = useTable({ formProps: { autoSubmitOnEnter: true } });
  const [showModal] = useFormModal();
  const [fnModal] = useModal();
  const isUploadPopupVisiable = ref(false);
  // projectList;
  let columns = ref<TableColumnItem[]>();
  onMounted(() => {
    columns.value = [
      ...baseColumns,
      {
        title: '附件',
        width: 50,
        maxWidth: 50,
        hideInSearch: true,
        dataIndex: 'files',
        customRender: ({ record }) => <FilesRender {...record} />,
      },
      {
        title: '操作',
        maxWidth: 150,
        width: 150,
        minWidth: 150,
        fixed: 'right',
        dataIndex: 'ACTION',
        hideInSearch: true,
        actions: ({ record }) => [
          {
            icon: 'ant-design:edit-outlined',
            tooltip: '编辑',
            auth: {
              perm: 'app:project:update',
              effect: 'disable',
            },
            onClick: () => openEditModal(record),
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'red',
            tooltip: '删除此项目',
            auth: 'app:project:delete',
            popConfirm: {
              title: '你确定要删除吗？',
              placement: 'left',
              onConfirm: () => delRowConfirm(record.id),
            },
          },
          {
            icon: 'ant-design:cloud-upload-outlined',
            tooltip: '上传附件',
            onClick: () => openAttachmentUploadModal(record),
          },
        ],
      },
    ];
  });

  const openAttachmentUploadModal = async (record: TableListItem) => {
    isUploadPopupVisiable.value = true;
    fnModal.show({
      width: 800,
      title: `项目: ${record.name}`,
      content: () => {
        return (
          <AttachmentUpload
            bussinessModule="project"
            bussinessRecordId={record.id}
            onClose={handleUploadClose}
            afterUploadCallback={(files) => {
              afterUploadCallback(files, record.id);
            }}
          ></AttachmentUpload>
        );
      },
      destroyOnClose: true,
      open: isUploadPopupVisiable.value,
      footer: null,
    });
  };
  const handleUploadClose = (hasSuccess: boolean) => {
    fnModal.hide();
    isUploadPopupVisiable.value = false;
  };
  const afterUploadCallback = async (
    files: { filename: { path: string; id: number } }[],
    id: number,
  ) => {
    await Api.project.projectUpdate({ id }, { fileIds: files.map((item) => item.filename.id) });
    dynamicTableInstance?.reload();
  };

  /**
   * @description 打开新增/编辑弹窗
   */
  const openEditModal = async (record: Partial<TableListItem>) => {
    const [formRef] = await showModal({
      modalProps: {
        title: `${record.id ? '编辑' : '新增'}项目`,
        width: '50%',
        onFinish: async (values) => {
          if (record.id) {
            await Api.project.projectUpdate({ id: record.id }, values);
          } else {
            await Api.project.projectCreate(values);
          }
          dynamicTableInstance?.reload();
        },
      },
      formProps: {
        labelWidth: 100,
        schemas: formSchemas,
      },
    });

    // 如果是编辑的话，需要获取角色详情
    if (record.id) {
      const info = await Api.project.projectInfo({ id: record.id });
      formRef?.setFieldsValue({
        ...info,
      });
    }
  };
  const delRowConfirm = async (record) => {
    await Api.project.projectDelete({ id: record });
    dynamicTableInstance?.reload();
  };

  const FilesRender: FunctionalComponent<TableListItem> = (project: TableListItem) => {
    const [fnModal] = useModal();
    return (
      <Button
        type="link"
        onClick={() => {
          openFilesManageModal(fnModal, project);
        }}
      >
        {project.files?.length || 0}
      </Button>
    );
  };

  const openFilesManageModal = (fnModal, project: TableListItem) => {
    const fileIds = project.files?.map((item) => item.id) || [];
    fnModal.show({
      width: 1200,
      title: `附件管理`,
      content: () => {
        return (
          <AttachmentManage
            fileIds={fileIds}
            onDelete={(unlinkIds) => unlinkAttachments(project.id, unlinkIds)}
          ></AttachmentManage>
        );
      },
      destroyOnClose: true,
      footer: null,
    });
  };
  const unlinkAttachments = async (id: number, unlinkIds: number[]) => {
    await Api.project.unlinkAttachments({ id }, { fileIds: unlinkIds });
    dynamicTableInstance?.reload();
  };
</script>

<style lang="less" scoped></style>
