import {
  MyButtons,
  MyColumns,
  MyPageContainer,
  MyProTableProps,
} from '@/common';
import { Apis } from '@/gen/Apis';
import {
  GoodsReleasesAuditStatusEnum,
  GoodsReleasesPassedTypeEnum,
} from '@/gen/Enums';
import { ProTable } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Space, Tooltip } from 'antd';
import Audit from './modals/Audit';

export default function Index({ title = '物品放行' }) {
  const navigate = useNavigate();
  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="goods_releases_list"
      tabLabel={title}
    >
      <ProTable
        {...MyProTableProps.props}
        request={async (params, sort) =>
          MyProTableProps.request(
            params,
            sort,
            Apis.GoodsReleases.GoodsReleases.List,
          )
        }
        headerTitle={`${title}列表`}
        toolBarRender={() => [
          <MyButtons.Create
            key="Create"
            size="middle"
            type="primary"
            onClick={() => {
              navigate('/goods_releases/list/pages/create');
            }}
            title="物品放行申请"
          />,
        ]}
        columns={[
          MyColumns.ID({
            search: false,
          }),
          MyColumns.EnumTag({
            title: '申请状态',
            dataIndex: 'status',
            valueEnum: GoodsReleasesAuditStatusEnum,
          }),
          {
            title: '房屋',
            dataIndex: ['asset_house', 'full_name'],
            search: false,
          },
          {
            title: '申请人',
            dataIndex: 'apply_name',
            search: false,
          },
          {
            title: '通行日期',
            dataIndex: 'passed_time',
            search: false,
          },
          MyColumns.EnumTag({
            title: '通行类型',
            dataIndex: 'passed_type',
            valueEnum: GoodsReleasesPassedTypeEnum,
          }),

          {
            title: '物品清单',
            render(_, record) {
              // 确保content始终是数组类型
              const content = Array.isArray(record?.goods) ? record.goods : [];
              // 过滤有效数据
              const validItems = content.filter(
                (item: any) => item?.name && item?.number,
              );

              // 表格中显示的简化内容（最多显示2项）
              const displayItems = validItems.slice(0, 1);

              return (
                <Tooltip
                  title={
                    <div
                      style={{
                        maxWidth: 400,
                        // maxHeight: 200,
                        overflow: 'auto',
                      }}
                    >
                      {validItems.length > 0 ? (
                        validItems.map((item: any, index: number) => (
                          <div key={index} style={{ marginBottom: 8 }}>
                            <div style={{ marginBottom: 4, lineHeight: '1.4' }}>
                              <strong>物品名称:</strong> {item.name || '-'}
                            </div>
                            <div
                              style={{
                                marginBottom: 4,
                                paddingLeft: 12,
                                lineHeight: '1.4',
                              }}
                            >
                              <strong>数量:</strong> {item.number || '-'}
                            </div>
                            <div
                              style={{
                                marginBottom: 4,
                                paddingLeft: 12,
                                lineHeight: '1.4',
                              }}
                            >
                              <strong>说明:</strong> {item.remark || '-'}
                            </div>
                          </div>
                        ))
                      ) : (
                        <div>无物品信息</div>
                      )}
                    </div>
                  }
                  placement="topLeft"
                >
                  <div style={{ cursor: 'pointer' }}>
                    {validItems.length > 0 ? (
                      <>
                        {displayItems.map((item: any, index: number) => (
                          <div key={index} style={{ lineHeight: '1.4' }}>
                            {item.name} 数量: {item.number}
                          </div>
                        ))}
                        {validItems.length > 1 && (
                          <div
                            style={{
                              color: '#1890ff',
                              fontSize: '12px',
                              marginTop: 2,
                            }}
                          >
                            +{validItems.length - 1} 更多物品
                          </div>
                        )}
                      </>
                    ) : (
                      <span>-</span>
                    )}
                  </div>
                </Tooltip>
              );
            },
            search: false,
          },
          MyColumns.CreatedAt(),
          MyColumns.Option({
            render: (_, item: any, index, action) => (
              <Space key={index}>
                {item?.status ===
                  GoodsReleasesAuditStatusEnum.Pending.value && (
                  <Audit item={item} reload={action?.reload} title={title} />
                )}
                <MyButtons.Default
                  key="Create"
                  size="small"
                  type="primary"
                  disabled={item.status !== 'Pending'}
                  onClick={() => {
                    navigate(`/goods_releases/list/pages/review?id=${item.id}`);
                  }}
                  title="查看并审核"
                />
              </Space>
            ),
          }),
        ]}
      />
    </MyPageContainer>
  );
}