/**
 * @file Info.tsx
 * @author lihuanji
 *
 * 收货地址详情
 */

import React from 'react';
import Icon from '../../../Icon';
const styles = require('./style.module.styl');

const mask = (str: string) => {
    return str ? str.replace(/(\d{3})(\d{4})/, '$1****') : '';
};

interface InfoProps {
    name?: string;
    phone?: string;
    detail?: string;
    onClick?: any;
}

const Info = (props: InfoProps) => {
    const { name, phone, detail, onClick } = props;

    return (
        <div className={styles.wrapper}>
            <h4 className={styles.title}>商品将寄送至：</h4>
            <div className={styles.addressInfo} onClick={onClick}>
                {!name || !phone || !detail ? (
                    <React.Fragment>
                        <Icon type="map" className={styles.addIcon} />
                        <p className={styles.add}>请添加收货地址</p>
                    </React.Fragment>
                ) : (
                    <div>
                        <span>{name}</span>
                        <span>{mask(phone)}</span>
                        <p>{detail}</p>
                    </div>
                )}
                <div className={`${styles.addressInfoArrow} ${styles.right}`} />
            </div>
        </div>
    );
};

export default Info;