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

import React, { Component } from 'react'
import {
  StyleSheet,
  ScrollView,
  View,
  Image,
  ImageBackground,
  Text,
  Dimensions,
  StatusBar,
  TouchableOpacity,
  FlatList,
  PixelRatio,
  Platform,
  DatePickerAndroid,
} 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 SelectTime from '../../common/SelectTime'
import Collapsible from 'react-native-collapsible'
import SelectTimeCom from '../../../components/selectTime/selectTime'
import { ReturnDate } from '../../../utils/utils'

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

@connect(({ theme, mine, mine_payment }) => ({
  ...theme,
  ...mine,
  ...mine_payment,
}))
class PayReconciliation extends Component {
  constructor(props) {
    const date = new Date()
    super(props)
    this.state = {
      data: [],
      showSearch: false,
      dateActive: true, //时间折叠-true为关
      activeSection: true,
      // 应收组织Index
      receiveIndex: 0,
      // 销售组织Index
      saleIndex: 'fff',
      // 应收组织
      receivableOrgan:
        props.FinancialOrg && props.FinancialOrg.length > 0
          ? props.FinancialOrg[0].finanOrgName
          : '',
      receivableId:
        props.FinancialOrg && props.FinancialOrg.length > 0
          ? props.FinancialOrg[0].finanOrgId
          : '',
      // 销售组织
      saleOrgan: '请选择销售组织',
      // props.SupplierInfo && props.SupplierInfo.length > 0
      //   ? props.SupplierInfo[0].saleOrganizationName
      //   : "请选择销售组织",
      saleId: '',
      // props.SupplierInfo && props.SupplierInfo.length > 0
      //   ? props.SupplierInfo[0].saleOrganizationId
      //   : "",
      // saleOrgan: "请选择销售组织",
      // 头部inputText
      inputText: '',
      // 开始时间
      startTime: '',
      // 结束时间
      endTime: '',
    }
    // this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + 1;
    // this.endTime =
    //   date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
    // this.startTime = 0;
    // this.endTime = 0;
  }

  componentDidMount() {
    //  可用财务组织
    this.props.dispatch(
      createAction('mine/getCusSup')({
        customerId: CUSTOMERINFO.id,
        customerRankCode: CUSTOMERINFO.customerRankCode,
      })
    )

    this.statisticPatch()
    this.findSaleOrg()
  }
  // 应收组织统计页
  statisticPatch() {
    this.props.dispatch(
      createAction('mine_payment/getPayStatistic')({
        searchInfo: this.statsticInfo(),
      })
    )
  }
  statsticInfo() {
    let search = {
      financeOrgId: this.state.receivableId,
    }
    if (this.state.saleId) {
      search.saleOrgId = this.state.saleId
    }
    if (this.state.startTime && this.state.endTime) {
      search.startTime = this.state.startTime
      search.endTime = this.state.endTime
    }
    return search
  }

  findSaleOrg() {
    // 通过财务组织找销售组织
    this.props.dispatch(
      createAction('mine/findSaleOrgByFinance')({
        search_EQ_finanOrg: this.state.receivableId,
        size: 20,
        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.state.showSearch ? (
            <Input
              autoFocus={this.state.showSearch}
              isBlurTrue={false}
              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({ inputText: e })
              }}
            />
          ) : (
            <Text
              style={{
                alignSelf: 'center',
                fontSize: 18,
                lineHeight: 25,
                letterSpacing: 0.19,
                color: '#333',
              }}
            >
              应付对账
            </Text>
          )}
          {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>
    )
  }

  collapsibleData(item, index) {
    return (
      <TouchableOpacity
        onPress={() => {
          if (this.state.filiter == 'Receivable') {
            this.state.receivableId = item.finanOrgId
            this.setState({
              receivableOrgan: item.finanOrgName,
              receivableId: item.finanOrgId,
              activeSection: true,
              receiveIndex: index,
            })
          } else {
            this.state.saleId = item.saleOrganizationId
            this.setState({
              saleOrgan: item.saleOrganizationName,
              saleId: item.saleOrganizationId,
              activeSection: true,
              saleIndex: index,
            })
          }
          this.statisticPatch()
        }}
        style={{
          flexDirection: 'row',
          padding: 10,
          justifyContent: 'space-between',
        }}
      >
        <Text style={{ fontSize: 13, lineHeight: 18, color: '#333' }}>
          {this.state.filiter == 'Receivable'
            ? item.finanOrgName
            : item.saleOrganizationName}
        </Text>
        {this.state.filiter == 'Receivable' &&
        this.state.receiveIndex == index ? (
          <Icon name="icon-icon-duigou" size={16} color={'red'} />
        ) : null}
        {this.state.filiter == 'Sale' && this.state.saleIndex == index ? (
          <Icon name="icon-icon-duigou" size={16} color={'red'} />
        ) : null}
      </TouchableOpacity>
    )
  }

  HeadScreening(from) {
    if (this.state.filiter !== from) {
      this.setState({ activeSection: false })
    } else if (this.state.filiter == from) {
      if (this.state.activeSection == false) {
        this.setState({ activeSection: true })
      } else {
        this.setState({ activeSection: false })
      }
    }
    switch (from) {
      case 'Receivable':
        this.state.filiter = 'Receivable'
        this.setState({ data: this.props.FinancialOrg })
        break
      case 'Sale':
        this.state.filiter = 'Sale'
        this.setState({ data: this.props.SupplierInfo })
        break
    }
  }

  dateCbFn(data) {
    if (data.fn && data.fn == 'cancel') {
      this.setState({ dateActive: true })
    } else {
      this.state.startTime = data.startTime
      this.state.endTime = data.endTime
      this.setState({
        dateActive: true,
      })
      this.statisticPatch()
    }
  }

  receiveList(item, index) {
    return (
      <TouchableOpacity
        onPress={() =>
          this.props.dispatch(
            NavigationActions.navigate({
              routeName: 'ReconciliationDetail',
              params: {
                comeFrom: 'Pay',
                startTime: this.state.startTime,
                endTime: this.endTime,
                Search_FinaOrg: item.financeOrgId,
                saleId: item.saleOrgId,
              },
            })
          )
        }
        style={{ padding: 10, marginTop: 10, backgroundColor: '#FFF' }}
      >
        <View
          style={{
            borderBottomColor: '#DDD',
            borderBottomWidth: 1 / PixelRatio.get(),
            paddingBottom: 7,
          }}
        >
          <Text
            style={{
              fontSize: 14,
              lineHeight: 20,
              letterSpacing: 0.17,
              color: '#333',
            }}
          >
            {item.saleOrgName}
          </Text>
        </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.18,
                color: '#333',
                marginTop: 10,
              }}
            >
              {item.initialBalance}
            </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.18,
                color: '#333',
                marginTop: 10,
              }}
            >
              {item.occurrenceOfThisPeriod}
            </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.18,
                color: '#333',
                marginTop: 10,
              }}
            >
              {item.currenTreceipts}
            </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.18,
                color: '#333',
                marginTop: 10,
              }}
            >
              {item.finalBalance}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    const { appTheme, payStaticData } = 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()}

        {/* 头部筛选条件 */}
        <View
          style={{
            backgroundColor: '#FFF',
            paddingVertical: 10,
            flexDirection: 'row',
            borderBottomColor: '#EEE',
            borderBottomWidth: 1,
          }}
        >
          <TouchableOpacity
            onPress={() => this.HeadScreening('Receivable')}
            style={{
              flex: 1,
              alignItems: 'center',
              borderRightColor: '#EEE',
              borderRightWidth: 1,
            }}
          >
            <View style={{ flexDirection: 'row' }}>
              <Text
                numberOfLines={1}
                style={{
                  fontSize: 14,
                  lineHeight: 20,
                  letterSpacing: 0.17,
                  color:
                    this.state.filiter == 'Receivable'
                      ? this.state.activeSection ? '#333' : '#E70013'
                      : '#333',
                  marginRight: 5,
                }}
              >
                {this.state.receivableOrgan}
              </Text>
              <Icon
                name="icon-icon-xialaxiaosanjiao"
                size={14}
                color={
                  this.state.filiter == 'Receivable'
                    ? this.state.activeSection ? '#999' : '#E70013'
                    : '#999'
                }
                style={{ alignSelf: 'center' }}
              />
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.HeadScreening('Sale')}
            style={{
              flex: 1,
              alignItems: 'center',
            }}
          >
            <View style={{ flexDirection: 'row' }}>
              <Text
                numberOfLines={1}
                style={{
                  fontSize: 14,
                  lineHeight: 20,
                  letterSpacing: 0.17,
                  color:
                    this.state.filiter == 'Sale'
                      ? this.state.activeSection ? '#333' : '#E70013'
                      : '#333',
                  marginRight: 5,
                }}
              >
                {this.state.saleOrgan || '-'}
              </Text>
              <Icon
                name="icon-icon-xialaxiaosanjiao"
                size={14}
                color={
                  this.state.filiter == 'Sale'
                    ? this.state.activeSection ? '#999' : '#E70013'
                    : '#999'
                }
                style={{ alignSelf: 'center' }}
              />
            </View>
          </TouchableOpacity>
        </View>

        <FlatList
          keyExtractor={(item, index) => index}
          data={payStaticData}
          renderItem={({ item, index }) => this.receiveList(item, index)}
        />

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

        {/* 筛选条件下拉 */}
        <View
          style={{
            position: 'absolute',
            top: 101,
            left: 0,
            width: width,
            backgroundColor: '#FFF',
          }}
        >
          <Collapsible collapsed={this.state.activeSection}>
            <FlatList
              keyExtractor={(item, index) => index}
              data={this.state.data}
              extraData={this.state}
              renderItem={({ item, index }) =>
                this.collapsibleData(item, index)
              }
            />
          </Collapsible>
        </View>
        <SelectTimeCom
          dateActive={this.state.dateActive}
          dateCb={data => this.dateCbFn(data)}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  pngstyle: {
    width: width,
  },
  buttonStyle: {
    backgroundColor: 'transparent',
    flexDirection: 'column',
    alignItems: 'center',
  },
  buttonText: {
    marginTop: 9,
    fontSize: 14,
    color: '#FFF',
  },
})

export default PayReconciliation