import { MyBetaModalFormProps, renderTextHelper } from '@/common';
import { MyModal } from '@/components/MyModal';
import {
  HouseOccupantsCardTypeEnum,
  HouseOccupantsHouseRelationEnum,
  HouseOccupantsRelationWithOwnerEnum,
  HouseOccupantsStatusEnum,
} from '@/gen/Enums';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Image, Space } from 'antd';

export default function OccupantShow(props: MyBetaModalFormProps) {
  return (
    <MyModal
      title={props.title || '查看'}
      width="900px"
      node={
        <>
          <ProCard extra={props.extra}>
            <ProDescriptions bordered>
              <ProDescriptions.Item label="姓名">
                {props?.item?.name}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="电话">
                {props?.item?.phone}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="状态">
                <renderTextHelper.Tag
                  Enums={HouseOccupantsStatusEnum}
                  value={props?.item?.status}
                  key="status "
                />
              </ProDescriptions.Item>
              <ProDescriptions.Item label="房客关系">
                <renderTextHelper.Tag
                  Enums={HouseOccupantsHouseRelationEnum}
                  value={props?.item?.house_relation}
                  key="house_relation"
                />
              </ProDescriptions.Item>
              <ProDescriptions.Item label="关系">
                <renderTextHelper.Tag
                  Enums={HouseOccupantsRelationWithOwnerEnum}
                  value={props?.item?.relation_with_owner}
                  key="relation_with_owner"
                />
              </ProDescriptions.Item>
              <ProDescriptions.Item label="入住日期">
                {props?.item?.is_live_in ? props?.item?.move_in_date : '未入住'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="证件类型">
                <renderTextHelper.Tag
                  Enums={HouseOccupantsCardTypeEnum}
                  value={props?.item?.card_type}
                  key="card_type"
                />
              </ProDescriptions.Item>
              <ProDescriptions.Item label="证件号码" span={2}>
                {props?.item?.id_card}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="证件材料" span={3}>
                <Space>
                  <Image.PreviewGroup>
                    {props?.item?.card_front_image?.map(
                      (res: any, index: number) => {
                        return (
                          <Image
                            width={160}
                            height={120}
                            src={res?.url || ''}
                            key={`${res?.name}_${index}`}
                          />
                        );
                      },
                    )}
                  </Image.PreviewGroup>
                  <Image.PreviewGroup>
                    {props?.item?.card_back_image?.map(
                      (res: any, index: number) => {
                        return (
                          <Image
                            width={160}
                            height={120}
                            src={res?.url || ''}
                            key={`${res?.name}_${index}`}
                          />
                        );
                      },
                    )}
                  </Image.PreviewGroup>
                </Space>
              </ProDescriptions.Item>
              {props?.item?.house_relation === 'Owner' && (
                <ProDescriptions.Item label="产证材料" span={3}>
                  <Space>
                    <Image.PreviewGroup>
                      {props?.item?.ownership_info?.map(
                        (res: any, index: number) => {
                          return (
                            <Image
                              width={160}
                              height={120}
                              src={res?.url || ''}
                              key={`${res?.name}_${index}`}
                            />
                          );
                        },
                      )}
                    </Image.PreviewGroup>
                  </Space>
                </ProDescriptions.Item>
              )}
            </ProDescriptions>
          </ProCard>
        </>
      }
    />
  );
}