customer / shanghai-railway-rnapp

/**
 * Created by xiniu on 2018/4/25.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    ActivityIndicator,
    ScrollView,
} from 'react-native';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import { width, height, zoomW, zoomH } from '../../utils/getSize';
import { xnToast, timeEvery } from '../../utils/utils';
import AppService from '../../service/AppService';

export default class myContribution extends Component {
  static navigationOptions = ({ navigation, screenProps }) => ({
    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 = {
      avatar: global.user.avatar || null,
      entries: [],
      activeSlide: 0,
      loading: true,
    };
  }

  componentWillMount() {
    const _this = this;
    const prams = {
      id: global.user.id,
    };
    AppService.getUserById(prams).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 {
        _this.setState({
          entries: [
              { type: '总计', topDesc: '安全护行 ', totalCount: data.user.escortCount || 0, topUnit: ' 次', bottomDesc: '时间总计 ', specialCount: timeEvery(data.user.escortTime || 0, 'hours'), bottomUnit: ' 小时' },
              { type: '本月', topDesc: '安全护行 ', totalCount: data.user.monthEscortCount || 0, topUnit: ' 次', bottomDesc: '时间总计 ', specialCount: timeEvery(data.user.monthEscortTime || 0, 'hours'), bottomUnit: ' 小时' },
              { type: '本周', topDesc: '安全护行 ', totalCount: data.user.weekEscortCount || 0, topUnit: ' 次', bottomDesc: '时间总计 ', specialCount: timeEvery(data.user.weekEscortTime || 0, 'hours'), bottomUnit: ' 小时' },
          ],
        });
      }
    });
  }

  _renderItem({ item, index }) {
    return (
      <View style={styles.carouselWrap}>
        <Image style={styles.carouselImg} source={require('../../img/carouselBg.png')} resizeMode="contain" />
        <Text style={{ backgroundColor: 'transparent', fontSize: 18, color: '#FFDA14', marginBottom: item.type !== '安全护航' ? 33 / zoomH : 23 / zoomH }}>{item.type}</Text>
        {item.type === '安全护航' && <Text style={{ backgroundColor: 'transparent', fontSize: 14, color: '#F9F9F9', marginBottom: 9 / zoomH }}>安全护航时间</Text>}
        <Text style={{ backgroundColor: 'transparent', fontSize: 14, color: '#F9F9F9', marginBottom: item.type !== '安全护航' ? 13 / zoomH : 11 / zoomH }}>{item.topDesc}<Text style={{ backgroundColor: 'transparent', fontSize: 18, color: '#FFDA14' }}>{item.totalCount}</Text>{item.topUnit}</Text>
        <Text style={{ backgroundColor: 'transparent', fontSize: 14, color: '#F9F9F9' }}>{item.bottomDesc}<Text style={{ backgroundColor: 'transparent', fontSize: 18, color: '#FFDA14' }}>{item.specialCount}</Text>{item.bottomUnit}</Text>
      </View>
    );
  }

  get pagination() {
    const { entries, activeSlide } = this.state;
    return (
      <Pagination
        dotsLength={entries.length}
        activeDotIndex={activeSlide}
        containerStyle={{
          paddingVertical: 0,
        }}
        dotContainerStyle={{
          marginHorizontal: 10 / zoomW,
        }}
        dotStyle={{
          width: 29 / zoomW,
          height: 2 / zoomH,
          backgroundColor: '#FFFFFF',
          borderRadius: 0,
        }}
        inactiveDotStyle={{
          backgroundColor: '#C4C4C4',
        }}
        inactiveDotScale={1}
        inactiveDotOpacity={1}
      />
    );
  }

  render() {
    return (
      <View style={styles.background}>
        {!this.state.loading && <View style={styles.bgImgWrap}>
          <Image style={{ width: '100%', height: '100%' }} source={require('../../img/contributionBg.png')} resizeMode="cover" />
        </View>}
        {!this.state.loading && <ScrollView style={{ flex: 1 }} scrollEventThrottle={200}>
          <View style={{ paddingTop: 42 / zoomH, alignItems: 'center' }}>
            <View style={styles.avatarWrap}>
              {this.state.avatar ? <Image source={{ uri: this.state.avatar }} style={{ width: 74 / zoomW, height: 74 / zoomW }} resizeMode="cover" /> :
              <Image source={global.user.politicalStatus == 1 ? require('../../img/defultPartyIcon.png') : require('../../img/defultIcon.png')} style={{ width: 74 / zoomW, height: 74 / zoomW }} resizeMode="cover" />}
            </View>
            <View style={styles.baseInfoWrap}>
              {/* <Text style={{ backgroundColor:'transparent',fontSize: 13, color: '#FCFCFC' }}>等级：12级</Text>*/}
              {/* <View style={styles.gap} />*/}
              {/* <Text style={{ backgroundColor:'transparent',fontSize: 13, color: '#FCFCFC' }}>头衔：头衔名</Text>*/}
            </View>
          </View>
          <Carousel
            ref={(c) => { this._carousel = c; }}
            data={this.state.entries}
            renderItem={this._renderItem}
            sliderWidth={width}
            itemWidth={176 / zoomW}
            inactiveSlideScale={0.85}
            containerCustomStyle={{ height: 272 / zoomH, marginBottom: 30 / zoomH }}
            loop
            loopClonesPerSide={0}
            autoplay
            autoplayDelay={1000}
            onSnapToItem={index => this.setState({ activeSlide: index })}
          />
          { this.pagination }
        </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,
  },
  background: {
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    position: 'relative',
  },
  bgImgWrap: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    left: 0,
    top: 0,
  },
  baseInfoWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 27 / zoomH,
  },
  avatarWrap: {
    width: 80 / zoomW,
    height: 80 / zoomW,
    backgroundColor: '#EFEFEF',
    borderRadius: 4 / zoomW,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 27 / zoomH,
  },
  gap: {
    width: 1 / zoomW,
    height: 14 / zoomH,
    backgroundColor: '#F6F6F6',
    marginLeft: 25 / zoomW,
    marginRight: 25 / zoomW,
  },
  carouselWrap: {
    width: '100%',
    height: '100%',
    paddingTop: 31 / zoomH,
    alignItems: 'center',
    position: 'relative',
  },
  carouselImg: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    left: 0,
    top: 0,
  },
  loadingBg: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
});