'use strict'

import React, {Component} from 'react';
import {
    StyleSheet,
    Dimensions,
    Platform,
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';

import {Map} from 'immutable';

export default class VIPLevelHeader extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let {nickname, vipInfo, vipShowPageInfo} = this.props;
        vipInfo = vipInfo.toJS();
        let vipImageUrl = '';
        let VIPLevel = vipInfo.current_vip_level;
        switch (VIPLevel) {
            case '1':
                vipImageUrl = require('../image/mine_vip_1.png');
                break;
            case '2':
                vipImageUrl = require('../image/mine_vip_2.png');
                break;
            case '3':
                vipImageUrl = require('../image/mine_vip_3.png');
                break;
            default:
                vipImageUrl = '';
        }
        let nextLevelTipMessage = '您已升至最高等级啦！'
        if (VIPLevel != '3') {

        }

        return (
            <TouchableOpacity activeOpacity={1.0} onPress={() => {
				this.props.onPressPrivilegeCell && this.props.onPressPrivilegeCell(dataSource);
			}}>
                <View style={[styles.container, {height: 260}]}>
                    <View style={styles.nickname}>
                        <Text style={{marginLeft:17, color:'#444444'}}>
                            {nickname}
                        </Text>
                        {vipImageUrl !='' ?
                        <Image style={{marginLeft:10}}
                            source={vipImageUrl}
                        />:null
                        }
                    </View>

                    {VIPLevel == '3'?
                    <Text style={{marginLeft:15,marginTop:5,fontSize:12,color:'#b0b0b0'}}>
                        您已升至最高等级啦！
                    </Text>
                    :<Text style={{marginLeft:15,marginTop:5,fontSize:12,color:'#b0b0b0'}}>
                        还差
                        <Text style={{marginLeft:15,color:'#444444'}}>
                            ¥{vipShowPageInfo.get('upgradeNeedCost')}
                        </Text>
                        就可以升级为{vipInfo.next_vip_title}
                    </Text>
                    }
                    <Text style={{marginLeft:15,marginTop:5,fontSize:12,color:'#b0b0b0'}}>
                        (VIP金额累计需订单成功签收满15天且无退换货)
                    </Text>
                    <Text style={{marginLeft:15,marginTop:5,fontSize:12,color:'#444444'}}>
                        年度累计金额:
                        <Text style={{marginLeft:5,fontSize:17,color:'#d0021b'}}>
                            ¥{vipInfo.current_year_cost}
                        </Text>
                    </Text>
                    <View style={styles.nextLevelNeedProcess}>
                        {VIPLevel == '3'?null:
                            <View style={styles.nextLevelCost}>
                                <Text style={{color:'#b0b0b0',fontSize:13}}>
                                    ¥{vipInfo.next_need_cost}
                                </Text>
                            </View>

                        }
                        <View style={styles.nextLevelCompletedProcess}>
                        </View>
                    </View>
                    <View style={styles.curAndNextVIPTitle}>
                        <Text style={{marginLeft:15,fontSize:12,color:'#444444',fontStyle:'italic'}}>
                            {vipInfo.current_vip_title}
                        </Text>
                        {vipInfo.next_vip_title =='3' ?
                        <Text style={{marginRight:15,fontSize:12,color:'#444444',fontStyle: 'italic'}}>
                            {vipInfo.next_vip_title}
                        </Text>:null
                        }
                    </View>
                    <View style={{width: width,height: 15,backgroundColor: '#e5e5e5',}}/>

                    <View style={styles.totalCost}>
                        <Text style={{marginLeft:15,fontSize:17,color:'#444444'}}>
                            年度累计金额：
                        </Text>
                        <Text style={{marginRight:15,fontSize:14,color:'#444444'}}>
                            ¥{vipInfo.current_year_cost}
                        </Text>
                    </View>
                    <View style={{height: 1.0,backgroundColor: '#e5e5e5',marginLeft:15}}/>

                    <View style={styles.totalCost}>
                        <Text style={{marginLeft:15,fontSize:17,color:'#444444'}}>
                            历史消费总金额：
                        </Text>
                        <Text style={{marginRight:15,fontSize:14,color:'#444444'}}>
                            ¥{vipInfo.current_total_cost}
                        </Text>
                    </View>

                    <View style={{width: width,height: 15,backgroundColor: '#e5e5e5',}}/>

                </View>
            </TouchableOpacity>
        );
    }
}

let {width, height} = Dimensions.get('window');

const DEVICE_WIDTH_RATIO = width / 320;

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    nickname: {
        flexDirection: 'row',
        marginTop: 15,
    },
    nextLevelNeedProcess: {
        position: 'relative',
        marginTop: 10,
        height: 10,
        width: width - 30,
        marginLeft: 15,
        backgroundColor: '#b0b0b0',
        borderRadius: 5,
    },
    nextLevelCompletedProcess: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        height: 10,
        width: width - 30,
        backgroundColor: '#c40016',
        borderRadius: 5,
    },
    nextLevelCost: {
        position: 'absolute',
        top: 0,
        right: 0,
        marginTop: -17,
        backgroundColor: 'white',
    },
    curAndNextVIPTitle: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 5,
        marginTop: 5,
    },
    totalCost: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: 44,
    }
});