import React, { Component } from 'react'
import {
  StyleSheet,
  ScrollView,
  View,
  Image,
  ImageBackground,
  Text,
  Dimensions,
  StatusBar,
  TouchableOpacity,
  PixelRatio,
  FlatList,
} from 'react-native'
import { connect } from 'react-redux'

import { Button } from '../../../components'
import Icon from '../../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../../utils'
import { ReturnDate } from '../../../utils/utils'
import { HeaderView } from '../../common/HeaderView'
const { width, height } = Dimensions.get('window')

@connect(({ theme, mine_header }) => ({ ...theme, ...mine_header }))
class CostDetail extends Component {
  constructor(props) {
    super(props)
    this.state = {}
    // console.disableYellowBox = true;
  }

  ViewList(itemLeft, itemRight) {
    return (
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          paddingVertical: 10,
        }}
      >
        <Text
          style={{
            fontSize: 14,
            lineHeight: 20,
            letterSpacing: 0.17,
            color: '#999',
          }}
        >
          {itemLeft}
        </Text>
        <Text
          style={{
            fontSize: 14,
            lineHeight: 20,
            letterSpacing: 0.17,
            color: '#333',
          }}
        >
          {itemRight}
        </Text>
      </View>
    )
  }

  jobIdList(item) {
    return (
      <View style={{ flexDirection: 'row', marginTop: 5 }}>
        <Text
          style={{
            flex: 3,
            fontSize: 13,
            lineHeight: 18,
            color: '#666',
            marginRight: 10,
          }}
          numberOfLines={1}
        >
          {item.customerOrderId}
        </Text>
        <Text style={{ flex: 2, fontSize: 13, lineHeight: 18, color: '#666' }}>
          {ReturnDate(item.billDate, true)}
        </Text>
        <Text
          style={{
            flex: 2,
            fontSize: 13,
            lineHeight: 18,
            color: '#666',
            textAlign: 'right',
          }}
        >
          {item.flushAmount}
        </Text>
      </View>
    )
  }

  render() {
    const { appTheme, castDetail } = this.props,
      { castData } = this.props.navigation.state.params
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />
        {HeaderView(this.props.dispatch, '费用余额')}
        <View style={{ backgroundColor: '#FFF', paddingHorizontal: 10 }}>
          {this.ViewList('单据号', castData.billCode)}
          {this.ViewList('单据状态', castData.billStatusName)}
          {this.ViewList('冲抵方式', castData.castTypeName)}
          {this.ViewList('销售组织', castData.saleOrgName)}
          {/* {this.ViewList("按销售组织冲抵", "是")} */}
          {/* {this.ViewList("产品线", "A产品线")} */}
          <View style={{ paddingVertical: 10, flexDirection: 'row' }}>
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                letterSpacing: 0.17,
                color: '#999',
                marginRight: 20,
              }}
            >
              备注
            </Text>
            <Text
              style={{
                flex: 1,
                fontSize: 14,
                lineHeight: 20,
                letterSpacing: 0.17,
                color: '#333',
              }}
            >
              {castData.remark}
            </Text>
          </View>
        </View>

        <View
          style={{
            marginTop: 10,
            backgroundColor: '#FFF',
            padding: 10,
          }}
        >
          <View style={{ flexDirection: 'row' }}>
            <Text
              style={{ flex: 3, fontSize: 13, lineHeight: 18, color: '#666' }}
            >
              订货单编码
            </Text>
            <Text
              style={{
                flex: 2,
                fontSize: 13,
                lineHeight: 18,
                color: '#666',
                marginLeft: 10,
              }}
            >
              订单日期
            </Text>
            <Text
              style={{
                flex: 2,
                fontSize: 13,
                lineHeight: 18,
                color: '#666',
                textAlign: 'right',
              }}
            >
              冲抵金额
            </Text>
          </View>
          <FlatList
            keyExtractor={(item, index) => index}
            data={castDetail}
            renderItem={({ item, index }) => this.jobIdList(item, index)}
            // legacyImplementation={true}
          />
        </View>
      </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 CostDetail