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

import Icon from '../../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../../utils'

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

  // 头部
  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>
      </View>
    )
  }

  viewList(header, content) {
    return (
      <View
        style={{
          flexDirection: 'row',
          paddingVertical: 10,
          borderTopColor: '#EEE',
          borderTopWidth: 1 / PixelRatio.get(),
        }}
      >
        <Text
          style={{
            fontSize: 14,
            lineHeight: 20,
            letterSpacing: 0.17,
            color: '#999',
          }}
        >
          {header}
        </Text>
        <Text
          style={{
            flex: 1,
            fontSize: 14,
            lineHeight: 20,
            letterSpacing: 0.17,
            color: '#333',
            marginLeft: 20,
          }}
        >
          {content}
        </Text>
      </View>
    )
  }

  basicList(item) {
    return (
      <View>
        <View style={{ backgroundColor: '#FFF', paddingHorizontal: 10 }}>
          {/* 客户编号 */}
          {this.viewList('客户编码', item.code)}
          {/* 客户名称 */}
          {this.viewList('客户名称', item.name)}
          {/* 客户分类 */}
          {this.viewList('客户分类', item.customerCategoryName)}
          {/* 渠道类型 */}
          {this.viewList('渠道类型', item.channelTypeName)}
          {/* 法人代表 */}
          {this.viewList('法人代表', item.legalPerson)}
          {/* 税务登记 */}
          {this.viewList('税务登记', item.taxRegNo)}
          {/* 客户地区 */}
          {this.viewList(
            '客户地区',
            (item.countryName || '') +
              (item.provinceName || '') +
              (item.cityName || '') +
              (item.countyName || '') +
              (item.townName || '') +
              (item.detailAddr || '')
          )}
        </View>
      </View>
    )
  }

  render() {
    const { appTheme, BasicInfo, BankInfo } = 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()}
        <ScrollView style={{ flex: 1 }}>
          {this.basicList(BasicInfo, BankInfo)}
          <FlatList
            extraData={this.state}
            keyExtractor={item => item.id}
            data={BankInfo}
            renderItem={({ item }) => (
              <View
                style={{
                  marginTop: 10,
                  backgroundColor: '#FFF',
                  paddingHorizontal: 10,
                }}
              >
                {/* 开户银行 */}
                {this.viewList('开  户  行', item.depositBankName)}
                {/* 银行账户 */}
                {this.viewList('银行账户', item.accountNumber)}
                {/* 户名 */}
                {this.viewList('户       名', item.accountName)}
              </View>
            )}
          />
        </ScrollView>
      </View>
    )
  }
}

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

export default BasicInfo