import React, { Component } from 'react';
import './bargain-middle-page.scss'
import classnames from 'classnames'

import { VList } from '@common';
import { Course } from '@common'

const mockData = [
    {
        avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556539478374&di=4e2a450acebb612cbdd41ca58004a388&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201506%2F23%2F20150623212158_kvzwi.jpeg',
        nickname: '阿拉克斯007',
        rank: '刀神',
        reduced: '25.3元'
    },
    {
        avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556539478374&di=4e2a450acebb612cbdd41ca58004a388&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201506%2F23%2F20150623212158_kvzwi.jpeg',
        nickname: '阿拉克斯007',
        rank: '刀神',
        reduced: '25.3元'
    },
    {
        avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556539478374&di=4e2a450acebb612cbdd41ca58004a388&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201506%2F23%2F20150623212158_kvzwi.jpeg',
        nickname: '阿拉克斯007',
        rank: '刀神',
        reduced: '25.3元'
    },
]

const courseList = [
    {
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1a3d88e90a.jpg',
        title: 'CV就业班 第一期',
        original: '1900',
        discount: '1299',
        isBargainEnd: false,
        resultPrice: 99,
        status: 0,
    },
    {
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1a3d88e90a.jpg',
        title: 'CV就业班 第一期',
        original: '1900',
        discount: '1299',
        isBargainEnd: false,
        resultPrice: 99,
        status: 1,
        isComplete: false
    },
    {
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1a3d88e90a.jpg',
        title: 'CV就业班 第一期',
        original: '1900',
        discount: '1299',
        isBargainEnd: false,
        resultPrice: 99,
        status: 0,
    },
    {
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1a3d88e90a.jpg',
        title: 'CV就业班 第一期',
        original: '1900',
        discount: '1299',
        isBargainEnd: false,
        resultPrice: 99,
        status: 1,
        isComplete: true
    },
    {
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1a3d88e90a.jpg',
        title: 'CV就业班 第一期',
        original: '1900',
        discount: '1299',
        isBargainEnd: false,
        resultPrice: 99,
        status: 0,
    },
    {
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/1a3d88e90a.jpg',
        title: 'CV就业班 第一期',
        original: '1900',
        discount: '1299',
        isBargainEnd: false,
        resultPrice: 99,
        status: 0,
    },
]


class BargainMiddlePage extends Component {

    render() {
        return (
            <div className={'bargain-middle-page'}>
                <div className="top">
                    <div className="bargain-area">
                        <ul>
                            <VList
                                info={<CourseDes/>}
                            />
                        </ul>
                        <div className="bargain-detail">
                            <div className="top">
                                <div>
                                    已砍<span className={'reduced-price'}>56.7元</span>
                                </div>
                                <div>
                                    <span className={'time hour'}>23</span>:
                                    <span className={'time min'}>59</span>:
                                    <span className={'time sec'}>02</span>
                                    <span className={'inactive'}>后砍价结束</span>
                                </div>
                            </div>
                            <div className="middle">
                                <span/>
                            </div>
                            <div className="bottom">
                                再邀请<span className={'indicator'}>5</span>位好友助力即可获得<span
                                className={'indicator'}>【砍价神器】</span>
                            </div>
                            <div className={'button'}>
                                <button className={'invalid-btn'}>邀请好友砍价</button>
                            </div>
                        </div>
                    </div>
                    <div className="bargain-records">
                        <div className="title">砍价记录</div>
                        <ul>
                            {
                                mockData.map((item, index) => {
                                    return (
                                        <li key={index}>
                                            <div className="left">
                                                <img src={item.avatar} alt=""/>
                                                <span className={'nickname'}>{item.nickname}</span>
                                                <span className="rank-tag">{item.rank}</span>
                                            </div>
                                            <div className="right">
                                                砍掉<span className={'price'}>{item.reduced}</span>
                                            </div>
                                        </li>
                                    )
                                })

                            }

                        </ul>
                        <div className="more">查看更多>></div>
                    </div>
                </div>
                <div className="bargain-course-list">
                    <div className="title-wrapper">
                        <div className="title">我要砍价</div>
                        <div className="subtitle">邀请20位以上好友帮忙砍价可获得【砍价神器】</div>
                    </div>
                    <ul>
                        {
                            courseList.map((item, index) => {
                                return <Course
                                    data={item}
                                    bottom={
                                        <CourseBottom item={item}/>
                                    }
                                    key={index}
                                />
                            })
                        }
                    </ul>
                </div>
                <p className={'more'}>查看更多精品课程  >></p>
            </div>
        );
    }
}

function CourseDes() {
    return (
        <div className={'des'}>
            <div className="course-title">
                九月机器学习算法【涵盖ML主流算法及其应用
            </div>
            <div className="price-bar">
                <span className={'discount-price'}>￥980</span>
                <span className={'original-price'}>￥1280</span>
                <button className={'purchase-btn'}>¥99去支付</button>
            </div>
        </div>
    )
}

function CourseBottom({item}) {
    let Buttons
    if (item.status === 0) {
        Buttons = <button className={'bargain'}>我要砍价</button>
    } else {
        Buttons = (
            <div className="btns">
                <button className={classnames('bargain-btn', {
                    invalid: item.isComplete
                })}>{item.isComplete ? '砍价结束' : '继续砍价'}</button>
                <button className={'purchase-btn'}>¥{item.resultPrice}去支付</button>
            </div>
        )
    }
    return (
        <div className="course-bottom">
            <div className={'course-price'}>
                <span className={'discount-price'}>¥{item.discount}</span>
                <span className={'original-price'}>¥{item.original}</span>
            </div>
            {Buttons}
        </div>
    )
}

export default BargainMiddlePage;