occ-mobile/app/containers/mine/viewlist/ReconciliationDetail.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  ActivityIndicator,
  Dimensions,
  StatusBar,
  TouchableOpacity,
  PixelRatio,
  FlatList,
  DatePickerAndroid,
  RefreshControl,
  Platform,
} from 'react-native'
import { connect } from 'react-redux'

import Input from '../../../components/input/index'
import Icon from '../../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../../utils'
import { accAdd, ReturnDate } from '../../../utils/utils'
import Collapsible from 'react-native-collapsible'
import SelectTime from '../../common/SelectTime'

const { width, height } = Dimensions.get('window')

@connect(({ theme, mine_header, mine_payment }) => ({
  ...theme,
  ...mine_header,
  ...mine_payment,
}))
class ReconciliationDetail extends Component {
  constructor(props) {
    const date = new Date()
    super(props)
    this.state = {
      dateActive: true,
      listActive: 'asdasd',
      showSearch: false,
      detailList: [],
      // 开始时间
      startTime: props.navigation.state.params.startTime,
      // 结束时间
      endTime: props.navigation.state.params.endTime,
      // 财务组织
      Search_FinaOrg: props.navigation.state.params.Search_FinaOrg,
      saleId: props.navigation.state.params.saleId,
    }
    this.page = 0
    this.size = 5
  }

  componentDidMount = () => {
    this.props.navigation.state.params.comeFrom == 'Cost'
      ? this.props.dispatch(
          createAction('mine_header/CastAmountSaga')({
            pageInfo: { size: 5, page: 0 },
            searchInfo: this.searchInfo(),
            castAmt: [],
          })
        )
      : this.props.dispatch(
          createAction('mine_payment/PayDetailListSagas')({
            payActionData: [],
            pageInfo: { page: this.page, size: this.size },
            searchInfo: this.statsticInfo(),
          })
        )
  }
  // 费用对账请求参数
  searchInfo() {
    postInfo = {
      search_IN_financeOrg: this.state.Search_FinaOrg,
      search_IN_customer: CUSTOMERINFO.id,
      // search_GTE_billDate_date: new Date(this.state.startTime).getTime(),
      // search_LT_billDate_date: new Date(this.state.endTime).getTime()
    }
    if (this.state.startTime) {
      postInfo.search_GTE_billDate_date = new Date(
        this.state.startTime
      ).getTime()
    }
    if (this.state.endTime) {
      postInfo.search_LT_billDate_date = new Date(this.state.endTime).getTime()
    }
    return postInfo
  }

  // 应付对账请求参数
  statsticInfo() {
    let search = {
      search_EQ_financeOrg: this.state.Search_FinaOrg,
    }
    if (this.state.saleId) {
      search.search_EQ_saleOrg = this.state.saleId
    }
    if (this.state.startTime && this.state.endTime) {
      search.search_GTE_creationTime_date = this.state.startTime
      search.search_LT_creationTime_date = this.state.endTime
    }
    // if (this.state.searchText) {
    //   search.search_LIKE_code = this.state.searchText;
    // }
    return search
  }

  onRefresh() {
    this.props.dispatch(
      createAction('mine_header/CastAmountSaga')({
        castAmt: [],
        pageInfo: { page: 0, size: this.size },
        searchInfo: this.searchInfo(),
      })
    )
    this.page = 0
  }

  // 头部
  header() {
    return (
      <View
        style={{
          height: HEADERSTYLE.height,
          paddingTop: HEADERSTYLE.paddingTop + 5,
          backgroundColor: '#fff',
          borderBottomColor: '#eee',
          borderBottomWidth: 1 / PixelRatio.get(),
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
          }}
        >
          <TouchableOpacity
            style={{ position: 'absolute', left: 10, flexDirection: 'row' }}
            onPress={() => this.props.dispatch(NavigationActions.back())}
          >
            <Icon
              name="icon-icon-fanhui"
              size={20}
              color={'#666'}
              style={{ marginTop: 4 }}
            />
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                color: '#666',
                alignSelf: 'center',
              }}
            >
              返回
            </Text>
          </TouchableOpacity>

          {this.props.navigation.state.params.comeFrom == 'Cost' ? (
            <Text
              style={{
                alignSelf: 'center',
                fontSize: 18,
                lineHeight: 25,
                letterSpacing: 0.19,
                color: '#333',
              }}
            >
              费用对账
            </Text>
          ) : this.state.showSearch ? (
            <Input
              autoFocus={this.state.showSearch}
              style={{
                marginLeft: 25,
                marginTop: 8,
                height: 28,
                width: width / 1.6,
                borderRadius: width / 2,
                alignSelf: 'center',
                marginBottom: 8,
                paddingLeft: 14,
              }}
              textStyle={{
                paddingLeft: 10,
                height: 32,
                fontSize: 11,
                padding: 0,
              }}
              iconSize={14}
              blurOnSubmit={true}
              textInputBacg={'#F5F5F5'}
              iconColor={'#CCC'}
              placeholderTextColor={'#CCC'}
              placeholderSize={8}
              onchangeFn={e => {
                this.setState({ activeSection: true })
              }}
            />
          ) : (
            <Text
              style={{
                alignSelf: 'center',
                fontSize: 18,
                lineHeight: 25,
                letterSpacing: 0.19,
                color: '#333',
              }}
            >
              应付对账
            </Text>
          )}
          {/* {this.props.navigation.state.params == "Cost" ? (
            <View
              style={{ position: "absolute", right: 10, flexDirection: "row" }}
            >
              <TouchableOpacity
                onPress={() =>
                  this.setState({ dateActive: !this.state.dateActive })
                }
              >
                <Icon name="icon-icon-rili" size={24} color={"#666"} />
              </TouchableOpacity>
            </View>
          ) : this.state.showSearch ? (
            <TouchableOpacity
              onPress={() =>
                this.setState({ showSearch: false, activeSection: true })
              }
              style={{ position: "absolute", right: 10, flexDirection: "row" }}
            >
              <Text style={{ fontSize: 14, lineHeight: 20, color: "#666" }}>
                取消
              </Text>
            </TouchableOpacity>
          ) : (
            <View
              style={{ position: "absolute", right: 10, flexDirection: "row" }}
            >
              <TouchableOpacity
                style={{ marginRight: 10 }}
                onPress={() =>
                  this.setState({ showSearch: true, activeSection: true })
                }
              >
                <Icon name="icon-icon-sousuo" size={24} color={"#666"} />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() =>
                  this.setState({ dateActive: !this.state.dateActive })
                }
              >
                <Icon name="icon-icon-rili" size={24} color={"#666"} />
              </TouchableOpacity>
            </View>
          )} */}
        </View>
      </View>
    )
  }

  async TimeAndroid(mark) {
    const { action, year, month, day } = await DatePickerAndroid.open({
      date: new Date(),
      // minDate: new Date(),
      mode: 'spinner',
    })
    if (action !== DatePickerAndroid.dismissedAction) {
      let newDate = `${year}-${month + 1}-${day}`
      if (mark == 'start') {
        if (newDate <= this.state.endTime) {
          this.setState({
            startTime: newDate,
          })
        }
      } else if (mark == 'end') {
        if (this.state.startTime <= newDate) {
          this.setState({
            endTime: newDate,
          })
        }
      }
      // 这里开始可以处理用户选好的年月日三个参数：year, month (0-11), day
    }
  }

  ReconciliationList(item, index) {
    return (
      <View>
        <TouchableOpacity
          onPress={() => {
            if (this.state.listActive == index) {
              this.setState({ listActive: 'asdasd' })
            } else {
              this.props.dispatch(
                createAction('mine_header/CastDetailSaga')({ id: item.id })
              )
              this.setState({ listActive: index })
            }
          }}
          style={{ marginTop: 10, padding: 10, backgroundColor: '#FFF' }}
        >
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}
          >
            <View style={{ flexDirection: 'row' }}>
              <Text
                style={{
                  fontSize: 13,
                  lineHeight: 18,
                  letterSpacing: 0.16,
                  color: '#333',
                  marginRight: 10,
                }}
              >
                {item.billCode || item.code}
              </Text>
              {this.props.navigation.state.params.comeFrom == 'Cost' ? (
                <Text
                  style={{
                    fontSize: 13,
                    lineHeight: 18,
                    letterSpacing: 0.16,
                    color: '#333',
                  }}
                >
                  {item.castTypeName}
                </Text>
              ) : null}
            </View>
            <Text style={{ fontSize: 12, lineHeight: 17, color: '#999' }}>
              {ReturnDate(item.billDate || item.creationTime, true)}
            </Text>
          </View>
          <View
            style={{
              marginTop: 5,
              paddingBottom: 5,
              borderBottomColor: '#DDD',
              borderBottomWidth: 1 / PixelRatio.get(),
            }}
          >
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                letterSpacing: 0.17,
                color: '#333',
              }}
            >
              {item.customerName || item.saleOrgName}
            </Text>
          </View>
          {this.props.navigation.state.params.comeFrom == 'Cost' ? (
            <View style={{ flexDirection: 'row', paddingTop: 10 }}>
              <View style={{ flex: 1 }}>
                <Text
                  style={{
                    fontSize: 13,
                    lineHeight: 18,
                    letterSpacing: 0.16,
                    color: '#999',
                  }}
                >
                  费用金额
                </Text>
                <Text
                  style={{
                    fontSize: 15,
                    lineHeight: 21,
                    letterSpacing: 0.16,
                    color: '#333',
                    marginTop: 10,
                  }}
                >
                  {item.castAmount}
                </Text>
              </View>
              <View style={{ flex: 1 }}>
                <Text
                  style={{
                    fontSize: 13,
                    lineHeight: 18,
                    letterSpacing: 0.16,
                    color: '#999',
                  }}
                >
                  订单冲抵
                </Text>
                <Text
                  style={{
                    fontSize: 15,
                    lineHeight: 21,
                    letterSpacing: 0.16,
                    color: '#333',
                    marginTop: 10,
                  }}
                >
                  {accAdd(
                    item.actualFlushAmount,
                    item.actualGoodssupplementAmount
                  )}
                </Text>
              </View>
              <View style={{ flex: 1 }}>
                <Text
                  style={{
                    fontSize: 13,
                    lineHeight: 18,
                    letterSpacing: 0.16,
                    color: '#999',
                  }}
                >
                  余额
                </Text>
                <Text
                  style={{
                    fontSize: 15,
                    lineHeight: 21,
                    letterSpacing: 0.16,
                    color: '#E70013',
                    marginTop: 10,
                  }}
                >
                  {item.castBalance}
                </Text>
              </View>
            </View>
          ) : (
            <View style={{ flexDirection: 'row', paddingTop: 10 }}>
              <View style={{ flex: 1 }}>
                <Text
                  style={{
                    fontSize: 13,
                    lineHeight: 18,
                    letterSpacing: 0.16,
                    color: '#999',
                  }}
                >
                  应付金额
                </Text>
                <Text
                  style={{
                    fontSize: 15,
                    lineHeight: 21,
                    letterSpacing: 0.16,
                    color: '#333',
                    marginTop: 10,
                  }}
                >
                  {item.receivableMoney}
                </Text>
              </View>
              <View style={{ flex: 1 }}>
                <Text
                  style={{
                    fontSize: 13,
                    lineHeight: 18,
                    letterSpacing: 0.16,
                    color: '#999',
                  }}
                >
                  核销金额
                </Text>
                <Text
                  style={{
                    fontSize: 15,
                    lineHeight: 21,
                    letterSpacing: 0.16,
                    color: '#333',
                    marginTop: 10,
                  }}
                >
                  {item.cancellationMoney}
                </Text>
              </View>
              <View style={{ flex: 1 }}>
                <Text
                  style={{
                    fontSize: 13,
                    lineHeight: 18,
                    letterSpacing: 0.16,
                    color: '#999',
                  }}
                >
                  付款核销额
                </Text>
                <Text
                  style={{
                    fontSize: 15,
                    lineHeight: 21,
                    letterSpacing: 0.16,
                    color: '#333',
                    marginTop: 10,
                  }}
                >
                  {item.payMoney}
                </Text>
              </View>
              <View style={{ flex: 1 }}>
                <Text
                  style={{
                    fontSize: 13,
                    lineHeight: 18,
                    letterSpacing: 0.16,
                    color: '#999',
                  }}
                >
                  退款核销额
                </Text>
                <Text
                  style={{
                    fontSize: 15,
                    lineHeight: 21,
                    letterSpacing: 0.16,
                    color: '#333',
                    marginTop: 10,
                  }}
                >
                  {item.backMoney}
                </Text>
              </View>
            </View>
          )}
        </TouchableOpacity>
        <Collapsible collapsed={index !== this.state.listActive}>
          <View
            style={{
              marginHorizontal: 10,
              marginBottom: 10,
              backgroundColor: '#FFFBF2',
              padding: 10,
            }}
          >
            {this.props.navigation.state.params.comeFrom == 'Cost' ? (
              <View style={{ flexDirection: 'row' }}>
                <View style={{ flex: 1 }}>
                  <Text style={{ fontSize: 13, lineHeight: 18, color: '#666' }}>
                    订货单编码
                  </Text>
                </View>
                <View style={{ flex: 1 }}>
                  <Text style={{ fontSize: 13, lineHeight: 18, color: '#666' }}>
                    订单日期
                  </Text>
                </View>
                <View style={{ flex: 1 }}>
                  <Text style={{ fontSize: 13, lineHeight: 18, color: '#666' }}>
                    冲抵金额
                  </Text>
                </View>
              </View>
            ) : (
              <View>
                <View
                  style={{
                    paddingBottom: 10,
                    borderBottomColor: '#DDD',
                    borderBottomWidth: 1,
                  }}
                >
                  <Text style={{ fontSize: 13, lineHeight: 22, color: '#666' }}>
                    核销金额：{CURRENCY.currencySign}
                    {item.cancellationMoney}
                  </Text>
                  <Text style={{ fontSize: 13, lineHeight: 22, color: '#666' }}>
                    关联订单号：{item.srcOrderCode}
                  </Text>
                  <Text style={{ fontSize: 13, lineHeight: 22, color: '#666' }}>
                    关联出库单号：{item.srcBillcode}
                  </Text>
                </View>
                <View style={{ flexDirection: 'row', paddingTop: 10 }}>
                  <View style={{ flex: 1 }}>
                    <Text
                      style={{ fontSize: 13, lineHeight: 18, color: '#666' }}
                    >
                      收款单号
                    </Text>
                  </View>
                  <View style={{ flex: 1, alignItems: 'center' }}>
                    <Text
                      style={{ fontSize: 13, lineHeight: 18, color: '#666' }}
                    >
                      收款核销日
                    </Text>
                  </View>
                  <View style={{ flex: 1 }}>
                    <Text
                      style={{ fontSize: 13, lineHeight: 18, color: '#666' }}
                    >
                      收款核销额
                    </Text>
                  </View>
                </View>
              </View>
            )}
            {this.props.navigation.state.params.comeFrom == 'Cost'
              ? this.props.castDetail.map((item, key) => (
                  <View key={key} style={{ flexDirection: 'row' }}>
                    <View style={{ flex: 1 }}>
                      <Text
                        numberOfLines={1}
                        style={{ fontSize: 13, lineHeight: 22, color: '#666' }}
                      >
                        {item.customerOrderCode}
                      </Text>
                    </View>
                    <View style={{ flex: 1 }}>
                      <Text
                        style={{ fontSize: 13, lineHeight: 22, color: '#666' }}
                      >
                        {ReturnDate(item.billDate, true)}
                      </Text>
                    </View>
                    <View style={{ flex: 1 }}>
                      <Text
                        style={{ fontSize: 13, lineHeight: 22, color: '#666' }}
                      >
                        {item.flushAmount}
                      </Text>
                    </View>
                  </View>
                ))
              : item.billlistPaymentAccount.map((itempay, key) => (
                  <View key={key} style={{ flexDirection: 'row' }}>
                    <View style={{ flex: 1 }}>
                      <Text
                        numberOfLines={1}
                        style={{
                          fontSize: 13,
                          lineHeight: 22,
                          color: '#666',
                        }}
                      >
                        {itempay.paymentCode}
                      </Text>
                    </View>
                    <View style={{ flex: 1, alignItems: 'center' }}>
                      <Text
                        style={{
                          fontSize: 13,
                          lineHeight: 22,
                          color: '#666',
                        }}
                      >
                        {ReturnDate(itempay.paymentTime, true)}
                      </Text>
                    </View>
                    <View style={{ flex: 1 }}>
                      <Text
                        style={{
                          fontSize: 13,
                          lineHeight: 22,
                          color: '#666',
                        }}
                      >
                        {itempay.paymentMoney}
                      </Text>
                    </View>
                  </View>
                ))}
            {this.props.navigation.state.params.comeFrom == 'Cost' ? null : (
              <View
                style={{
                  marginTop: 10,
                  paddingTop: 10,
                  borderTopColor: '#DDD',
                  borderTopWidth: 1,
                }}
              >
                <View style={{ flexDirection: 'row' }}>
                  <View style={{ flex: 1 }}>
                    <Text
                      style={{ fontSize: 13, lineHeight: 18, color: '#666' }}
                    >
                      退款单号
                    </Text>
                  </View>
                  <View style={{ flex: 1, alignItems: 'center' }}>
                    <Text
                      style={{ fontSize: 13, lineHeight: 18, color: '#666' }}
                    >
                      退款核销日期
                    </Text>
                  </View>
                  <View style={{ flex: 1 }}>
                    <Text
                      style={{ fontSize: 13, lineHeight: 18, color: '#666' }}
                    >
                      退款核销额
                    </Text>
                  </View>
                </View>
                {item.billlistRefundAccount.map((itemrefund, key) => (
                  <View key={key} style={{ flexDirection: 'row' }}>
                    <View style={{ flex: 1 }}>
                      <Text
                        numberOfLines={1}
                        style={{
                          fontSize: 13,
                          lineHeight: 22,
                          color: '#666',
                        }}
                      >
                        {itemrefund.refundCode}
                      </Text>
                    </View>
                    <View style={{ flex: 1, alignItems: 'center' }}>
                      <Text
                        style={{
                          fontSize: 13,
                          lineHeight: 22,
                          color: '#666',
                        }}
                      >
                        {itemrefund.refundTime}
                      </Text>
                    </View>
                    <View style={{ flex: 1 }}>
                      <Text
                        style={{
                          fontSize: 13,
                          lineHeight: 22,
                          color: '#666',
                        }}
                      >
                        {itemrefund.refundMoney}
                      </Text>
                    </View>
                  </View>
                ))}
              </View>
            )}
          </View>
        </Collapsible>
      </View>
    )
  }

  // 底部
  footerCom() {
    if (this.props.showFoot == 0) {
      return <View />
    } else if (this.props.showFoot == 1) {
      return (
        <View style={styles.footer}>
          <Text
            style={{
              fontSize: 14,
              lineHeight: 20,
              letterSpacing: 0.17,
              color: '#999',
            }}
          >
            没有更多数据
          </Text>
        </View>
      )
    } else if (this.props.showFoot == 2) {
      return (
        <View style={styles.footer}>
          <ActivityIndicator />
          <Text>正在加载更多数据...</Text>
        </View>
      )
    }
  }

  render() {
    const { appTheme, castAmtContent, totalPages, payDetailData } = this.props
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />
        {this.header()}

        {/* 列表 */}
        <FlatList
          keyExtractor={item => item.id}
          data={
            this.props.navigation.state.params.comeFrom == 'Cost'
              ? castAmtContent
              : payDetailData
          }
          extraData={this.state.listActive}
          renderItem={({ item, index }) => this.ReconciliationList(item, index)}
          ListFooterComponent={this.footerCom.bind(this)}
          // initialNumToRender={5}
          onEndReachedThreshold={0.1}
          onEndReached={e => {
            if (this.props.showFoot != 0) {
              return
            }
            if (this.page != 1 && this.page >= totalPages) {
              return
            } else {
              this.page++
            }
            this.props.navigation.state.params.comeFrom == 'Cost'
              ? this.props.dispatch(
                  createAction('mine_header/CastAmountSaga')({
                    castAmt: castAmtContent,
                    pageInfo: { page: this.page, size: this.size },
                    searchInfo: this.searchInfo(),
                    forUse: 'slipOn',
                  })
                )
              : this.props.dispatch(
                  createAction('mine_payment/PayDetailListSagas')({
                    payActionData: payDetailData,
                    pageInfo: { page: this.page, size: this.size },
                    searchInfo: this.statsticInfo(),
                    forUse: 'slipOn',
                  })
                )
          }}
          refreshControl={
            <RefreshControl
              refreshing={this.props.isRefreshing}
              onRefresh={this.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
              tintColor="red"
              title={this.props.isRefreshing ? '刷新中....' : '下拉刷新'}
            />
          }
        />

        {/* 下拉遮罩 */}
        {!this.state.dateActive ? (
          <View
            style={{
              position: 'absolute',
              width: width,
              height: height,
              backgroundColor: '#000',
              opacity: 0.5,
              top: 101,
            }}
          />
        ) : null}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  footer: {
    flexDirection: 'row',
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
    marginTop: 10,
  },
})

export default ReconciliationDetail