import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  Dimensions,
  StatusBar,
  TouchableOpacity,
  PixelRatio,
  FlatList,
  Platform,
  DatePickerAndroid,
  RefreshControl,
  ActivityIndicator,
} 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 { ReturnDate, setNowFormatDate } from '../../../utils/utils'
import Collapsible from 'react-native-collapsible'
import SelectTime from '../../common/SelectTime'
import moment from 'moment'
const { width, height } = Dimensions.get('window')
/**
 * 查询条件
 *  search_IN_financeOrg:'',          财务组织 Id
 *  search_EQ_billStatus:'',          订单状态 Code
 *  search_EQ_billCode:'',            Code
 *  search_EQ_paymentMethod:'',       费用冲抵 Code
 *  search_IN_saleOrg:'',             销售组织 Id
 *  search_GTE_billDate_date,         开始时间
 *  search_LT_billDate_date           结束时间
 */
@connect(({ theme, mine_header, mine }) => ({
  ...theme,
  ...mine_header,
  ...mine,
}))
class Cost extends Component {
  constructor(props) {
    const date = new Date()
    super(props)
    this.state = {
      data: [],
      activeSection: true, //筛选条件折叠-true为关
      dateActive: true, //时间折叠-true为关
      filiter: 0,
      showSearch: false,
      // 应收组织Index
      receiveIndex: 0,
      // 销售组织Index
      saleIndex: 0,
      // 状态Index
      stateIndex: 0,
      // 冲抵Index
      offsetIndex: 0,
      // 应收组织
      receivableOrgan:
        props.FinancialOrg.length > 0
          ? props.FinancialOrg[0].organizationName
          : '',
      // 销售组织
      saleOrgan:
        props.SupplierInfo.length > 0
          ? props.SupplierInfo[0].saleOrganizationName
          : '',

      // 状态
      stateSelect: '订单状态',
      // 冲抵
      offsetSelect: '费用冲抵',
      // 开始时间
      startTime: setNowFormatDate(true),
      // 结束时间
      endTime: setNowFormatDate(),
      // 查询条件
      offsetSelectCode: '',
      stateSelectCode: '',
      saleOrganId: '',
      // props.SupplierInfo.length > 0
      //   ? props.SupplierInfo[0].saleOrganizationId
      //   : "",
      receivableOrganId:
        props.FinancialOrg.length > 0 ? props.FinancialOrg[0].finanOrgId : '',
    }
    this.startTime = 0
    // date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
    this.endTime = 0
    // date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();

    this.page = 0
    this.size = 5
  }

  componentDidMount = () => {
    //  可用财务组织、销售组织
    this.props.dispatch(
      createAction('mine/getCusSup')({
        customerId: CUSTOMERINFO.id,
        customerRankCode: CUSTOMERINFO.customerRankCode,
        comeFrom: 'castBalance',
      })
    )
    this.props.dispatch(
      createAction('mine_header/CastSaga')({
        pageInfo: { size: 5, page: 0 },
        searchInfo: this.searchInfo(),
        castData: [],
      })
    )
  }

  searchInfo() {
    let searchInfo = {
      search_EQ_financeOrg: this.state.receivableOrganId,
      // search_IN_saleOrg: this.state.saleOrganId,
      search_EQ_customer: CUSTOMERINFO.id,
    }
    if (this.state.saleOrganId) {
      searchInfo.search_EQ_saleOrg = this.state.saleOrganId
    }
    if (this.state.offsetSelectCode) {
      searchInfo.search_EQ_paymentMethod = this.state.offsetSelectCode
    }
    if (this.state.stateSelectCode) {
      searchInfo.search_EQ_billStatus = this.state.stateSelectCode
    }
    if (this.startTime !== 0) {
      searchInfo.search_GTE_billDate_date = new Date(this.startTime).getTime()
    }
    if (this.endTime !== 0) {
      searchInfo.search_LT_billDate_date = new Date(this.endTime).getTime()
    }
    return searchInfo
  }

  onRefresh() {
    this.props.dispatch(
      createAction('mine_header/CastSaga')({
        castData: [],
        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.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.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,
                    dateActive: true,
                  })
                }
              >
                <Icon name="icon-icon-sousuo" size={24} color={'#333'} />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() =>
                  this.setState({
                    dateActive: !this.state.dateActive,
                    activeSection: true,
                  })
                }
              >
                <Icon name="icon-icon-rili" size={24} color={'#333'} />
              </TouchableOpacity>
            </View>
          )}
        </View>
      </View>
    )
  }

  costList(item) {
    return (
      <TouchableOpacity
        onPress={() => {
          this.props.dispatch(
            createAction('mine_header/CastDetailSaga')({ id: item.id })
          )
          this.props.dispatch(
            NavigationActions.navigate({
              routeName: 'CostDetail',
              params: { castData: item },
            })
          )
        }}
        style={{ padding: 10, marginTop: 10, backgroundColor: '#FFF' }}
      >
        <View
          style={{
            paddingBottom: 10,
            borderBottomColor: '#EEE',
            borderBottomWidth: 1,
          }}
        >
          <View
            style={{ flexDirection: 'row', justifyContent: 'space-between' }}
          >
            <View style={{ flexDirection: 'row' }}>
              <Text
                style={{
                  fontSize: 13,
                  lineHeight: 18,
                  letterSpacing: 0.16,
                  color: '#333',
                }}
              >
                {item.billCode}
              </Text>
              <Text
                style={{
                  fontSize: 13,
                  lineHeight: 16,
                  color: '#333',
                  marginLeft: 10,
                }}
              >
                {item.castTypeName}
              </Text>
              <Text
                style={{
                  fontSize: 13,
                  lineHeight: 16,
                  color: '#59C152',
                  marginLeft: 10,
                }}
              >
                保存
              </Text>
            </View>
            <Text style={{ fontSize: 12, lineHeight: 17, color: '#999' }}>
              {ReturnDate(item.billDate, true)}
            </Text>
          </View>
          <Text
            style={{
              fontSize: 14,
              lineHeight: 20,
              letterSpacing: 0.17,
              color: '#333',
              marginTop: 4,
            }}
          >
            {item.customerName}
          </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={{
                marginTop: 10,
                fontSize: 15,
                lineHeight: 21,
                letterSpacing: 0.18,
                color: '#333',
              }}
            >
              {item.castAmount}
            </Text>
          </View>
          <View style={{ flex: 1 }}>
            <Text
              style={{
                fontSize: 13,
                lineHeight: 18,
                letterSpacing: 0.16,
                color: '#999',
              }}
            >
              余额
            </Text>
            <Text
              style={{
                marginTop: 10,
                fontSize: 15,
                lineHeight: 21,
                letterSpacing: 0.18,
                color: '#E70013',
              }}
            >
              {item.castBalance}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    )
  }

  collapsibleData(item, index) {
    return (
      <TouchableOpacity
        onPress={() => {
          switch (this.state.filiter) {
            case 'Receivable':
              this.state.receivableOrganId = item.finanOrgId
              this.setState({
                receivableOrgan: item.finanOrgName,
                receivableOrganId: item.finanOrgId,
                activeSection: true,
                receiveIndex: index,
              })
              break
            case 'Sale':
              this.state.saleOrganId = item.saleOrganizationId
              this.setState({
                saleOrgan: item.saleOrganizationName,
                saleOrganId: item.saleOrganizationId,
                activeSection: true,
                saleIndex: index,
              })
              break
            case 'State':
              this.state.stateSelectCode = item.code
              this.setState({
                stateSelect: item.name,
                // stateSelectCode: item.id,
                activeSection: true,
                stateIndex: index,
              })
              break
            case 'Offset':
              this.state.offsetSelectCode = item.code
              this.setState({
                offsetSelect: item.name,
                // offsetSelectCode: item.id,
                activeSection: true,
                offsetIndex: index,
              })
              break
          }
          this.props.dispatch(
            createAction('mine_header/CastSaga')({
              castData: [],
              pageInfo: { page: 0, size: this.size },
              searchInfo: this.searchInfo(),
            })
          )
          this.page = 0
        }}
        style={{
          flexDirection: 'row',
          padding: 10,
          justifyContent: 'space-between',
        }}
      >
        <Text style={{ fontSize: 13, lineHeight: 18, color: '#333' }}>
          {item.saleOrganizationName || item.finanOrgName || item.name}
        </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}
        {this.state.filiter == 'State' && this.state.stateIndex == index ? (
          <Icon name="icon-icon-duigou" size={16} color={'red'} />
        ) : null}
        {this.state.filiter == 'Offset' && this.state.offsetIndex == index ? (
          <Icon name="icon-icon-duigou" size={16} color={'red'} />
        ) : null}
      </TouchableOpacity>
    )
  }

  HeadScreening(from, data) {
    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: data, showSearch: false })
        break
      case 'Sale':
        this.state.filiter = 'Sale'
        this.setState({ data: data, showSearch: false })
        break
      case 'State':
        this.state.filiter = 'State'
        this.setState({ data: data, showSearch: false })
        break
      case 'Offset':
        this.state.filiter = 'Offset'
        this.setState({ data: data, showSearch: false })
        break
    }
  }

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

  // 底部
  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,
      castData,
      totalPages,
      FinancialOrg,
      SaleOrg,
      Balance,
      OffsetMod,
      StateMod,
      SupplierInfo,
    } = 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,
            paddingLeft: 5,
            flexDirection: 'row',
            borderBottomColor: '#EEE',
            borderBottomWidth: 1,
          }}
        >
          <TouchableOpacity
            onPress={() => this.HeadScreening('Receivable', FinancialOrg)}
            style={{
              flex: 1,
              justifyContent: 'center',
              flexDirection: 'row',
              borderRightColor: '#EEE',
              borderRightWidth: 1,
              paddingHorizontal: 10,
            }}
          >
            <Text
              numberOfLines={1}
              style={{
                fontSize: 13,
                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' }}
            />
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => this.HeadScreening('Sale', SupplierInfo)}
            style={{
              flex: 1,
              justifyContent: 'center',
              flexDirection: 'row',
              borderRightColor: '#EEE',
              borderRightWidth: 1,
              paddingHorizontal: 10,
            }}
          >
            <Text
              numberOfLines={1}
              style={{
                fontSize: 13,
                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' }}
            />
          </TouchableOpacity>

          <TouchableOpacity
            style={{
              flex: 1,
              justifyContent: 'center',
              flexDirection: 'row',
              borderRightColor: '#EEE',
              borderRightWidth: 1,
              paddingHorizontal: 10,
            }}
            onPress={() => this.HeadScreening('State', StateMod)}
          >
            <Text
              numberOfLines={1}
              style={{
                fontSize: 13,
                lineHeight: 20,
                letterSpacing: 0.17,
                color:
                  this.state.filiter == 'State'
                    ? this.state.activeSection ? '#333' : '#E70013'
                    : '#333',
                marginRight: 5,
              }}
            >
              {this.state.stateSelect}
            </Text>
            <Icon
              name="icon-icon-xialaxiaosanjiao"
              size={14}
              color={
                this.state.filiter == 'State'
                  ? this.state.activeSection ? '#999' : '#E70013'
                  : '#999'
              }
              style={{ alignSelf: 'center' }}
            />
          </TouchableOpacity>

          <TouchableOpacity
            style={{
              flex: 1,
              justifyContent: 'center',
              flexDirection: 'row',
              paddingLeft: 10,
              paddingRight: 7,
            }}
            onPress={() => this.HeadScreening('Offset', OffsetMod)}
          >
            <Text
              numberOfLines={1}
              style={{
                fontSize: 13,
                lineHeight: 20,
                letterSpacing: 0.17,
                color:
                  this.state.filiter == 'Offset'
                    ? this.state.activeSection ? '#333' : '#E70013'
                    : '#333',
                marginRight: 5,
              }}
            >
              {this.state.offsetSelect}
            </Text>
            <Icon
              name="icon-icon-xialaxiaosanjiao"
              size={14}
              color={
                this.state.filiter == 'SOffset'
                  ? this.state.activeSection ? '#999' : '#E70013'
                  : '#999'
              }
              style={{ alignSelf: 'center' }}
            />
          </TouchableOpacity>
        </View>

        {/* 票扣及货补余额 */}
        <View
          style={{
            height: 80,
            flexDirection: 'row',
            backgroundColor: '#FF7D64',
            marginBottom: 3,
          }}
        >
          <View
            style={{
              flex: 1,
              paddingLeft: 10,
              justifyContent: 'center',
            }}
          >
            <Text
              style={{
                fontSize: 13,
                lineHeight: 18,
                letterSpacing: 0.16,
                color: '#FFF',
              }}
            >
              票扣余额
            </Text>
            <Text
              style={{
                fontSize: 18,
                lineHeight: 25,
                letterSpacing: 0.22,
                color: '#FFF',
              }}
            >
              {Balance['票扣余额']}
            </Text>
          </View>
          <View
            style={{
              flex: 1,
              justifyContent: 'center',
            }}
          >
            <Text
              style={{
                fontSize: 13,
                lineHeight: 18,
                letterSpacing: 0.16,
                color: '#FFF',
              }}
            >
              货补余额
            </Text>
            <Text
              style={{
                fontSize: 18,
                lineHeight: 25,
                letterSpacing: 0.22,
                color: '#FFF',
              }}
            >
              {Balance['货补余额']}
            </Text>
          </View>
        </View>

        {/* 列表 */}
        <FlatList
          keyExtractor={(item, index) => item.id + index}
          data={castData}
          renderItem={({ item, index }) => this.costList(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.dispatch(
              createAction('mine_header/CastSaga')({
                castData: castData,
                pageInfo: { page: this.page, size: this.size },
                searchInfo: this.searchInfo(),
                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.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) => item.id + index}
              data={this.state.data}
              extraData={this.state}
              renderItem={({ item, index }) =>
                this.collapsibleData(item, index)
              }
            />
          </Collapsible>
        </View>

        {/* 时间弹窗 */}
        <SelectTime
          ref={showTime => (this.showTime = showTime)}
          cb={(date, mark) => {
            let newDate = moment(date).format('YYYY-MM-DD')

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

        {/* 时间选择下拉 */}
        <View
          style={{
            position: 'absolute',
            top: 60,
            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.setState({ dateActive: true })
                    this.startTime = this.state.startTime
                    this.endTime = this.state.endTime
                    this.props.dispatch(
                      createAction('mine_header/CastSaga')({
                        castData: [],
                        pageInfo: { page: 0, size: this.size },
                        searchInfo: this.searchInfo(),
                      })
                    )
                    this.page = 0
                  }}
                  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>
      </View>
    )
  }
}

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

export default Cost