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 }}>
            <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',
  },
});