customer / shanghai-railway-rnapp

/**
 * Created by xiniu on 2018/5/9.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    ActivityIndicator,
    ScrollView,
    FlatList,
} from 'react-native';
import ScrollableTabView, { DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view';
import moment from 'moment';
import SwipeView from 'react-native-swipeout';
import { width, height, zoomW, zoomH } from '../../utils/getSize';
import { xnToast } from '../../utils/utils';
import AppService from '../../service/AppService';

export default class volunteerServiceDetail 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 = {
      loading: true,
      serviceList: [],
      secondList: [],
      thirdList: [],
      fourthList: [],
      fifthList: [],
      refreshing: false,
      tempEmployeeNumber: '',                 // 表示扫到的二维码
      postDetail: {},
      currentTab: 0,
      postIndex: '',
      deleteButton: [
        {
          backgroundColor: '#EC5151',
          text: '删除',
          onPress: () => {
            this.deletePost(this.state.postIndex);
          },
        },
      ],
    };
  }

  componentWillMount() {
    this.getFirstPage();
  }

    // 请求第一页的数据
  getFirstPage() {
    const _this = this;
    this.setState({
      loading: true,
      serviceList: [],
      secondList: [],
      thirdList: [],
      fourthList: [],
      fifthList: [],
      refreshing: false,
      tempEmployeeNumber: '',
      postDetail: {},
    });
    AppService.getPositionDetail({
      lineId: '',
      stationId: '',
      startDate: '',
      endDate: '',
      userId: global.user.id,
    }).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 {
        const tempSecondList = [];
        const tempThirdList = [];
        const tempFourthList = [];
        const tempFifthList = [];
        data.record.map(function (ele, idx) {
          if (ele.bespeakState === '001') {
            tempSecondList.push(ele);
          } else if (ele.bespeakState === '003') {
            tempThirdList.push(ele);
          } else if (ele.bespeakState === '004') {
            tempFourthList.push(ele);
          } else if (ele.bespeakState === '002') {
            tempFifthList.push(ele);
          }
          if (idx === data.record.length - 1) {
            _this.setState({
              serviceList: data.record,
              secondList: tempSecondList,
              thirdList: tempThirdList,
              fourthList: tempFourthList,
              fifthList: tempFifthList,
            });
          }
        });
      }
    });
  }

  // 切换tab
  changeStatus(obj) {
    this.setState({
      currentTab: obj.i,
    });
    if (obj.i == 0) {
      if (this.state.serviceList.length === 0) {
        xnToast('暂无数据');
      }
    } else if (obj.i == 1) {
      if (this.state.secondList.length === 0) {
        xnToast('暂无数据');
      }
    } else if (obj.i == 2) {
      if (this.state.thirdList.length === 0) {
        xnToast('暂无数据');
      }
    } else if (obj.i == 3) {
      if (this.state.fourthList.length === 0) {
        xnToast('暂无数据');
      }
    } else if (obj.i == 4) {
      if (this.state.fifthList.length === 0) {
        xnToast('暂无数据');
      }
    }
  }

      // 扫描
  callBackBarcode=(barcode) => {
    // console.log(barcode, '+++++++++++++++++++++');
    if (this.state.tempEmployeeNumber === barcode) {
      return;
    }
    const _this = this;
    this.setState({
      tempEmployeeNumber: barcode,
    });
    AppService.createArrival({
      userId: global.user.id,
      lineId: this.state.postDetail.lineId,
      lineName: this.state.postDetail.lineName,
      stationId: this.state.postDetail.stationId,
      stationName: this.state.postDetail.stationName,
      arrivalTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      startTime: this.state.postDetail.starttime,
      endTime: this.state.postDetail.endtime,
      postPositionId: this.state.postDetail.id,
      postPositionName: this.state.postDetail.postName,
      publishDate: this.state.postDetail.publishDate,
      state: '003',
      qrcode: barcode,
    }).then((data) => {
      if (data.message) {
        xnToast(data.message);
        return;
      }
      if (!!data.errors === true && !!data.errors.length > 0) {
        xnToast(data.errors[0].message);
      } else {
        xnToast('签到成功');
        _this.getFirstPage();
      }
    });
  };

    // 签到
  signIn(item) {
    this.setState({
      tempEmployeeNumber: '',
      postDetail: item,
    }, () => {
      this.props.navigation.navigate('IOSScan', { callBack: this.callBackBarcode });
    });
  }

    // 签出
  signOut(item) {
    const _this = this;
    this.setState({
      postDetail: item,
    }, () => {
      AppService.createLeave({
        userId: global.user.id,
        lineId: this.state.postDetail.lineId,
        lineName: this.state.postDetail.lineName,
        stationId: this.state.postDetail.stationId,
        stationName: this.state.postDetail.stationName,
        leaveTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        startTime: this.state.postDetail.starttime,
        endTime: this.state.postDetail.endtime,
        postPositionId: this.state.postDetail.id,
        postPositionName: this.state.postDetail.postName,
        publishDate: this.state.postDetail.publishDate,
        state: '002',
        qrcode: this.state.postDetail.qrcode,
      }).then((data) => {
        if (data.message) {
          xnToast(data.message);
          return;
        }
        if (!!data.errors === true && !!data.errors.length > 0) {
          xnToast(data.errors[0].message);
        } else {
          xnToast('签退成功');
          _this.getFirstPage();
        }
      });
    });
  }

    // 选岗撤销
  deletePost(postIndex) {
    const _this = this;
    this.setState({
      postIndex: '',
    });
    const list = this.state.currentTab == 0 ? this.state.serviceList : this.state.secondList;
    AppService.cancelPostPosition({
      userId: global.user.id,
      xgId: list[postIndex].id,
    }).then((data) => {
      if (data.message) {
        xnToast(data.message);
        return;
      }
      if (!!data.errors === true && !!data.errors.length > 0) {
        xnToast(data.errors[0].message);
      } else {
        xnToast('撤销成功');
        _this.getFirstPage();
      }
    });
  }

    /* 渲染列表*/
  keyExtractor = (item, index) => index;
  renderItem({ item, index }) {
    return (
      <View style={[styles.rowWrap, { marginTop: index === 0 ? 10 / zoomH : 0 }]} key={index}>
        {item.bespeakState === '001' ? <SwipeView
          backgroundColor="#fff"
          right={this.state.deleteButton}
          close={this.state.postIndex !== index}
          onOpen={() => {
            this.setState({
              postIndex: index,
            });
          }}
        >
          <View style={styles.itemWrap}>
            <View style={[styles.statusFlag, { backgroundColor: (item.bespeakState === '001' || item.bespeakState === '003') ? '#EC5151' : '#CECECE' }]} />
            <View>
              <View style={{ maxWidth: 160 / zoomW, marginBottom: 5 / zoomH }}>
                <Text style={{ fontSize: 14, color: '#373737', fontWeight: '600' }} numberOfLines={1}>{item.stationName}</Text>
              </View>
              <View style={{ maxWidth: 160 / zoomW, marginBottom: 5 / zoomH }}>
                <Text style={{ fontSize: 13, color: '#4B4B4B' }} numberOfLines={1}>{item.postName}</Text>
              </View>
              <View style={{ maxWidth: 310 / zoomW, flexDirection: 'row', alignItems: 'center' }}>
                <Text style={{ fontSize: 13, color: '#868686' }}>{item.publishDate}／{`周${'日一二三四五六'.charAt(new Date(item.publishDate).getDay())}`}</Text>
                <Text style={{ fontSize: 13, color: '#878787', marginLeft: 15 / zoomW }}>{item.starttime}-{item.endtime}</Text>
              </View>
            </View>
            <View style={styles.btnWrap}>
              {(item.bespeakState === '001' || item.bespeakState === '003') && <View style={[styles.btn, { borderColor: '#F87C7C' }]}>
                <Text style={{ fontSize: 13, color: '#EC5151' }} numberOfLines={1}>已预约</Text>
                </View>}
              {item.bespeakState === '001' && <TouchableOpacity style={[styles.btn, { borderWidth: 0, backgroundColor: '#538AE1', marginLeft: 5 / zoomW }]} onPress={() => this.signIn(item)}>
                <Text style={{ fontSize: 13, color: '#fff' }} numberOfLines={1}>签到</Text>
                </TouchableOpacity>}
              {item.bespeakState === '003' && <TouchableOpacity style={[styles.btn, { borderColor: '#4B85E0', marginLeft: 5 / zoomW }]} onPress={() => this.signOut(item)}>
                <Text style={{ fontSize: 13, color: '#4B85E0' }} numberOfLines={1}>签出</Text>
                </TouchableOpacity>}
              {item.bespeakState === '004' && <View style={[styles.btn, { borderColor: '#CECECE' }]}>
                <Text style={{ fontSize: 13, color: '#CECECE' }} numberOfLines={1}>缺勤</Text>
                </View>}
            </View>
          </View>
        </SwipeView> : <View style={styles.itemWrap}>
          <View style={[styles.statusFlag, { backgroundColor: (item.bespeakState === '001' || item.bespeakState === '003') ? '#EC5151' : '#CECECE' }]} />
          <View>
            <View style={{ maxWidth: 160 / zoomW, marginBottom: 5 / zoomH }}>
              <Text style={{ fontSize: 14, color: '#373737', fontWeight: '600' }} numberOfLines={1}>{item.stationName}</Text>
            </View>
            <View style={{ maxWidth: 160 / zoomW, marginBottom: 5 / zoomH }}>
              <Text style={{ fontSize: 13, color: '#4B4B4B' }} numberOfLines={1}>{item.postName}</Text>
            </View>
            <View style={{ maxWidth: 310 / zoomW, flexDirection: 'row', alignItems: 'center' }}>
              <Text style={{ fontSize: 13, color: '#868686' }}>{item.publishDate}／{`周${'日一二三四五六'.charAt(new Date(item.publishDate).getDay())}`}</Text>
              <Text style={{ fontSize: 13, color: '#878787', marginLeft: 15 / zoomW }}>{item.starttime}-{item.endtime}</Text>
            </View>
          </View>
          <View style={styles.btnWrap}>
            {(item.bespeakState === '001' || item.bespeakState === '003') && <View style={[styles.btn, { borderColor: '#F87C7C' }]}>
              <Text style={{ fontSize: 13, color: '#EC5151' }} numberOfLines={1}>已预约</Text>
              </View>}
            {item.bespeakState === '001' && <TouchableOpacity style={[styles.btn, { borderWidth: 0, backgroundColor: '#538AE1', marginLeft: 5 / zoomW }]} onPress={() => this.signIn(item)}>
              <Text style={{ fontSize: 13, color: '#fff' }} numberOfLines={1}>签到</Text>
              </TouchableOpacity>}
            {item.bespeakState === '003' && <TouchableOpacity style={[styles.btn, { borderColor: '#4B85E0', marginLeft: 5 / zoomW }]} onPress={() => this.signOut(item)}>
              <Text style={{ fontSize: 13, color: '#4B85E0' }} numberOfLines={1}>签出</Text>
              </TouchableOpacity>}
            {item.bespeakState === '004' && <View style={[styles.btn, { borderColor: '#CECECE' }]}>
              <Text style={{ fontSize: 13, color: '#CECECE' }} numberOfLines={1}>缺勤</Text>
              </View>}
          </View>
        </View>}
      </View>
    );
  }

    // 下拉刷新
  onRefresh() {
    this.setState({
      refreshing: true,
    }, () => {
      const timer = setTimeout(() => {
        clearTimeout(timer);
        this.getFirstPage();
      }, 1000);
    });
  }

  render() {
    return (
      <View style={styles.background}>
        <ScrollableTabView
          style={{ backgroundColor: '#F6F6F6' }}
          locked
          renderTabBar={() => <DefaultTabBar style={styles.tabStyle} />}
          tabBarUnderlineStyle={styles.lineStyle}
          tabBarBackgroundColor="#fff"
          tabBarActiveTextColor="#3878B4"
          tabBarInactiveTextColor="#6B6B6B"
          tabBarTextStyle={{ fontSize: 14, fontWeight: 'normal' }}
          onChangeTab={(obj) => {
            this.changeStatus(obj);
          }}
        >
          <View tabLabel="全部">
            <FlatList
              data={this.state.serviceList}
              renderItem={this.renderItem.bind(this)}
              keyExtractor={this.keyExtractor}
              onRefresh={this.onRefresh.bind(this)}
              refreshing={this.state.refreshing}
            />
          </View>
          <View tabLabel="已预约">
            <FlatList
              data={this.state.secondList}
              renderItem={this.renderItem.bind(this)}
              keyExtractor={this.keyExtractor}
              onRefresh={this.onRefresh.bind(this)}
              refreshing={this.state.refreshing}
            />
          </View>
          <View tabLabel="未完成">
            <FlatList
              data={this.state.thirdList}
              renderItem={this.renderItem.bind(this)}
              keyExtractor={this.keyExtractor}
              onRefresh={this.onRefresh.bind(this)}
              refreshing={this.state.refreshing}
            />
          </View>
          <View tabLabel="缺勤">
            <FlatList
              data={this.state.fourthList}
              renderItem={this.renderItem.bind(this)}
              keyExtractor={this.keyExtractor}
              onRefresh={this.onRefresh.bind(this)}
              refreshing={this.state.refreshing}
            />
          </View>
          <View tabLabel="已完成">
            <FlatList
              data={this.state.fifthList}
              renderItem={this.renderItem.bind(this)}
              keyExtractor={this.keyExtractor}
              onRefresh={this.onRefresh.bind(this)}
              refreshing={this.state.refreshing}
            />
          </View>
        </ScrollableTabView>
        {this.state.loading && <View style={styles.loadingBg}>
          <ActivityIndicator size="large" />
        </View>}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  backWrap: {
    justifyContent: 'center',
    paddingLeft: 15 / zoomW,
    paddingRight: 15 / zoomW,
    height: 44 / zoomH,
  },
  background: {
    flex: 1,
    backgroundColor: '#F6F6F6',
    position: 'relative',
  },
  lineStyle: {
    width: 27 / zoomW,
    height: 3 / zoomH,
    backgroundColor: '#3878B4',
    left: '10%',
    marginLeft: -27 / 2 / zoomW,
  },
  tabStyle: {
    height: 44 / zoomH,
    paddingTop: 10 / zoomH,
    borderWidth: 0,
  },
  rowWrap: {
    paddingLeft: 15 / zoomW,
    paddingRight: 15 / zoomW,
    marginBottom: 10 / zoomH,
  },
  itemWrap: {
    width: '100%',
    height: 84 / zoomH,
    backgroundColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    borderTopLeftRadius: 4 / zoomW,
    borderBottomLeftRadius: 4 / zoomW,
    position: 'relative',
  },
  statusFlag: {
    width: 15 / zoomW,
    height: '100%',
    borderTopLeftRadius: 4 / zoomW,
    borderBottomLeftRadius: 4 / zoomW,
    marginRight: 12 / zoomW,
  },
  btnWrap: {
    height: 24 / zoomH,
    flexDirection: 'row',
    alignItems: 'center',
    position: 'absolute',
    top: 11 / zoomH,
    right: 15 / zoomW,
  },
  btn: {
    width: 66 / zoomW,
    height: '100%',
    borderWidth: 1,
    borderRadius: 4 / zoomW,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingBg: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
});