customer / shanghai-railway-rnapp

/**
 * Created by xiniu on 2018/7/27.
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    Animated,
    ActivityIndicator,
    Platform,
    ScrollView,
    Button,
    TextInput,
    TouchableWithoutFeedback,
    Keyboard,
    Dimensions,
    Modal,
} from 'react-native';
import moment from 'moment';
import { width, height, zoomW, zoomH } from '../../utils/getSize';
import xnService from '../../service/AppService';
import { clock, xnToast, timeReduce, timePlus, timeEvery, getDay } from '../../utils/utils';

export default class chooseActivityAttribute extends Component {
  static navigationOptions = ({ navigation }) => ({
    headerTitle: navigation.state.params.title,
    headerLeft: (
      <TouchableOpacity style={styles.backWrap} onPress={() => navigation.goBack()}>
        <Image source={require('../../img/back_gray.png')} resizeMode="contain" />
      </TouchableOpacity>
        ),
    headerRight: (
      <TouchableOpacity style={styles.renderRight} onPress={() => navigation.state.params?navigation.state.params.cancel():null}>
        <Text style={{ color: '#4B85E0', fontSize: 14 }}>取消</Text>
      </TouchableOpacity>
        ),
  });

  constructor(props) {
    super(props);
    this.keyboardShow = null;
    this.keyboardHide = null;
    this.state = {
      loading: false,
      select: this.props.navigation.state.params.defultValue,
      typeList: [],
      completeList: [],
      keyword: '',
      isFocus: false,
    };
  }

  componentWillMount() {
    const _this = this;
    this.setState({
      loading: true,
    });
    xnService.findVolunteer({ pageSize: 0 }).then((data) => {
      _this.setState({
        loading: false,
      });
      if (data.message) {
        xnToast(data.message);
        return;
      }
      if (!!data.errors === true && !!data.errors.length > 0) {
        xnToast(data.errors[0].message);
      } else {
        console.log(data);
        if (data.result.length > 0) {
          _this.setState({
            typeList: data.result,
            completeList: data.result,
          });
        } else {
          xnToast('暂无数据');
          _this.setState({
            typeList: [],
            completeList: [],
          });
        }
      }
    });

    this.keyboardShow = Platform.OS === 'ios' ?
            Keyboard.addListener('keyboardWillShow', this.updateKeyboardSpace.bind(this)) : Keyboard.addListener('keyboardDidShow', this.updateKeyboardSpace.bind(this));
    this.keyboardHide = Platform.OS === 'ios' ?
            Keyboard.addListener('keyboardWillHide', this.resetKeyboardSpace.bind(this)) : Keyboard.addListener('keyboardDidHide', this.resetKeyboardSpace.bind(this));
  }

  componentDidMount() {
    this.props.navigation.setParams({
      cancel: () => this.cancel(),
    });
  }

  componentWillUnmount() {
        // 卸载键盘弹出事件监听
    if (this.keyboardShow !== null) {
      this.keyboardShow.remove();
    }
        // 卸载键盘隐藏事件监听
    if (this.keyboardHide !== null) {
      this.keyboardHide.remove();
    }
  }

    // 打开键盘
  updateKeyboardSpace(frames) {

  }

    // 关闭键盘
  resetKeyboardSpace() {
    this.setState({
      isFocus: false,
    });
  }

    // 保存
  save(v) {
    this.setState({
      select: v.name,
      loading: true,
    });
    xnService.registPart({ id: global.user.id, volunteerId: v.code, age: Number(global.user.age) }).then((data) => {
      this.setState({
        loading: false,
      });
      if (data.message) {
        xnToast(data.message);
        return;
      }
      if (!!data.errors === true && !!data.errors.length > 0) {
        xnToast(data.errors[0].message);
      } else {
        global.user.volunteerName = this.state.select;
        if (this.props.navigation.state.params.callback) {
          this.props.navigation.state.params.callback();
        }
        this.props.navigation.goBack();
      }
    });
  }

    // 取消
  cancel() {
    this.setState({
      select: '',
      loading: true,
    });
    xnService.registPart({ id: global.user.id, volunteerId: '0', age: Number(global.user.age) }).then((data) => {
      this.setState({
        loading: false,
      });
      if (data.message) {
        xnToast(data.message);
        return;
      }
      if (!!data.errors === true && !!data.errors.length > 0) {
        xnToast(data.errors[0].message);
      } else {
        global.user.volunteerName = '';
        if (this.props.navigation.state.params.callback) {
          this.props.navigation.state.params.callback();
        }
      }
    });
  }

    // 搜索
  getList() {
    this.setState({
      isFocus: false,
    });
    const list = this.state.completeList;
    if (list.length === 0) {
      this.setState({
        keyword: '',
      });
      xnToast('暂无数据');
      return;
    }
    if (this.state.keyword === '') {
      this.setState({
        typeList: list,
      });
    } else {
      const dataList = [];
      for (let i = 0; i < list.length; i++) {
        if (list[i].name.indexOf(this.state.keyword) !== -1) {
          dataList.push(list[i]);
        }
        if (i === list.length - 1) {
          if (dataList.length > 0) {
            this.setState({
              keyword: '',
              typeList: dataList,
            });
          } else {
            xnToast('暂无数据');
            this.setState({
              keyword: '',
              typeList: [],
            });
          }
        }
      }
    }
  }

  renderItem=(v, i) => (
    <TouchableOpacity activeOpacity={0.8} style={styles.rowWrap} onPress={() => this.save(v)} key={i}>
      <View style={styles.rowItem}>
        <Text style={this.state.select === v.name ? styles.select : styles.unSelect}>{v.name}</Text>
        {this.state.select === v.name && <Image source={require('../../img/orgaSelected.png')} style={{ width: 14 / zoomW, height: 12 / zoomH }} resizeMode="contain" />}
      </View>
    </TouchableOpacity>
    )


  render() {
    return (
      <View style={styles.background}>
        <View style={styles.searchWrap}>
          <TouchableWithoutFeedback style={{ width: '100%', height: '100%' }} onPress={() => this.setState({ isFocus: true })}>
            <View style={styles.inputWrap}>
              <Image style={styles.searchIcon} source={require('../../img/searchIcon.png')} resizeMode="contain" />
              {this.state.isFocus ?
                <TextInput
                  style={styles.searchWord}
                  placeholder="搜索"
                  autoFocus={this.state.isFocus}
                  returnKeyType="search"
                  onSubmitEditing={() => this.getList()}
                  defaultValue={this.state.keyword}
                  underlineColorAndroid="transparent"
                  placeholderTextColor="#999"
                  onChangeText={(text) => {
                    this.setState({
                      keyword: text,
                    });
                  }}
                /> :
                <Text style={{ fontSize: 14, color: '#999' }}>搜索</Text>
                            }
            </View>
          </TouchableWithoutFeedback>
        </View>
        <ScrollView
          bounces={false}
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          style={{ flex: 1 }}
          scrollEventThrottle={200}
        >
          {this.state.typeList.map((v, i) => this.renderItem(v, i))}
        </ScrollView>
        {this.state.loading && <View style={styles.loadingBg}>
          <ActivityIndicator size="large" />
        </View>}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  backWrap: {
    justifyContent: 'center',
    paddingLeft: 18.5 / zoomW,
    paddingRight: 18.5 / zoomW,
    height: 44 / zoomH,
  },
  renderRight: {
    height: '100%',
    justifyContent: 'center',
    paddingLeft: 15 / zoomW,
    paddingRight: 15 / zoomW,
  },
  background: {
    flex: 1,
    backgroundColor: '#f6f6f6',
    display: 'flex',
    alignItems: 'center',
  },
  modalBg: {
    width,
    height,
    backgroundColor: 'rgba(0,0,0,.5)',
  },
  rightMenu: {
    width: 285 / zoomW,
    height,
    backgroundColor: '#fff',
    position: 'absolute',
    right: 0,
    paddingLeft: 9 / zoomW,
    paddingTop: 25 / zoomH,
  },
  menuWrap: {
    width: '100%',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  menu: {
    width: 84 / zoomW,
    height: 44 / zoomH,
    paddingLeft: 12 / zoomW,
    paddingRight: 12 / zoomW,
    borderRadius: 2 / zoomW,
    marginRight: 8 / zoomW,
    marginBottom: 8 / zoomH,
    justifyContent: 'center',
    alignItems: 'center',

  },
  searchWrap: {
    width: '100%',
    height: 48 / zoomH,
    backgroundColor: '#eee',
    paddingLeft: 17 / zoomW,
    paddingRight: 17 / zoomW,
    justifyContent: 'center',
  },
  inputWrap: {
    width: '100%',
    height: 30 / zoomH,
    paddingLeft: 20 / zoomW,
    paddingRight: 20 / zoomW,
    borderRadius: 5 / zoomW,
    backgroundColor: '#fff',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  searchIcon: {
    width: 11.5 / zoomW,
    height: 11.5 / zoomW,
    marginRight: 11 / zoomW,
  },
  searchWord: {
    width: '100%',
    height: '100%',
    padding: 0,
    fontSize: 14,
    color: '#333',
  },
  rowWrap: {
    width,
    height: 44 / zoomH,
    backgroundColor: '#fff',
    paddingLeft: 14 / zoomW,
    paddingRight: 14 / zoomW,
  },
  rowItem: {
    width: '100%',
    height: '100%',
    paddingLeft: 1 / zoomW,
    paddingRight: 1 / zoomW,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#eee',
  },
  itemLine: {
    height: 44 / zoomH,
    width: '100%',
    backgroundColor: 'white',
    paddingLeft: 15 / zoomW,
    paddingRight: 15 / zoomW,
    marginTop: 12 / zoomH,
  },
  select: {
    fontSize: 14,
    color: '#4B85E0',
  },
  unSelect: {
    fontSize: 14,
    color: '#333',
  },
  loadingBg: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
});