customer / shanghai-railway-rnapp

/**
 * Created by xiniu on 2018/5/22.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
} from 'react-native';
import { width, height, zoomW, zoomH } from '../../utils/getSize';

const zoom = 750 / parseInt(Dimensions.get('window').width);
const selected = require('../../img/selected.png');

export default class addIndustry extends Component {
  static navigationOptions = ({ navigation, screenProps }) => ({
    title: navigation.state.params.title,
    headerLeft: (
      <TouchableOpacity style={styles.backWrap} onPress={() => navigation.goBack()}>
        <Image source={require('../../img/back_gray.png')} resizeMode="contain" />
      </TouchableOpacity>
        ),
    headerRight: (
      <View />
        ),
  });

  constructor(props) {
    super(props);
    this.state = {
      list: [],
      resultList: [],
      selectedParent: {},
    };
  }

  componentWillMount() {
    const _this = this;
    const tempList = [];
    const lineList = [];
    const stationObj = {};
    const stationList = [];
    const recordList = this.props.navigation.state.params.recordList;
    recordList.map(function (ele, idx) {
      if (!stationObj[ele.lineId]) {
        stationObj[ele.lineId] = [];
      }
      if (stationList.indexOf(ele.stationId) === -1) {
        stationObj[ele.lineId].push({ code: ele.stationId, name: ele.stationName });
        stationList.push(ele.stationId);
      }
      if (lineList.indexOf(ele.lineId) === -1) {
        tempList.push({ code: ele.lineId, name: ele.lineName, children: [] });
        lineList.push(ele.lineId);
      }
      if (idx === recordList.length - 1) {
        tempList.map(function (ele, idx) {
          if (stationObj.hasOwnProperty(ele.code)) {
            ele.children = stationObj[ele.code];
          }
          if (idx === tempList.length - 1) {
            _this.setState({
              list: tempList,
            });
          }
        });
      }
    });

    const selectedList = JSON.parse(JSON.stringify(this.props.navigation.state.params.selectedList));
    for (let j = 0; j < selectedList.length; j++) {
      delete selectedList[j].select;
      if (j === selectedList.length - 1) {
        this.setState({
          resultList: selectedList,
        });
      }
    }
  }

  componentDidMount() {

  }

    /* 渲染一级列表*/
  renderList(item, index) {
    return (
      <TouchableOpacity activeOpacity={1} key={index} style={[styles.parentItem, { backgroundColor: item.select ? '#538AE1' : '#f4f4f4' }]} onPress={() => this.pressParent(index)}>
        <View style={{ flex: 1 }}>
          <Text style={{ fontSize: 14, color: item.select ? '#fff' : '#333' }}>{item.name}</Text>
        </View>
      </TouchableOpacity>
    );
  }

    /* 选择一级行业*/
  pressParent(index) {
    const tempList = this.state.list;
    const tempResultList = this.state.resultList;
    for (let i = 0; i < tempList.length; i++) {
      tempList[i].select = false;
      if (i === tempList.length - 1) {
        tempList[index].select = true;
        this.setState({
          selectedParent: tempList[index],
        });
      }
    }
    const tempChildrenList = tempList[index].children;
    for (let m = 0; m < tempChildrenList.length; m++) {
      let flag = false;
      const child = tempChildrenList[m];
      if (tempResultList.length > 0) {
        for (let n = 0; n < tempResultList.length; n++) {
          if (JSON.stringify(child) === JSON.stringify(tempResultList[n])) {
            flag = true;
            child.select = true;
            tempResultList[n].select = true;
          }
          if (!flag && n === tempResultList.length - 1) {
            child.select = false;
          }
          if (m === tempChildrenList.length - 1 && n === tempResultList.length - 1) {
            this.setState({
              list: tempList,
              childrenList: tempChildrenList,
              resultList: tempResultList,
            });
          }
        }
      } else {
        child.select = false;
        if (m === tempChildrenList.length - 1) {
          this.setState({
            list: tempList,
            childrenList: tempChildrenList,
          });
        }
      }
    }
  }

    /* 渲染二级列表*/
  renderChlidren(item, index) {
    return (
      <TouchableOpacity activeOpacity={1} key={index} style={styles.childrenItem} onPress={() => this.pressChildren(index)}>
        <View style={{ width: (340 / zoom) }}>
          <Text style={{ fontSize: 14, color: item.select ? '#538AE1' : '#333' }}>{item.name}</Text>
        </View>
        {item.select && <Image source={selected} resizeMode="contain" style={{ width: (26 / zoom) }} />}
      </TouchableOpacity>
    );
  }

    /* 选择二级行业*/
  pressChildren(index) {
    const tempChildrenList = this.state.childrenList;
    const tempResultList = [];
    this.setState({
      resultList: [],
    });
    for (let i = 0; i < tempChildrenList.length; i++) {
      if (index === i) {
        tempChildrenList[i].select = true;
        tempResultList.push(tempChildrenList[i]);
      } else {
        tempChildrenList[i].select = false;
      }
      if (i === tempChildrenList.length - 1) {
        this.setState({
          childrenList: tempChildrenList,
          resultList: tempResultList,
        }, () => {
          this.props.navigation.state.params.callback(this.state.selectedParent, tempResultList);
          this.props.navigation.goBack();
        });
      }
    }
  }

  render() {
    return (
      <View style={styles.background}>
        <View style={styles.contentBox}>
          <View style={styles.parentBox}>
            <ScrollView showsVerticalScrollIndicator={false} scrollEventThrottle={200}>
              {this.state.list.map((item, index) => this.renderList(item, index))}
            </ScrollView>
          </View>
          <View style={styles.childrenBox}>
            <ScrollView showsVerticalScrollIndicator={false} scrollEventThrottle={200}>
              {this.state.childrenList && this.state.childrenList.map((item, index) => this.renderChlidren(item, index))}
            </ScrollView>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  backWrap: {
    justifyContent: 'center',
    paddingLeft: 15 / zoomW,
    paddingRight: 15 / zoomW,
    height: 44 / zoomH,
  },
  background: {
    width: '100%',
    height: '100%',
    backgroundColor: '#f4f4f4',
  },
  contentBox: {
    flex: 1,
    display: 'flex',
    flexDirection: 'row',
  },
  parentBox: {
    flex: 3.8,
    height: '100%',
    backgroundColor: '#f4f4f4',
  },
  childrenBox: {
    flex: 6,
    height: '100%',
    backgroundColor: '#fff',
  },
  parentItem: {
    display: 'flex',
    flexDirection: 'row',
    paddingTop: 10,
    paddingBottom: 10,
    marginBottom: 5,
    paddingLeft: (24 / zoom),
    paddingRight: (16 / zoom),
  },
  childrenItem: {
    paddingTop: 10,
    paddingBottom: 10,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 5,
    paddingLeft: (24 / zoom),
    paddingRight: (24 / zoom),
  },
});