content: import React from 'react';
  import {StyleSheet, View, ListView, AsyncStorage} from  'react-native';
  import {connect} from 'react-redux'
  import {bindActionCreators} from 'redux';
  import Toast from 'react-native-root-toast';
  import template from 'url-template';
  import BackPageComponent from '../../../components/BackPageComponent';
  import NavigationBar from '../../../components/NavigationBar';
  import CategoryItem from '../../../components/CategoryItem';
  import SearchPage from '../../../components/SearchPage';
  import CategoryItemDetailPage from './CategoryItemDetailPage';
  import * as Actions from '../../../actions/modifyCategoryData';
  import url from '../../../constants/url';
  import theme from '.././../../constants/theme';
  import colors from '../../../constants/colors';
  import px2dp from '../../../utils/px2dp';
  
  class CategoryPage extends BackPageComponent {
      constructor(props) {
          super(props);
          this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
          this.state = {
              dataSource: []
          };
      }
  
      componentWillMount() {
          const _self = this;
          const {data, user} = this.props;
  
          AsyncStorage.getItem('CATEGORY_PAGE_' + data.id).then((categoryData) => {
              if (categoryData) {
                  let categories = JSON.parse(categoryData);
                  for (let i = 0; i < categories.length; i++) {
                      AsyncStorage.setItem('CATEGORY_ITEM_DETAIL_PAGE_' + categories[i]['categoryId'] + '_' + categories[i].id,
                          JSON.stringify(categories[i]));
                  }
  
                  _self.setState({
                      dataSource: JSON.parse(categoryData)
                  });
              } else {
                  return fetch(template.parse(url.itemsOfCategoryUrl).expand({
                      categoryId: data.id,
                      token: user.token
                  }));
              }
          }).then(response => {
              if (response) {
                  if (response.ok) {
                      return response.json();
                  } else {
                      Toast.show('网络异常,请稍后重试', {
                          position: px2dp(-80)
                      });
                  }
              }
          }).then(json => {
              if (json) {
                  AsyncStorage.setItem('CATEGORY_PAGE_' + data.id, JSON.stringify(json));
                  for (let i = 0; i < json.length; i++) {
                      AsyncStorage.setItem('CATEGORY_ITEM_DETAIL_PAGE_' + json[i]['categoryId'] + '_' + json[i].id,
                          JSON.stringify(json[i]));
                  }
  
                  _self.setState({
                      dataSource: json
                  });
              }
          }).catch(() => {
              Toast.show('网络异常,请稍后重试', {
                  position: px2dp(-80)
              });
          });
      }
  
      render() {
          const {data, pageBackgroundColor} = this.props;
          const {dataSource} = this.state;
  
          return (
              <View style={[styles.container, {backgroundColor: pageBackgroundColor}]}>
                  <NavigationBar
                      title={data.name}
                      isBackBtnOnLeft={true}
                      leftBtnIcon='arrow-back'
                      leftBtnPress={this._handleBack.bind(this)}
                  />
                  <ListView
                      dataSource={this.ds.cloneWithRows(dataSource)}
                      enableEmptySections={true}
                      automaticallyAdjustContentInsets={false}
                      showsVerticalScrollIndicator={false}
                      renderRow={(rowData, sectionID, rowID) => this._renderItem(rowData, rowID)}
                      renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.itemSeparator} />}
                  />
              </View>
          );
      }
  
      componentDidMount() {
          const {actions} = this.props;
  
          actions.fetchData();
      }
  
      _renderItem(data) {
          const {navigator} = this.props;
          console.log('data', data);
  
          return (
              <CategoryItem
                  imageSource={url.rootUrl + data['iconImageUri']}
                  data={data} component={CategoryItemDetailPage}
                  navigator={navigator}/>
          );
      }
  
      _switchPage() {
          const {data, navigator} = this.props;
  
          navigator.push({
              component: SearchPage,
              args: {
                  data: data
              }
          });
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          paddingTop: theme.toolbar.paddingTop
      },
      buttons: {
          width: theme.screenWidth,
          paddingBottom: 5
      },
      onRowButton: {
          flexDirection: 'row',
          justifyContent: 'center'
      },
      activeButtonContainer: {
          padding:10,
          height:40,
          margin: 5,
          overflow:'hidden',
          borderRadius:4,
          backgroundColor: colors.skyBlue,
          flex: 1
      },
      buttonContainer: {
          padding:10,
          height:40,
          margin: 5,
          overflow:'hidden',
          borderRadius:4,
          backgroundColor: '#666',
          flex: 1
      },
      buttonText: {
          fontSize: 16,
          color: '#fff'
      },
      itemSeparator: {
          height: theme.segment.width * 10,
          backgroundColor: 'rgba(0, 0, 0, 0)'
      }
  });
  
  const mapStateToProps = (state) => {
      return {
          mainThemeColor: state.settingState.colorScheme.mainThemeColor,
          pageBackgroundColor: state.settingState.colorScheme.pageBackgroundColor,
          tabIconColor: state.settingState.colorScheme.tabIconColor,
          dataSource: state.categoryDataState.dataSource,
          user: state.loginState.user
      };
  };
  
  const mapDispatchToProps = (dispatch) => {
      return {
          actions: bindActionCreators(Actions, dispatch)
      };
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(CategoryPage);