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

import React, { Component } from 'react'
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  Dimensions,
  StatusBar,
  TouchableOpacity,
  PixelRatio,
  FlatList,
  DatePickerAndroid,
  Platform,
} from 'react-native'
import { connect } from 'react-redux'
import Icon from '../../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../../utils'
import Echarts from '../../../components/echarts/EchartsComponent'
import Collapsible from 'react-native-collapsible'

import SelectTimeCom from '../../../components/selectTime/selectTime'
import { setNowFormatDate } from '../../../utils/utils'

const { width, height } = Dimensions.get('window')
const data = [
  { proTitle: 'A应收组织', Quota: 8000, Occupancy: 2330 },
  { proTitle: 'B应收组织', Quota: 4000, Occupancy: 2330 },
  { proTitle: 'C应收组织', Quota: 12000, Occupancy: 5748 },
]
@connect(({ theme, mine_header, mine }) => ({ ...theme, ...mine_header, mine }))
class CostReconciliation extends Component {
  constructor(props) {
    const date = new Date()
    super(props)
    this.state = {
      reflsh: true,
      castAmtData: [],
      FinancialOrg: props.mine.FinancialOrg,
      Show_FinaOrg:
        props.mine.FinancialOrg.length > 0
          ? props.mine.FinancialOrg[0].finanOrgName
          : '应收组织',
      Search_FinaOrg:
        props.mine.FinancialOrg.length > 0
          ? props.mine.FinancialOrg[0].finanOrgId
          : '',
      activeSection: true,
      dateActive: true,
      echartData: data[0],
      touchIndex: 0,
      // 开始时间 --显示用
      startTime: setNowFormatDate(true),
      // 结束时间 ---显示用
      endTime: setNowFormatDate(),
    }
  }

  componentDidMount = () => {
    this.searchTouch()
  }

  searchTouch() {
    this.props
      .dispatch(
        createAction('mine_header/CastAmountSaga')({
          pageInfo: { size: 5, page: 0 },
          castAmt: [],
          searchInfo: this.searchCast(),
        })
      )
      .finally(() => {
        if (this.props.castAmtData) {
          this.state.castAmtData = this.props.castAmtData
          this.setState({
            castAmtData: this.props.castAmtData,
          })
        }
      })
  }

  searchCast() {
    postInfo = {
      search_IN_financeOrg: this.state.Search_FinaOrg,
      search_IN_customer: CUSTOMERINFO.id,
    }
    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
  }

  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.searchTouch()
    }
  }

  // 头部
  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>
          <Text
            style={{
              alignSelf: 'center',
              fontSize: 18,
              lineHeight: 25,
              letterSpacing: 0.19,
              color: '#333',
            }}
          >
            费用对账
          </Text>
          <View
            style={{ position: 'absolute', right: 10, flexDirection: 'row' }}
          >
            <TouchableOpacity
              style={{ marginRight: 10 }}
              onPress={() =>
                this.setState({
                  dateActive: !this.state.dateActive,
                  activeSection: true,
                  reflsh: false,
                })
              }
            >
              <Icon name="icon-icon-rili" size={24} color={'#666'} />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }

  _topOrganization(item, index) {
    return (
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => {
          this.state.Search_FinaOrg = item.finanOrgId
          this.setState({
            activeSection: true,
            Show_FinaOrg: item.finanOrgName,
            touchIndex: index,
            reflsh: true,
          })
          this.searchTouch()
        }}
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          padding: 10,
          backgroundColor: '#FFF',
        }}
      >
        <Text
          style={{
            fontSize: 14,
            lineHeight: 20,
            letterSpacing: 0.17,
            color: '#333',
          }}
        >
          {item.finanOrgName}
        </Text>
        {this.state.touchIndex == index ? (
          <Icon name="icon-icon-duigou" size={16} color={'red'} />
        ) : null}
      </TouchableOpacity>
    )
  }

  // 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
  //   }
  // }

  render() {
    const { appTheme } = this.props
    const { castAmtData } = this.state
    // echart 刷新问题  后期优化
    let echartDatas = {
      proTitle: this.state.reflsh,
      creditBalance: castAmtData.endBalance,
      creditLimit: 0,
    }
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />
        {this.header()}

        <ScrollView style={{ flex: 1 }}>
          <TouchableOpacity
            activeOpacity={1}
            onPress={() =>
              this.setState({
                activeSection: !this.state.activeSection,
                dateActive: true,
                reflsh: false,
              })
            }
            style={{
              flexDirection: 'row',
              padding: 10,
              backgroundColor: '#FFF',
              borderBottomColor: '#DDD',
              borderBottomWidth: 1 / PixelRatio.get(),
            }}
          >
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                letterSpacing: 0.17,
                color: '#333',
              }}
            >
              {this.state.Show_FinaOrg}
            </Text>
            <Icon
              name="icon-icon-xialaxiaosanjiao"
              size={16}
              color={'#333'}
              style={[
                !this.state.activeSection
                  ? { transform: [{ rotate: '180deg' }] }
                  : {},
                {
                  marginLeft: 10,
                  marginTop: 2,
                },
              ]}
            />
          </TouchableOpacity>

          {/* 图表 */}
          <View
            style={{
              backgroundColor: '#FFF',
              borderBottomColor: '#DDD',
              borderBottomWidth: 1 / PixelRatio.get(),
            }}
          >
            <Echarts
              data={echartDatas}
              height={240}
              color={['#FF7D64', '#FF7D64']}
              bottomText={'期末余额'}
              bottom={'27%'} //字体距离底的高度
              fontSize={24} //余额数字字体
            />
          </View>

          {/* 余额显示 */}
          <View
            style={{
              backgroundColor: '#FFF',
              paddingVertical: 17,
              flexDirection: 'row',
              borderBottomColor: '#DDD',
              borderBottomWidth: 1 / PixelRatio.get(),
            }}
          >
            <View style={{ flex: 1, paddingHorizontal: 10 }}>
              <Text
                style={{
                  fontSize: 13,
                  lineHeight: 18,
                  letterSpacing: 0.16,
                  color: '#999',
                }}
              >
                期初余额
              </Text>
              <Text
                style={{
                  fontSize: 15,
                  lineHeight: 21,
                  letterSpacing: 0.18,
                  color: '#333',
                  marginTop: 7,
                }}
              >
                {castAmtData.openBalance || 0}
              </Text>
            </View>
            <View
              style={{
                height: 30,
                width: 1,
                backgroundColor: '#DDD',
                alignSelf: 'center',
              }}
            />
            <View
              style={{
                flex: 1,
                paddingHorizontal: 10,
              }}
            >
              <Text
                style={{
                  fontSize: 13,
                  lineHeight: 18,
                  letterSpacing: 0.16,
                  color: '#999',
                }}
              >
                增加
              </Text>
              <Text
                style={{
                  fontSize: 15,
                  lineHeight: 21,
                  letterSpacing: 0.18,
                  color: '#333',
                  marginTop: 7,
                }}
              >
                {castAmtData.castIncre || 0}
              </Text>
            </View>
            <View
              style={{
                height: 30,
                width: 1,
                backgroundColor: '#DDD',
                alignSelf: 'center',
              }}
            />
            <View
              style={{
                flex: 1,
                paddingHorizontal: 10,
              }}
            >
              <Text
                style={{
                  fontSize: 13,
                  lineHeight: 18,
                  letterSpacing: 0.16,
                  color: '#999',
                }}
              >
                减少
              </Text>
              <Text
                style={{
                  fontSize: 15,
                  lineHeight: 21,
                  letterSpacing: 0.18,
                  color: '#333',
                  marginTop: 7,
                }}
              >
                {castAmtData.castReduce || 0}
              </Text>
            </View>
          </View>

          {/* 查看详情 */}
          <View style={{ paddingVertical: 30, backgroundColor: '#FFF' }}>
            <TouchableOpacity
              onPress={() =>
                this.props.dispatch(
                  NavigationActions.navigate({
                    routeName: 'ReconciliationDetail',
                    params: {
                      comeFrom: 'Cost',
                      startTime: this.state.startTime,
                      endTime: this.state.endTime,
                      Search_FinaOrg: this.state.Search_FinaOrg,
                    },
                  })
                )
              }
              style={{
                alignSelf: 'center',
                paddingVertical: 9,
                paddingHorizontal: 36,
                backgroundColor: '#F56151',
                borderRadius: 100,
              }}
            >
              <Text
                style={{
                  fontSize: 14,
                  lineHeight: 20,
                  letterSpacing: 0.17,
                  color: '#FFF',
                }}
              >
                查看详情
              </Text>
            </TouchableOpacity>
          </View>

          {/* 下拉遮罩 */}
          {!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: 40, left: 0, width: width }}
          >
            <Collapsible collapsed={this.state.activeSection}>
              <FlatList
                keyExtractor={(item, index) => item.id + index}
                data={this.state.FinancialOrg}
                extraData={this.state.touchIndex}
                renderItem={({ item, index }) =>
                  this._topOrganization(item, index)
                }
              />
            </Collapsible>
          </View>

          {/* 时间弹窗 */}
          <SelectTimeCom
            dateActive={this.state.dateActive}
            dateCb={data => this.dateCbFn(data)}
          />

          {/* <SelectTime
            ref={showTime => (this.showTime = showTime)}
            cb={(date, mark) => {
              let newDate =
                date &&
                `${date.getFullYear()}-${date.getMonth() +
                  1}-${date.getDate()}`;
              if (mark == "start") {
                // if (newDate <= this.endTime) {
                this.setState({
                  startTime: newDate
                });
                // }
              } else if (mark == "end") {
                // if (this.startTime <= newDate) {
                this.setState({
                  endTime: newDate
                });
                // }
              }
            }}
          /> */}

          {/* 时间选择下拉 */}
          {/* <View
            style={{
              position: "absolute",
              left: 0,
              width: width,
              backgroundColor: "#FFF"
            }}
          >
            <Collapsible collapsed={this.state.dateActive}>
              <View>
                <View
                  style={{
                    flexDirection: "row",
                    justifyContent: "space-between",
                    padding: 20,
                    marginBottom: 20
                  }}
                >
                  <View>
                    <Text
                      style={{
                        fontSize: 13,
                        lineHeight: 18,
                        letterSpacing: 0.16,
                        color: "#333",
                        alignSelf: "center"
                      }}
                    >
                      开始时间
                    </Text>
                    <TouchableOpacity
                      onPress={() =>
                        Platform.OS == "ios"
                          ? this.showTime._openModal("start")
                          : this.TimeAndroid("start")
                      }
                      style={{
                        paddingHorizontal: 40,
                        paddingVertical: 7,
                        marginTop: 16,
                        borderColor: "#DDD",
                        borderWidth: 1,
                        borderRadius: 100
                      }}
                    >
                      <Text
                        style={{
                          fontSize: 13,
                          lineHeight: 18,
                          letterSpacing: 0.16,
                          color: "#333"
                        }}
                      >
                        {this.state.startTime}
                      </Text>
                    </TouchableOpacity>
                  </View>
                  <View style={{ paddingTop: 37 }}>
                    <Text
                      style={{
                        fontSize: 18,
                        lineHeight: 25,
                        letterSpacing: 0.22,
                        color: "#333"
                      }}
                    >
                      ~
                    </Text>
                  </View>
                  <View>
                    <Text
                      style={{
                        fontSize: 13,
                        lineHeight: 18,
                        letterSpacing: 0.16,
                        color: "#333",
                        alignSelf: "center"
                      }}
                    >
                      结束时间
                    </Text>
                    <TouchableOpacity
                      onPress={() =>
                        Platform.OS == "ios"
                          ? this.showTime._openModal("end")
                          : this.TimeAndroid("end")
                      }
                      style={{
                        paddingHorizontal: 40,
                        paddingVertical: 7,
                        marginTop: 16,
                        borderColor: "#DDD",
                        borderWidth: 1,
                        borderRadius: 100
                      }}
                    >
                      <Text
                        style={{
                          fontSize: 13,
                          lineHeight: 18,
                          letterSpacing: 0.16,
                          color: "#333"
                        }}
                      >
                        {this.state.endTime}
                      </Text>
                    </TouchableOpacity>
                  </View>
                </View>
                <View style={{ height: 40, flexDirection: "row" }}>
                  <TouchableOpacity
                    onPress={() => {
                      this.setState({
                        dateActive: true,
                        startTime: this.startTime,
                        endTime: this.endTime
                      });
                    }}
                    style={{
                      width: width / 2,
                      backgroundColor: "#FFF",
                      justifyContent: "center"
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 14,
                        lineHeight: 22,
                        letterSpacing: 0.21,
                        color: "#333",
                        alignSelf: "center"
                      }}
                    >
                      取消
                    </Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={() => {
                      this.startTime = this.state.startTime;
                      this.endTime = this.state.endTime;
                      this.setState({
                        dateActive: true,
                        reflsh: true
                      });
                      this.searchTouch();
                    }}
                    style={{
                      width: width / 2,
                      backgroundColor: "#E70013",
                      justifyContent: "center"
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 14,
                        lineHeight: 22,
                        letterSpacing: 0.21,
                        color: "#FFF",
                        alignSelf: "center"
                      }}
                    >
                      确定
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            </Collapsible>
          </View> */}
        </ScrollView>
      </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 CostReconciliation