import React, { PureComponent } from 'react'
import './coupons.scss'

// import { Toast } from "antd-mobile";

import Coupon from '../common/Coupon'
import ExchangeBar from '../common/ExchangeBar'


const mockData = [
    {
        type: 1,
        couponName: '代金券',
        expire_time: '2017-12-31',
        limit: '可用于大于代金券金额的课程',
        denomination: '5'
    },
    {
        type: 2,
        couponName: '代金券',
        expire_time: '2017-12-31',
        limit: '可用于大于代金券金额的课程',
        denomination: '5'
    },
]


class ExchangeCoupons extends PureComponent {
    state = {
        exchangeCode: ''
    }

    onChange = (val) => {
        this.setState({exchangeCode: val})
    }

    useCoupon = (val) => {
        console.log(val)
    }

    render() {
        return (
            <div id='coupons'>
                <ExchangeBar
                    onChange={this.onChange}
                    exchangeCode={this.state.exchangeCode}
                />
                <Content
                    coupons={mockData}
                    toUse={this.useCoupon}
                    showUseButton={true}
                    purpose={'exchange'}
                />
            </div>
        );
    }
}

function Empty() {
    return (
        <div className='empty'>
            <div>
                <p><i className='iconfont iconfrench_fries'></i></p>
                <p>静待活动，什么券都有~</p>
            </div>
        </div>
    )
}

function Content({coupons, onClick, ...rest}) {
    if (coupons.length === 0) {
        return <Empty/>
    }
    return (
        <ul className='coupon-list'>
            {
                mockData.map((item, index) => {
                    return <Coupon
                        {...item}
                        key={index}
                        onClick={onClick}
                        {...rest}
                        index={index}
                    />
                })
            }
        </ul>
    )
}

/*function Text({text}) {
    return Toast.info(text, 1)
}*/

export default ExchangeCoupons;