import React, { Component } from 'react';
const styles = require('./style.module.styl');

const HeaderImage = require('./imgs/member_header@2x.png');
const HeaderImageLine = require('./imgs/member_line@2x.png');
const BuyImage = require('./imgs/memberBuyIcon@2x.png');
const BuyImagePrefer = require('./imgs/memberBuyPreferential@2x.png');

class MemberHead extends Component<any> {
    constructor(props) {
        super(props);
        this.state = {
            data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn'],
            slideIndex: 0,
            imgHeight: '200px'
        };
    }

    showCard(sku) {
        const { showCard } = this.props;
        showCard && showCard(sku);
    }

    render() {
        const list = this.props.members;
        return (
            <div className={styles.wrapper}>
                <div className={styles.wrapperTop}>
                    <img src={HeaderImage} alt="" className={styles.logo} />
                    <img src={HeaderImageLine} alt="" className={styles.line} />
                    <p>企鹅医生会员计划</p>
                </div>
                <div className={styles.carousel}>
                    {list.map((val, index) => (
                        <div
                            className={styles.card}
                            key={index}
                            onClick={this.showCard.bind(this, val.skuCode)}
                        >
                            <div className="info">
                                <h3>{val.productName}</h3>
                                <p className={styles.price}>
                                    <span>
                                        <b>￥{val.salePrice}</b>/年
                                    </span>
                                    <s>￥{val.price}/年</s>
                                </p>
                            </div>
                            <div className="icon">
                                <img
                                    src={BuyImage}
                                    alt=""
                                    className={styles.buyImage}
                                />
                                {val.price != val.salePrice ? (
                                    <img
                                        src={BuyImagePrefer}
                                        alt=""
                                        className={styles.discount}
                                    />
                                ) : null}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        );
    }
}

export default MemberHead;