import React, { Component } from 'react';
import './use-coupon.scss'

import ExchangeaBar from "../common/ExchangeBar";
import Coupon from '../common/Coupon'


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


class UseCoupon extends Component {

    constructor(props) {
        super(props)
        this.state = {
            selected: 0,
            exchangeNum: ''
        }
    }

    select = (val) => {
        console.log(val)
        this.setState({
            selected: val
        })
    }

    handleChange = (val) => {
        this.setState({exchangeNum: val})
    }

    componentDidMount() {
        document.getElementsByClassName('tabbar')[0].style.display = 'none'
    }

    render() {
        return (
            <div className='use-coupon'>
                <ExchangeaBar onChange={this.handleChange}/>
                <div className="coupons-area">
                    <Content
                        coupons={mockData.valid}
                        showUseButton={false}
                        selected={this.state.selected}
                        select={this.select}
                        purpose={'use'}
                    />
                    {
                        mockData.invalid.length > 0 &&
                        (
                            <>
                                <div className='invalid-title'>- 不可使用的优惠券 -</div>
                                <Content
                                    coupons={mockData.invalid}
                                    selected={this.state.selected}
                                    select={this.select}
                                    purpose={'use'}
                                    invalid={'invalid'}
                                />
                            </>
                        )
                    }
                </div>
            </div>
        );
    }
}

function Content({coupons, selected, ...rest}) {
    if (coupons.length === 0) {
        return (
            <div className='empty'>
                <p>暂无可使用的优惠券</p>
            </div>
        )
    }
    return (
        <ul>
            {
                coupons.map((item, index) => {
                    return (
                        <Coupon
                            key={index}
                            {...item}
                            selected={selected}
                            index={index}
                            {...rest}
                        ></Coupon>
                    )
                })
            }
        </ul>
    )
}

export default UseCoupon;