content: /**
   * Sample React Native App
   * https://github.com/facebook/react-native
   * @flow
   */
  
  import React, { Component } from 'react';
  import {
      StyleSheet,
      AppRegistry,
      Text,
      View,
      ScrollView,
      TouchableOpacity,
  PixelRatio,
      ScrollView,
      NavigatorIOS
  } from 'react-native';
  
  
  class demo extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data:null
      };
    }
  }
  
  class MenuListView extends Component {
  
      // static prefixType = "_type_";
      // static prefixStyle = "_style_";
      static defaultBackGroundColor = {backgroundColor:'#fff'};
      // 构造
        constructor(props) {
          super(props);
          // 初始状态
            this.state = {
                data: props.data,
                nSelected: props.nSelected,
                tabSelected: props.tabSelected
            };
        }
  
      renderHeader() {
          var header = [];
          var tabIndex = 0;
          for(var i in this.state.data) {
              var tabStyle = null;
              if(tabIndex === this.state.tabSelected) {
                  tabStyle = [styles.header_text, styles.active_blue];
              } else {
                  tabStyle = [styles.header_text];
              }
              header.push(
                  <TouchableOpacity onPress={this.headerPress.bind(this, tabIndex)} style={[styles.flex_1, styles.center]}>
                      <Text style={tabStyle}>{i}</Text>
                  </TouchableOpacity>
              );
              tabIndex++;
          }
          return header;
      }
  
      renderLeft() {
          var leftPinnel = [];
          var index = 0;
          var leftData = [];
          for (var i in  this.state.data) {
              if (index === this.state.tabSelected) {
                  leftData = this.state.data[i];
                  break;
              }
              index++;
          }
          var nIndex = 0;
          for (var k in leftData) {
              var style = {};
              if (nIndex === this.state.nSelected) {
                  style = {backgroundColor:'#fff'};
              }
              leftPinnel.push(
                  <Text onPress={this.leftPress.bind(this,index,nIndex)} style={[styles.left_row, style]}>{k}</Text>
              );
              nIndex++;
          }
          return leftPinnel;
      }
  
      renderRight() {
          var rightData = [];
          var index = 0;
          var nIndex = 0;
          for (var tab in this.state.data) {
              if (index === this.state.tabSelected) {
                  nIndex = 0;
                  for (var n in this.state.data[tab]) {
                      console.log(n);
                      if (nIndex === this.state.nSelected) {
                          rightData = this.state.data[tab][n];
                          break;
                      }
                      nIndex++;
                  }
                  break;
              }
              index++;
          }
          var rightPinnel = [];
          for(var i in rightData) {
              rightPinnel.push(
                  <Text style={[styles.left_row]} onPress={this.props.click.bind(this, index, nIndex, i)}>{rightData[i]}</Text>
              );
          }
          return rightPinnel;
      }
  
      headerPress(index) {
          if (index !== this.state.tabSelected) {
              this.setState({
                  tabSelected:index,
                  nSelected:0
              });
              console.log(this.state);
          }
      }
      leftPress(i, k) {
          if (k !== this.state.nSelected) {
              this.setState({
                  tabSelected:i,
                  nSelected:k,
              });
              console.log(this.state);
          }
      }
      render() {
          console.log("render");
          var header = this.renderHeader();
          var left = this.renderLeft();
          var right = this.renderRight();
          return (
                <View style={styles.container}>
                    <View style={[styles.row, styles.header]}>
                        {header}
                    </View>
                    <View style = {[styles.row, styles.flex_1]}>
                        <ScrollView style={[styles.flex_1, styles.left_pannel]}>
                            {left}
                        </ScrollView>
                        <ScrollView style={[styles.flex_1, styles.right_pannel]}>
                            {right}
                        </ScrollView>
                    </View>
                </View>
          );
      }
  }
  
  class MenuList extends Component {
      // 构造
        constructor(props) {
          super(props);
          // 初始状态
          this.state = {
              data: {
              "全部区域": {
                  "全部区域": ["全部区域"],
                  "热门商圈": [
                      "虹桥地区",
                      "徐家汇地区",
                      "淮海路地区",
                      "静安地区",
                      "上海火车站",
                      "同济大学",
                      "人民广场",
                      "南翔",
                      "安亭",
                      "嘉定"
                  ],
                  "热门行政区": [
                      "静安区",
                      "徐汇区",
                      "浦东",
                      "金山区",
                      "闸北区",
                      "杨浦区",
                      "徐汇区",
                      "宝山区",
                      "虹口区",
                      "黄浦区",
                      "嘉定区",
                      "闵行区",
                      "奉贤区",
                      "崇明岛"
                  ]
              },
              "地铁沿线": {
                  "地铁沿线": ["地铁沿线"],
                  "一号线":[
                      "莘庄",
                      "外环",
                      "莲花路",
                      "海伦路"
                  ],
                  "二号线": [
                      "1",
                      "1",
                      "1",
                      "1",
                      "1",
                      "1",
                      "1",
                      "1",
                      "1",
                      "1",
                      "1"
                  ]
              }
          }
          };
        }
      render() {
          return (
              <View style={[styles.marginTop20]}>
  
                  <MenuListView data={this.state.data} nSelected={1} tabSelected={0} click={this.onPress} />
              </View>
          );
      }
      onPress(tabIndex, leftIndex, rightIndex) {
          alert(rightIndex);
      }
  }
  
  const styles = StyleSheet.create({
      marginTop20: {
          marginTop:20
      },
      container: {
          height:240,
          flex:1,
          borderTopWidth:1,
          borderBottomWidth:1,
          borderColor:'#ddd'
      },
      row: {
          flexDirection:'row'
      },
      flex_1: {
          flex:1
      },
      header: {
          height:35,
          borderBottomWidth:1,
          borderColor:'#dfdfdf',
          backgroundColor:'#f5f5f5'
      },
      header_text: {
          color:'#7b7b7b',
          fontSize:15
      },
      center: {
          justifyContent:'center',
          alignItems:'center'
      },
      left_pannel: {
          backgroundColor:'#f2f2f2'
      },
      left_row: {
          height:30,
          lineHeight:20,
          color:'#7c7c7c',
          fontSize:14
      },
      right_pannel: {
          marginLeft:10
      },
      active_blue: {
          color:'#00b7eb'
      },
      active_fff: {
          color:"#fff"
      }
  });
  
  AppRegistry.registerComponent('MenuList', () => MenuList);
  