import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Checkbox, NavBar } from 'antd-mobile'
//组件
import ShopCard  from './cardList.js'
import Loading from '@base/Loading'

//css
import './card.scss'
import classnames from 'classnames'

const mockData = [
    {
        title: '三月面试求职班',
        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
        content: '涵盖ML主流算法及其应用-文字超过一行换行',
        newprice: '980',
        price: '1280',
        id: '110',
        check: false
    },
    {
        title: '三月面试求职班',
        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
        content: '涵盖ML主流算法及其应用-文字超过一行换行',
        newprice: '980',
        price: '1280',
        id: '110',
        check: false
    },
    {
        title: '三月面试求职班',
        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
        content: '涵盖ML主流算法及其应用-文字超过一行换行',
        newprice: '980',
        price: '1280',
        id: '110',
        check: false
    }
]

// function OrderList(props) {
//     const listData = props.list;
//     return (
//         <div style={{"backgroundColor": "#f5f5f5"}}>
//             {
//                 listData.map((item, index) => {
//                     const Info = (
//                         <div className="order-info">
//                             <p className='order-title'>{item.title}</p>
//                             <p className='order-content'>{item.content}</p>
//                             <p className='order-des'>
//                                 <span className='order-newprice'>¥{item.newprice}</span>
//                                 <span className='order-price'>¥{item.price}</span>
//                             </p>
//                         </div>
//                     )
//                     const Tab = (
//                         <div className="shopcard-check">
//                             <Checkbox 
//                                 checked={item.check}
//                                 onChange={(e) => {
//                                     // this.onChange(e, item.id)
//                                 }} 
//                             />
//                         </div>
//                     )
//                     return (
//                         <OrderItem  {...item} key={index} tab={ Tab } info={Info}>
                    
//                         </OrderItem>
//                     )
//                 })
//             }
//         </div>
//     );
// }

class Cart extends Component {
    constructor(props) {
        super(props)
        this.state = {
            deleteAll: false,
            loading: false,
            checkedNum: 0,
            allPrice: 0,
            cartNmu: 0,
            data: mockData
        }

        this.checkChange = this.checkChange.bind(this);
    }
    //获取购物车列表
    getCartList() {
       
    }
    //全选
    allChange(e) {
        let checked = e.target.checked
        let newData = this.state.data.map((item, i) => {
            return {
                ...item,
                check: checked
            }
        })
        this.setState({
            data: newData
        })
        this.calc(newData)
    }

    //点击
    checkChange(id, check) {
        let newData = this.state.data.map((item, i) => {
            if (item.id === id) {
                return {
                    ...item,
                    check: check
                }
            } else {
                return item;
            }
        })
        this.setState({
            data: newData
        })
        this.calc(newData)
    }
    //计算总价
    calc(newData) {
        let allPrice = 0;
        let checkedNum = 0;
        let cartNmu = 0;
        newData.forEach((item, i) => {
            if (item.check) {
                cartNmu += 1;
                checkedNum += i;
                allPrice += parseFloat(item.newprice);
            }
        })
        this.setState({
            checkedNum,
            allPrice,
            cartNmu
        })
    }
    //购买
    buy() {
       
    }
    deleteAll() {
        
    }
    //装载组件
    componentDidMount() {
        this.getCartList()
    }
    render() {
        return (
            <div className="cart-page" style={{ overflow: 'hidden' }}>
                <NavBar
                    style={{ "height": "44px" }}
                    className="order-tab"
                    mode="light"
                    icon={<i style={{"fontSize": '24px'}} className="iconfont iconiconfront-68"></i>}
                    rightContent={[
                        <i key="0" style={{ "fontSize": '24px' }} className="iconfont iconiconfront-56"></i>
                    ]}
                >
                    购物车
                </NavBar>

                <div className="cart-body">
                    {
                        this.state.loading ?
                            <Loading />
                            :
                            <ShopCard data={this.state.data}/>

                    }

                    {
                        this.state.deleteAll ?
                            <div className="cart-footer">
                                <div>
                                    <Checkbox onChange={(e) => {
                                        this.allChange(e)
                                    }} />
                                    <div>全选</div>
                                </div>
                                <div></div>
                                <div className={classnames({
                                    'active': this.state.cartNmu > 0
                                })} 
                                onClick={() => {
                                    if (this.state.cartNmu > 0) {
                                        this.delete()
                                    }
                                }}>
                                    删除<span>({this.state.cartNmu})</span>
                                </div>
                            </div>
                            :
                            <div className="cart-footer">
                                <div className="cart-label">
                                    <Checkbox onChange={(e) => {
                                        this.allChange(e)
                                    }} />
                                    <div>全选</div>
                                </div>
                                <div className="all-pirce">
                                    <p>
                                        <span>合计：</span>
                                        <span>￥{this.state.allPrice}</span>
                                    </p>
                                </div>
                                <div className={classnames({
                                    'active': this.state.checkedNum > 0
                                })} onClick={() => {
                                    if (this.state.checkedNum > 0) {
                                        this.buy()
                                    }
                                }}>
                                    去结算<span>({this.state.checkedNum})</span>
                                </div>
                            </div>
                    }
                </div>
                

            </div>
        )
    }
}

export default connect()(Cart)