/* 
 * 
*/
import React, { Component } from 'react';
import {
	Platform,
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity,
	StatusBar,
	FlatList,
	BackHandler,
	TouchableHighlight,
	DeviceEventEmitter,
	ScrollView
} from 'react-native';
import BasePage from '../BasePage';
import Dimensions from '../utils/dimensions';
import TopicTitle from '../components/TopicTitle';
import CourseTitle from '../components/CourseTitle';
import NoDataView from '../components/NoDataView';

export default class Order extends BasePage {
	state = {
		data: [
			// { title: '生活好榜样', time: '2019-10-01' },
			// { title: '生活好榜样2', time: '2019-10-01' },
			// { title: '生活好榜样3', time: '2019-10-01' },
			// { title: '生活好榜样第二期', time: '2019-10-01' }
		]
	};
	renderItem = (item, index) => {
		return (
			<View>
				{/* {index === 0 ? <TopicTitle title={this.state.data.title} ifTubeShow={true} /> : null} */}
				<View style={styles.item}>
					<View style={styles.left}>
						<Text style={styles.title}>{item.title}</Text>
						<Text style={styles.time}>购买日期:{item.time}</Text>
					</View>
					<View style={styles.right}>
						<Text style={styles.study}>去学习</Text>
					</View>
				</View>
			</View>
		);
	};
	render() {
		return (
			<View style={{ flex: 1 }}>
				<StatusBar barStyle={'dark-content'} backgroundColor={'white'} translucent={true} />
				<View
					style={{
						height: 50,
						backgroundColor: 'white',
						marginTop: 30
					}}
				>
					<CourseTitle
						width={this.getWindowWidth()}
						title="我的订单"
						lefttype={1}
						textcolor={'#231F20'}
						backPress={() => this.goBack()}
						// backPress={() => alert("左侧按钮")}
					/>
				</View>
				<View style={{ flex: 0.1, backgroundColor: 'rgba(242, 242, 242, 1)' }} />
				<View style={{ flex: 5, backgroundColor: 'rgba(242, 242, 242, 1)' }}>
					{this.state.data.length > 0 ? (
						<FlatList
							data={this.state.data}
							horizontal={false}
							renderItem={({ item, index }) => this.renderItem(item, index)}
							keyExtractor={(item, index) => index.toString()}
						/>
					) : (
						<NoDataView style={{ width: '100%', height: '100%' }} text={'你还没有相关订单哦'} />
					)}
				</View>
			</View>
		);
	}
	componentWillMount() {
		BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
	}
	componentWillUnmount() {
		BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
	}
	onBackAndroid = () => {
		this.goBack();
		return true;
	};
}

const styles = StyleSheet.create({
	item: {
		width: Dimensions.width,
		height: Dimensions.getHeight(79),
		flexDirection: 'row',
		justifyContent: 'space-between',
		marginBottom: 6,
		alignItems: 'center',
		paddingHorizontal: 14,
		// borderTopWidth: 1,
		backgroundColor: 'rgba(255, 255, 255, 1)'
		// borderColor: '#f0f1f5'
	},
	left: {
		flexDirection: 'column'
	},
	title: {
		fontSize: 18,
		color: '#151515'
	},
	time: {
		fontSize: 14,
		color: '#555'
	},
	right: {
		width: Dimensions.getWidth(83),
		height: Dimensions.getHeight(27),
		borderRadius: 14,
		backgroundColor: '#ffae59',
		justifyContent: 'center',
		alignItems: 'center'
	},
	study: {
		color: '#fff',
		fontSize: 16
	}
});