/* 
 * 个人中心页面
*/
import React, { Component } from "react";
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    ImageBackground,
    Button,
    StatusBar,
    Modal,
    TouchableHighlight,
    DeviceEventEmitter,
    ScrollView
} from "react-native";
import BasePage from "./BasePage";
import Dimensions from './utils/dimensions';
import ShopBox from "./components/ShopBox";
import TopicTitle from './components/TopicTitle';
import ScrollRow from './components/ScrollRow';

export default class userCenter extends BasePage {
    state = {
        nickName: "初始昵称",
        user: {
            nickName: '啊啊啊',
            avatar: 'https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=043fea1806f431adbcd2443f730dcb92/f636afc379310a550591d17ebd4543a983261086.jpg'
        },
        ifDiscount: true,
        isVIP: false,
        btnArr: [
            { title: '订单', icon: require('./images/userCenter/order.png'), goTo: 'Order' },
            { title: '抵用券', icon: require('./images/userCenter/discount.png'), goTo: 'Ticket' },
            { title: '客服', icon: require('./images/userCenter/service.png'), goTo: 'Order' },
        ],
        shopData: [
            { title: '1个月', originPrice: '199', price: '49', background: require('./images/shopBox/left.png') },
            { title: '12个月', originPrice: '499', price: '199', background: require('./images/shopBox/right.png') }
        ],
        discount: { title: '限时秒杀', icon: require('./images/shopBox/discount.png') },
        courseSroll: [{
            summary: 'Title Text', key: 'item1', icon:
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
        }, {
            summary: 'Title Text', key: 'item2', icon:
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
        }, {
            summary: 'Title Text', key: 'item3', icon:
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
        }, {
            summary: 'Title Text', key: 'item4', icon:
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
        }, {
            title: 'Title Text', key: 'item5', icon:
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
        }, {
            summary: 'Title Text', key: 'item6', icon:
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
        }]


    };
    renderBtn = (item, index) => {
        return (
            <TouchableOpacity key={index} onPress={() => this.goTo(`${item.goTo}`)}>
                <View style={styles.btnItem}>
                    <Image
                        source={item.icon}
                        style={styles.btnIcon}
                    />
                    <Text
                        style={styles.btnTitle}
                    >
                        {item.title}
                    </Text>
                </View>
            </TouchableOpacity>
        )
    }
    render() {
        return (

            <ScrollView style={{ height: 1100, overflow: 'scroll', backgroundColor: '#fff' }}>
                <View style={styles.topSection}>
                    <ImageBackground
                        source={
                            require('./images/userCenter/top-bg.png')
                        }
                        style={{ width: '100%', height: 203 }}
                    >
                        <View style={styles.userInfo}>
                            <TouchableOpacity onPress={() => this.goTo(`PersonalInfo`)}>
                                <Image style={styles.userAvatar} source={{ uri: this.state.user.avatar }} />
                            </TouchableOpacity>

                            <View style={styles.userRight}>
                                <View style={styles.userName}>
                                    <Text style={styles.userNameText}>{this.state.user.nickName}</Text>
                                    <Image style={styles.vipTag} source={require('./images/common/vip.png')}></Image>
                                </View>
                                <View style={styles.userName}>
                                    <Text style={styles.vipSologan}>开通vip</Text>
                                </View>
                            </View>
                        </View>
                        <View style={styles.btnBoxWrapper}>
                            <View style={styles.btnBox}>
                                {this.state.btnArr.map((item, index) => this.renderBtn(item, index))}
                            </View>
                        </View>

                    </ImageBackground>

                </View>
                <View style={styles.discountSection}>
                    <ShopBox data={this.state.shopData} discount={this.state.discount} />
                </View>
                <View style={styles.recordSection}>
                    <TopicTitle title={'观看记录'} ifTubeShow={true} />
                    <ScrollRow itemWidth={106} itemHeight={153} data={this.state.courseSroll} />
                </View>
                <View style={styles.collectSection}>
                    <TopicTitle title={'我的课程'} ifTubeShow={true} />
                    <ScrollRow itemWidth={106} itemHeight={153} data={this.state.courseSroll} />
                </View>
            </ScrollView>
        )
    }
    goTo(index) {
        this.toNextPage(index)
    }
}

const styles = StyleSheet.create({
    topSection: {
        height: 250,
        width: Dimensions.width,
        // backgroundColor: 'red'
    },
    userInfo: {
        width: Dimensions.width,
        height: 70,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    userAvatar: {
        width: 67,
        height: 67,
        borderRadius: 55,
        marginHorizontal: 12
    },
    userRight: {
        flexDirection: 'column',
    },
    userName: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    userNameText: {
        fontSize: 18,
        color: '#fff',
        fontWeight: '500',
        marginRight: 9
    },
    vipSologan: {
        fontSize: 14,
        color: '#fff',
    },
    btnBoxWrapper: {
        width: Dimensions.width,
        alignItems: 'center',
        marginTop: 16
    },
    btnBox: {
        width: Dimensions.width * 343 / 375,
        height: 100,
        borderRadius: 10,
        shadowColor: '#000',
        // shadowOffset: 1,
        shadowOpacity: 2,
        shadowRadius: 5,
        elevation: 4,
        backgroundColor: '#fff',
        justifyContent: 'space-around',
        flexDirection: 'row',
    },
    btnItem: {
        width: 48,
        height: '100%',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    btnIcon: {
        width: 36,
        height: 24,
        marginBottom: 7
    },
    btnTitle: {
        color: '#3f3f3f',
        fontSize: 16,
    },
    discountSection: {
        width: Dimensions.width,
        // height: 242,
        // backgroundColor: 'green'
    },
    recordSection: {
        width: Dimensions.width,
        height: 235,
        // backgroundColor: 'blue'
    },
    collectSection: {
        width: Dimensions.width,
        height: 235,
        // backgroundColor: 'yellow'
    },

})