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

export default function RegistersShow(props: MyBetaModalFormProps) {
  return (
    <MyModal
      title={props.title || '查看'}
      width="900px"
      node={
        <Space direction="vertical" style={{ width: '100%' }}>
          <ProCard title="基本信息" extra={props.extra}>
            <ProDescriptions bordered>
              <ProDescriptions.Item label="登记类型">
                <renderTextHelper.Tag
                  Enums={HouseRegistersTypeEnum}
                  value={props?.item?.type}
                  key="type "
                />
              </ProDescriptions.Item>

              <ProDescriptions.Item label="申请时间" span={2}>
                {props?.item?.created_at}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="登记状态">
                <renderTextHelper.Tag
                  Enums={HouseRegistersStatusEnum}
                  value={props?.item?.status}
                  key="status "
                />
              </ProDescriptions.Item>
              <ProDescriptions.Item label="审核时间" span={2}>
                {props?.item?.updated_at}
              </ProDescriptions.Item>
            </ProDescriptions>
          </ProCard>

          <ProCard title="客户信息">
            <ProTable
              {...MyProTableProps.props}
              search={false}
              toolBarRender={false}
              pagination={false}
              dataSource={props?.item?.customer_info}
              rowKey="id_card"
              columns={[
                MyColumns.EnumTag({
                  title: '房客关系',
                  dataIndex: 'house_relation',
                  valueEnum: HouseOccupantsHouseRelationEnum,
                }),
                MyColumns.EnumTag({
                  title: '关系说明',
                  dataIndex: 'relation_with_owner',
                  valueEnum: HouseOccupantsRelationWithOwnerEnum,
                }),
                {
                  title: '姓名',
                  dataIndex: 'name',
                },
                {
                  title: '手机号',
                  dataIndex: 'phone',
                },
                {
                  title: '证件号码',
                  dataIndex: 'id_card',
                },
                MyColumns.EnumTag({
                  title: '证件类型',
                  dataIndex: 'card_type',
                  valueEnum: HouseOccupantsCardTypeEnum,
                }),
                {
                  title: '证件资料',
                  render: (_, item) => {
                    return (
                      <Space>
                        <Image
                          height={40}
                          src={
                            item?.card_front_image
                              ? item?.card_front_image[0]?.url
                              : ''
                          }
                        />
                        <Image
                          height={40}
                          src={
                            item?.card_back_image
                              ? item?.card_back_image[0]?.url
                              : ''
                          }
                        />
                      </Space>
                    );
                  },
                },
              ]}
            />
          </ProCard>

          {props?.item?.type === 'Delivery' && (
            <ProCard title="产证信息" style={{ paddingRight: 10 }}>
              <Image.PreviewGroup>
                {props?.item?.ownership_info?.map((res: any, index: number) => {
                  return (
                    <Space style={{ paddingRight: 10 }}>
                      <Image
                        height={80}
                        src={res?.url || ''}
                        key={`${res?.name}_${index}`}
                      />
                    </Space>
                  );
                })}
              </Image.PreviewGroup>
            </ProCard>
          )}
        </Space>
      }
    />
  );
}