import React, {Component, PropTypes} from 'react';
import {
  FlatList,
  StyleSheet,
  View,
  Text,
  TouchableHighlight
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import axios from 'axios';
import FastImage from 'react-native-fast-image';

import Loading from '../../wdui/loading/Loading';
import Card from '../../wdui/Card';

class HomeView extends Component {
  static displayName = 'HomeView';

  static navigationOptions = {
    title: '首页推荐',
    tabBarIcon: (props) => (
        <Icon name='home' size={24} color={props.tintColor} />
      )
  };

  static propTypes = {
    navigate: PropTypes.func.isRequired
  };

  constructor() {
    super();
    this.state = {
      loading: true,
      data: []
    };
  }

  componentWillMount() {
    axios.get('https://www.wandianshenme.com/api/play/')
      .then(response => {
        console.log(response);
        this.setState({
          data: response.data,
          loading: false
        });
      });
  }

  keyExtractor = (item, index) => `key${index}`;

  renderList = ({item}) => {
    console.log('https://www.wandianshenme.com/static/media/' + item.featured_image);
    return (
      <TouchableHighlight
        key={this.keyExtractor}>
        <Card
          title={ item.title }>
          <View>
            { item.featured_image
              ? <FastImage
                style={{width: 200, height: 100}}
                resizeMode={FastImage.resizeMode.center}
                source={{
                  uri: 'https://www.wandianshenme.com/static/media/' + item.featured_image
                }}
              />
              : <Text>{ item.featured_image }</Text>
            }
          </View>

          <Text style={{marginBottom: 10}}>
            { item.description }
          </Text>
        </Card>
      </TouchableHighlight>
    );
  };

  render() {
    if (this.state.loading) {
      return <Loading text={'数据加载中'} />;
    }

    return (
      <View style={styles.container}>
        <View>
          <FlatList
            keyExtractor={this.keyExtractor}
            data={this.state.data.results}
            renderItem={this.renderList}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 0,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

export default HomeView;

@@ -95,16 +95,30 @@
   Text,%0A
+  Dimensions,%0A
   Toucha
@@ -377,16 +377,69 @@
 Card';%0A%0A
+const deviceWidth = Dimensions.get('window').width;%0A%0A
 class Ho
@@ -1360,32 +1360,60 @@
 %0A          %3CView
+ style=%7B%7BpaddingBottom: 15%7D%7D
 %3E%0A            %7B 
@@ -1494,24 +1494,58 @@
 th: 
-200, height: 100
+deviceWidth - 60, height: (deviceWidth - 60) * 0.4
 %7D%7D%0A 

update ui