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

export default function info(props: MyBetaModalFormProps) {
  const { item } = props;

  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      <ProCard title="基本信息">
        <ProDescriptions bordered>
          <ProDescriptions.Item label="姓名">
            <div style={{ fontWeight: 'bold' }}>{item?.name}</div>
          </ProDescriptions.Item>

          <ProDescriptions.Item label="电话">
            {item?.phone}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="性别">
            <renderTextHelper.Tag Enums={SexEnum} value={item?.sex} key="sex" />
          </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={40}
                        height={30}
                        src={res?.url || ''}
                        key={`${res?.name}_${index}`}
                      />
                    );
                  },
                )}
              </Image.PreviewGroup>
              <Image.PreviewGroup>
                {props?.item?.card_back_image?.map(
                  (res: any, index: number) => {
                    return (
                      <Image
                        width={40}
                        height={30}
                        src={res?.url || ''}
                        key={`${res?.name}_${index}`}
                      />
                    );
                  },
                )}
              </Image.PreviewGroup>
            </Space>
          </ProDescriptions.Item>
        </ProDescriptions>
      </ProCard>
    </Space>
  );
}
