import { MyBetaModalFormProps, renderTextHelper } from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
import {
  ApprovalTemplateNodesNodeTypeEnum,
  ApprovalTemplatesTypeEnum,
} from '@/gen/Enums';
import { ProCard, ProDescriptions, ProTable } from '@ant-design/pro-components';
import { Space, Spin } from 'antd';
import { useState } from 'react';

export default function Show(props: MyBetaModalFormProps) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<any>({});

  return (
    <MyModal
      title={props.title || '查看'}
      type={'primary'}
      width="800px"
      onOpen={() => {
        if (props?.item?.id) {
          setLoading(true);
          Apis.Approval.ApprovalTemplates.Show({ id: props.item.id })
            .then((res) => {
              setData(res?.data || {});
            })
            .finally(() => {
              setLoading(false);
            });
        }
      }}
      node={
        <Space direction="vertical" style={{ width: '100%' }}>
          <ProCard extra={props.extra} title="基础信息">
            <Spin spinning={loading}>
              <ProDescriptions column={2}>
                <ProDescriptions.Item label="业务类型">
                  <renderTextHelper.Tag
                    Enums={ApprovalTemplatesTypeEnum}
                    value={data?.type}
                  />
                </ProDescriptions.Item>
                <ProDescriptions.Item label="模板名称">
                  {data?.name}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="模板编码">
                  {data?.code}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="备注" span={2}>
                  {data?.description || '-'}
                </ProDescriptions.Item>
              </ProDescriptions>
            </Spin>
          </ProCard>
          <ProCard title="审批节点">
            <Spin spinning={loading}>
              <ProTable
                search={false}
                toolBarRender={false}
                pagination={false}
                dataSource={data?.approval_template_nodes || []}
                rowKey="id"
                columns={[
                  {
                    title: '类型',
                    dataIndex: 'node_type',
                    render: (_, record) => (
                      <renderTextHelper.Tag
                        Enums={ApprovalTemplateNodesNodeTypeEnum}
                        value={record?.node_type}
                      />
                    ),
                  },
                  {
                    title: '节点名称',
                    dataIndex: 'name',
                  },
                  {
                    title: '审批人员',
                    dataIndex: 'members',
                    render: (_, record) => {
                      if (
                        record?.approval_template_node_members &&
                        record?.approval_template_node_members.length > 0
                      ) {
                        return record.approval_template_node_members
                          .map(
                            (m: any) => m?.company_employee?.name || '未知人员',
                          )
                          .join('，');
                      }
                      return '-';
                    },
                  },
                ]}
              />
            </Spin>
          </ProCard>
        </Space>
      }
    />
  );
}