import React, { Component } from 'react';
import Skeleton from '../../../components/Skeleton';
import styles from './style.module.styl';
const payImage = require('./img/pay@3x.png');
// import { format } from '@doctorwork/write-easy/utils/global';
// import Stepper from '../../../components/Stepper';
class OrderInfo extends Component {
    render() {
        const { product = {}, info = {} } = this.props;
        const avatarStyle = product.productImage ? { 'backgroundImage': `url(${product.productImage})` } : { 'background': '#F6F6F6' };
        const productItem = info.productItem || [];
        return (
            <div className={styles.wrapper}>
                <h4 className={styles.title}>订单商品</h4>
                <div className={styles.info}>
                    <div className={styles.productImage} style={avatarStyle}></div>
                    <div>
                        <h4>
                            {product.productName ? (
                                product.productName
                            ) : (
                                    <Skeleton height={16} width={200} />
                                )}
                        </h4>
                        {info.cycle && (
                            <p className={styles.cycle}>
                                周期: <span>{info.cycle}天</span>
                            </p>
                        )}
                        {info.expiryDate && (
                            <p className={styles.cycle}>
                                有效期至:{' '}
                                <span>{info.expiryDate.split(' ')[0]}</span>
                            </p>
                        )}
                        <p>
                            <span>{info.productPrice && '¥ '}</span>
                            {info.productPrice ? (
                                info.productPrice
                            ) : (
                                    <Skeleton height={16} width={60} />
                                )}
                        </p>
                    </div>
                </div>
                <ul>
                    {/* {info.calPrice ? (
                        <li>
                            <span>购买数量</span>
                            <span>
                                <Stepper
                                    onButtonClick={this.handleProductCount}
                                    onBlur={this.handleProductCount}
                                />
                            </span>
                        </li>
                    ) : null} */}
                    {productItem.length > 0 && (
                        <li>
                            <span className={styles.label}>套餐附赠: </span>
                            <div className={styles.value}>
                                {
                                    productItem.map(gift => {
                                        return (
                                            <span>
                                                {gift.productName} {gift.quantity} 份
                                            </span>
                                        );
                                    })
                                }
                            </div>
                        </li>
                    )}
                    {/* <li>
                        <span>商品总额: </span>
                        <span className="primary">
                            {info.productPrice ? (
                                info.productPrice
                            ) : (
                                <Skeleton height={16} width={60} />
                            )}
                        </span>
                    </li> */}
                    {info.isAddress && (
                        <li>
                            {
                                product.postage ? <React.Fragment>
                                    <span className={styles.label}>邮费: </span>
                                    <span className={styles.value}>¥ {product.postage}</span>
                                </React.Fragment> : <React.Fragment>
                                        <span className={styles.label}>配送方式: </span>
                                        <span className={styles.value}>免费快递</span>
                                    </React.Fragment>
                            }
                        </li>
                    )}
                    <li>
                        <span className={styles.label}>支付方式: </span>
                        <span className={styles.value}><img src={payImage} className={styles.payicon} />微信支付</span>
                    </li>
                </ul>
            </div>
        );
    }
}

OrderInfo.defaultProps = {
    product: {},
    info: {}
};

export default OrderInfo;