import React, { Component } from 'react';
import { Flex, WingBlank, WhiteSpace, List, Radio } from 'antd-mobile';
import {api, http} from '@/utils';
import { OrderItem, HeaderBar } from '@/common/index';
import {Link} from 'react-router-dom';
import './PayOrder.scss';
import {VList} from '@/common';

const Item = List.Item;
const Brief = Item.Brief;
const RadioItem = Radio.RadioItem;

let mockData = [
    { value: 0, label: '支付宝', icon:  'iconzhifubaox-'},
    { value: 1, label: '微信支付', icon:  'iconweixinzhifu'},
    { value: 2, label: '花呗分期', icon:  'iconhuabei'},
  ];

  let mockList = [
    {
        "course_id":110,
        "course_title":"机器学习 第九期 [加送CPU和GPU双云平台，继续实战作业考试]",
        "simpledescription":"BAT工业实战，作业、考试1V1批改",
        "image_name":"https://www.julyedu.com/Public/Image/8bd265fcd8.png",
        "price0":"899.00",
        "price1":"469.00",
        "sale_price":"469.00",
        "is_coupon":1,
        "coupon_num":0
    },
    {
        "course_id":101,
        "course_title":"语音识别技术的前世今生 [CMU王赟博士主讲，双旦期间1元秒杀]",
        "simpledescription":"解秘历代语音识别系统背后的工作原理",
        "image_name":"https://www.julyedu.com/Public/Image/80706a4749.png",
        "price0":"400.00",
        "price1":"99.00",
        "sale_price":"99.00",
        "is_coupon":1,
        "coupon_num":0
    }
]

export default class PayOrder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            money: 1000.00,
            payType: 0,
            checkPeriod: false,
            singleMoney: 0,
            periodNumber: 0,
        }
    }
    onChange = (value) => {
        console.log(value);
        this.setState({
          payType: value,
        });
    };

    componentDidMount() {
        http.post(`${api.home}/m/order/detail`, {order_id: ''}).then((res) => {
            console.log(res);
            if (res.data.code !== 200) {
              return;
            }
            const { course, total_sale, user_account, user_info, discount } = res.data.data;
            // this.setState({
            //   perfect: user_info,
            //   orderList: course, 
            //   user_account,
            //   total_sale,
            //   discount,
            // });
          })
    }
    render() {
        const { money, payType, checkPeriod, singleMoney, periodNumber } = this.state;
        return (
            <div className='pay-order'>
                <HeaderBar title='确认支付' arrow={true}></HeaderBar>
                <WhiteSpace size='sm'></WhiteSpace>
                <div className='order-number'>
                    <WingBlank>
                        <Flex justify='between' align='center' style={{ height: '44px' }}>
                            <span>订单号</span>
                            <span className='number'>20160815850565</span>
                        </Flex>
                    </WingBlank>
                </div>
                <WhiteSpace size='md'></WhiteSpace>
                {
                    mockList.map((item, index) => {
                        const Info = (
                            <div className="order-info">
                                <p className='order-title text-overflow-one'>
                                    <Link to={`/detail?id=${item.course_id}`}>{item.course_title}</Link>
                                </p>
                                <p className='order-content text-overflow-2'>{item.simpledescription}</p>
                                <p className='order-des'>
                                    <span className='order-newprice'>¥{item.price1}</span>
                                    <span className='order-price'>¥{item.price0}</span>
                                </p>
                            </div>
                        )
                        return (
                            <VList key={index} img={item.image_name}
                                id={item.course_id}
                                info={Info}></VList>
                        )
                    })
                }
                <WhiteSpace size='md'></WhiteSpace>
                <div className='order-number'>
                    <WingBlank>
                        <Flex justify='between' align='center' style={{ height: '44px' }}>
                            <span>支付金额</span>
                            <span className='money'>{`￥${money}`}</span>
                        </Flex>
                    </WingBlank>
                </div>

                <WhiteSpace size='md'></WhiteSpace>
                <List renderHeader={() => '支付方式'} className='pay-type-list'>
                    {mockData.map(i => (
                        <RadioItem 
                        thumb={<i className={`iconfont ${i.icon} ${payType === i.value ? 'checked' : ''}`}></i>}
                        key={i.value} 
                        checked={payType === i.value} 
                        onChange={() => this.onChange(i.value)}>
                            {/* {i.label} */}
                            {
                                i.value === 2 ? (
                                    <Flex direction='column' align='start' style={{width: '100%', marginTop: '6px'}}>
                                        <Flex direction='row' justify='between' style={{width: '100%', paddingRight: '30px'}}>
                                            <span style={{color: '#555555', fontSize: '14px'}}>{i.label}</span>
                                            {
                                                checkPeriod ? (
                                                    <span style={{color: '#333333', fontSize: '12px'}}>{`${singleMoney}元 × ${periodNumber}期`}</span>
                                                ) : null
                                            }
                                        </Flex>
                                        <Flex justify='start'>
                                            <span style={{color: '#999999', fontSize: '12px'}}>支付上限受限于您的花呗额度</span>
                                        </Flex>
                                    </Flex>
                                ) : (i.label)
                            }
                        </RadioItem>
                    ))}
                </List>
                <div className='pay-tip'>请在24小时内完成支付，否则届时系统将关闭该订单。</div>

                <div className='pay-button'>确认支付</div>
            </div>
        )
    }
}