enterpriseManagement

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity
} from 'react-native';
import PropTypes from 'prop-types';
import {
  CommonButton,
  LoginChecked,
  LoginUnChecked
} from '../../../components';
import GlobalStyles from '../../../assets/globalStyles';
import { ColorCommon, GapCommon } from '../../../assets/publicConsts';
import { RNLog, Px2Dp } from '../../../utils/Tool';


const list = [
  {
    name: '张小经',
    idNumber: '222222222222222222',
    creditCode: '333333333333333',
    phone: '11111111111',
    company: '平安国际融资租赁有限公司',
    authenticationStatus: 1,
    // checked: false
  },
  {
    name: '张小经',
    idNumber: '222222222222222222',
    creditCode: '333333333333333',
    phone: '11111111111',
    company: '平安国际融资租赁有限公司',
    authenticationStatus: 2,
    // checked: false
  },
  {
    name: '张小经',
    idNumber: '222222222222222222',
    creditCode: '333333333333333',
    phone: '11111111111',
    company: '平安国际融资租赁有限公司',
    authenticationStatus: 2,
    // checked: false
  },
  {
    name: '张小经',
    idNumber: '222222222222222222',
    creditCode: '333333333333333',
    phone: '11111111111',
    company: '平安国际融资租赁有限公司',
    authenticationStatus: 3,
    // checked: false
  },
];

// 企业管理页
export default class EnterpriseManagement extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    headerRight: navigation.getParam('editChecked')
      ? (
        <TouchableOpacity onPress={navigation.getParam('handleEditChecked')}>
          <Text style={{ paddingRight: 16, fontSize: 14, color: ColorCommon.fontGray }}>完成</Text>
        </TouchableOpacity>
      )
      : (
        <TouchableOpacity onPress={navigation.getParam('handleCompleteChecked')}>
          <Text style={{ paddingRight: 16, fontSize: 14, color: ColorCommon.fontGray }}>管理</Text>
        </TouchableOpacity>
      )
  });

  static propTypes = {
    navigation: PropTypes.object.isRequired,
    // dispatch: PropTypes.func.isRequired,
  };

  state={
    disableButton: true, // 按钮置灰
    originList: list,
  }

  componentDidMount() {
    const { navigation } = this.props;
    navigation.setParams({
      handleEditChecked: this.handleEditChecked,
      handleCompleteChecked: this.handleCompleteChecked
    });
  }

  componentWillUnmount() {
    const { originList } = this.state;
    if (originList && originList.length > 0) {
      originList.forEach((item) => {
        item.checked = false;
      });
    }
  }

  // 完成
  handleEditChecked = () => {
    const { navigation } = this.props;
    // const { editChecked } = this.state;
    navigation.setParams({
      editChecked: false,
    });
  }

  // 管理
  handleCompleteChecked = () => {
    const { navigation } = this.props;
    // const { editChecked } = this.state;
    navigation.setParams({
      editChecked: true,
    });
  }

  // 勾选
  handleChecked = (index, ifChecked) => {
    RNLog(index);
    const { originList } = this.state;
    if (originList && originList.length > 0) {
      originList.forEach((item, idx) => {
        item.checked = false;
        if (idx === index) {
          item.checked = ifChecked;
        }
      });
    }
    this.setState({ originList, disableButton: false });
  }

  render() {
    const { navigation } = this.props;
    const { originList, disableButton } = this.state;
    const authentication = { 1: '已认证', 2: '认证中', 3: '认证失败' };
    return (
      <View style={[GlobalStyles.container, styles.container]}>
        <ScrollView style={[styles.sideMargin, { marginTop: 2 * GapCommon.gapBase }]}>
          {
            originList && originList.length > 0 && originList.map((item, index) => (
              <View style={navigation.getParam('editChecked') ? styles.editCard : styles.card}>
                {
                   navigation.getParam('editChecked') && (
                     <View style={{ paddingTop: 5 * GapCommon.gapBase, marginRight: 3 * GapCommon.gapBase }}>
                       {
                         item.checked
                           ? (
                             <TouchableOpacity
                               onPress={() => this.handleChecked(index, true)}
                             >
                               <LoginChecked width={17} height={17} />
                             </TouchableOpacity>
                           )
                           : (
                             <TouchableOpacity
                               onPress={() => this.handleChecked(index, true)}
                             >
                               <LoginUnChecked width={17} height={17} />
                             </TouchableOpacity>
                           )
                       }
                     </View>
                   )
                }
                <View style={{ flex: 1 }}>
                  <View style={styles.corporateName}>
                    <Text style={styles.corporateNameStyle}>{item.company}</Text>
                    <Text style={styles.authenticationStyle}>
                      {authentication[item.authenticationStatus]}
                    </Text>
                  </View>
                  <View style={styles.companyInfo}>
                    <Text style={[styles.companyInfoStyle,
                      { marginBottom: 3 * GapCommon.gapBase }]}
                    >
                      法人代表：
                      {item.name}
                    </Text>
                    <Text style={[styles.companyInfoStyle,
                      { marginBottom: 3 * GapCommon.gapBase }]}
                    >
                      法人身份证号：
                      {item.idNumber}
                    </Text>
                    <Text style={[styles.companyInfoStyle,
                      { marginBottom: 3 * GapCommon.gapBase }]}
                    >
                      统一社会信用代码：
                      {item.creditCode}
                    </Text>
                    <Text style={styles.companyInfoStyle}>
                    手机号码：
                      {item.phone}
                    </Text>
                  </View>
                  {item.authenticationStatus === 3 && (
                  <Text style={styles.againAuthentication}>重新认证&gt;</Text>
                  )}
                </View>
              </View>
            ))
          }
        </ScrollView>
        <View>
          {
            navigation.getParam('editChecked') ? (
              <View style={styles.buttonWrap}>
                <CommonButton
                  text="删除"
                  defaultStyle={[styles.deleteButton, styles.HighlightDeleteButton]}
                  textStyle={disableButton === false && styles.text}
                  disable={disableButton}
                  disabledStyle={[styles.deleteButton, { backgroundColor: ColorCommon.disableButton }]}
                />
                <CommonButton
                  text="修改手机号"
                  defaultStyle={[styles.changePhoneButton, { backgroundColor: ColorCommon.primary }]}
                  disabledStyle={[styles.changePhoneButton, { backgroundColor: ColorCommon.disableButton }]}
                  disable={disableButton}
                />
              </View>
            ) : (
              <View style={[styles.sideMargin, { marginBottom: 4 * GapCommon.gapBase, marginTop: 4 * GapCommon.gapBase }]}>
                <CommonButton
                  text="+添加企业"
                />
              </View>
            )
          }
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'space-between'
  },
  card: {
    backgroundColor: ColorCommon.white,
    paddingLeft: 4 * GapCommon.gapBase,
    paddingRight: 4 * GapCommon.gapBase,
    marginTop: 2 * GapCommon.gapBase,
    borderRadius: 4,
    // shadowColor: '#000000',
    shadowOffset: { h: 10, w: 10 },
    shadowRadius: 3,
    shadowOpacity: 0.1,
  },
  editCard: {
    flexDirection: 'row',
    backgroundColor: ColorCommon.white,
    paddingLeft: 3 * GapCommon.gapBase,
    paddingRight: 4 * GapCommon.gapBase,
    marginTop: 2 * GapCommon.gapBase,
    borderRadius: 4,
    // shadowColor: '#000000',
    shadowOffset: { h: 10, w: 10 },
    shadowRadius: 3,
    shadowOpacity: 0.1,
  },
  corporateName: {
    paddingBottom: 4 * GapCommon.gapBase,
    paddingTop: 5 * GapCommon.gapBase,
    flexDirection: 'row',
    justifyContent: 'space-between',
    borderBottomWidth: 0.5,
    borderColor: ColorCommon.lineColor
  },
  corporateNameStyle: {
    fontSize: 16,
    fontWeight: '700',
    color: ColorCommon.dark
  },
  sideMargin: {
    paddingLeft: 4 * GapCommon.gapBase,
    paddingRight: 4 * GapCommon.gapBase
  },
  authenticationStyle: {
    fontSize: 16,
    color: ColorCommon.fontGreen
  },
  companyInfo: {
    paddingTop: 4 * GapCommon.gapBase,
    paddingBottom: 4 * GapCommon.gapBase
  },
  companyInfoStyle: {
    fontSize: 15,
    color: ColorCommon.dark
  },
  againAuthentication: {
    fontSize: 16,
    color: ColorCommon.dark,
    textAlign: 'right',
    marginBottom: 4 * GapCommon.gapBase
  },
  buttonWrap: {
    flexDirection: 'row',
    paddingLeft: GapCommon.gapBase * 4,
    paddingRight: GapCommon.gapBase * 4,
    justifyContent: 'space-between',
    marginBottom: GapCommon.gapBase * 4,
    marginTop: GapCommon.gapBase * 4,
  },
  deleteButton: {
    width: Px2Dp(165),
    height: 44,
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 16,
    color: ColorCommon.primary
  },
  changePhoneButton: {
    width: Px2Dp(165),
    height: 44,
    // backgroundColor: ColorCommon.primary,
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center'
  },
  HighlightDeleteButton: {
    backgroundColor: ColorCommon.white,
    borderWidth: 0.5,
    borderColor: ColorCommon.primary
  }
});