import { MyBetaModalFormProps, MyButtons, renderTextHelper } from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
import {
  AssetCarPortsPropertyTypeEnum,
  AssetCarPortsStatusEnum,
  AssetCarPortsTypeEnum,
} from '@/gen/Enums';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Space, Spin } from 'antd';
import { useState } from 'react';

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

  return (
    <MyModal
      title={'查看'}
      width="800px"
      onOpen={() => {
        if (props?.item?.id) {
          setLoading(true);
          Apis.Asset.AssetCarPorts.Show({ id: props.item.id })
            .then((res) => {
              setData(res?.data || {});
            })
            .finally(() => {
              setLoading(false);
            });
        }
      }}
      node={
        <Space direction="vertical" style={{ width: '100%' }}>
          <ProCard>
            <Spin spinning={loading}>
              <ProDescriptions column={2} bordered>
                <ProDescriptions.Item label="车位号">
                  {data?.name}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="建筑面积">
                  {data?.built_area} m²
                </ProDescriptions.Item>
                <ProDescriptions.Item label="类型">
                  <renderTextHelper.Tag
                    Enums={AssetCarPortsTypeEnum}
                    value={data?.type}
                  />
                </ProDescriptions.Item>
                <ProDescriptions.Item label="产权类型">
                  <renderTextHelper.Tag
                    Enums={AssetCarPortsPropertyTypeEnum}
                    value={data?.property_type}
                  />
                </ProDescriptions.Item>
                <ProDescriptions.Item label="状态">
                  <renderTextHelper.Tag
                    Enums={AssetCarPortsStatusEnum}
                    value={data?.status}
                  />
                </ProDescriptions.Item>

                <ProDescriptions.Item label="关联房屋">
                  {data?.asset_houses_id ? (
                    <MyButtons.View
                      title="查看"
                      onClick={() => {
                        navigate(
                          `/customer/archive/show/${data?.asset_houses_id}`,
                        );
                      }}
                    />
                  ) : (
                    '无'
                  )}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="车牌号">
                  {data?.car_number || '-'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="备注" span={2}>
                  {data?.remark || '-'}
                </ProDescriptions.Item>
              </ProDescriptions>
            </Spin>
          </ProCard>
        </Space>
      }
    />
  );
}
