addEnterprise

import React from 'react';
import {
  View,
  StyleSheet,
  TextInput,
  Text,
  TouchableOpacity
} from 'react-native';
import PropTypes from 'prop-types';
import {
  Cell,
  CommonButton,
  Toast,
  LoginChecked,
  LoginUnChecked
} from '../../../components';
import GlobalStyles from '../../../assets/globalStyles';
import { ColorCommon, GapCommon } from '../../../assets/publicConsts';

// 添加企业
export default class AddEnterprise extends React.Component {
  static propTypes = {
    navigation: PropTypes.object.isRequired,
    // dispatch: PropTypes.func.isRequired,
  };

  state = {
    disableButton: true, // 按钮禁用
    phoneValue: '', // 手机号
    protocolChecked: false, // 勾选协议
    codeValue: '', // 统一社会信用代码
    companyName: '' // 公司名称
  }

  // 监听手机号
  handlePhoneInputChange = (phoneValue) => {
    const { protocolChecked, codeValue, companyName } = this.state;
    if (protocolChecked
      && companyName
      && companyName.length > 0
      && codeValue
      && codeValue.length === 18
      && phoneValue
      && phoneValue.length === 11
    ) {
      this.setState({ disableButton: false });
    } else {
      this.setState({ disableButton: true });
    }
    this.setState({ phoneValue });
  }

  // 监听统一社会代码
  handleCodeInputChange = (codeValue) => {
    const { protocolChecked, phoneValue, companyName } = this.state;
    if (protocolChecked
      && companyName
      && companyName.length > 0
      && codeValue
      && codeValue.length === 18
      && phoneValue
      && phoneValue.length === 11) {
      this.setState({ disableButton: false });
    } else {
      this.setState({ disableButton: true });
    }
    this.setState({ codeValue });
  }

  // 监听公司名称
  handleCompanyInputChange = (companyName) => {
    const { protocolChecked, phoneValue, codeValue } = this.state;
    if (protocolChecked
      && companyName
      && companyName.length > 0
      && codeValue
      && codeValue.length === 18
      && phoneValue
      && phoneValue.length === 11) {
      this.setState({ disableButton: false });
    } else {
      this.setState({ disableButton: true });
    }
    this.setState({ companyName });
  }

  // 确定信息
  handleSubmit = async () => {
    const { navigation } = this.props;
    const { phoneValue, codeValue } = this.state;
    if (!(/^1[3456789]\d{9}$/.test(phoneValue))) {
      Toast.show('请输入正确的手机号码！');
      return;
    }
    if (!(/^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g.test(codeValue))) {
      Toast.show('请输入正确的手机号码！');
      return;
    }
    navigation.navigate('Home');
  }

  // 勾选
  handleChecked = () => {
    const { protocolChecked } = this.state;
    this.setState({ protocolChecked: !protocolChecked });
    this.setState({ disableButton: true });
  }

  // 未勾选
  handleUnChecked = () => {
    const {
      protocolChecked, phoneValue, codeValue, companyName
    } = this.state;
    this.setState({ protocolChecked: !protocolChecked });
    if (phoneValue
      && phoneValue.length === 11
      && companyName
      && companyName.length > 0
      && codeValue
      && codeValue.length === 18) {
      this.setState({ disableButton: false });
    }
  }

  render() {
    const { disableButton, protocolChecked } = this.state;
    return (
      <View style={GlobalStyles.container}>
        <View style={styles.headerStyle}>
          {/* {`请绑定法定代表人${certName.replace(certName.substr(0, certName.length - 1), '**')}的企业`} */}
          <Text style={styles.headerTextStyle}>请绑定法定代表人张小经的企业</Text>
        </View>
        <View>
          <Cell label="企业名称">
            <TextInput
              placeholder="请输入企业名称"
              style={{ fontSize: 16 }}
              onChangeText={this.handleCompanyInputChange}
            />
          </Cell>
          <Cell label="统一社会信用代码">
            <TextInput
              placeholder="请输入企业信用代码"
              maxLength={18}
              style={{ fontSize: 16 }}
              onChangeText={this.handleCodeInputChange}
            />
          </Cell>
          <Cell label="手机号">
            <TextInput
              placeholder="请输入法人代表手机号"
              maxLength={11}
              keyboardType="numeric"
              style={{ fontSize: 16 }}
              onChangeText={this.handlePhoneInputChange}
            />
          </Cell>
        </View>
        <View style={[styles.protocolWrap, { flexDirection: 'row' }]}>
          {
            protocolChecked
              ? (
                <TouchableOpacity
                  onPress={this.handleChecked}
                >
                  <LoginChecked width={17} height={17} />
                </TouchableOpacity>
              )
              : (
                <TouchableOpacity
                  onPress={this.handleUnChecked}
                >
                  <LoginUnChecked width={17} height={17} />
                </TouchableOpacity>
              )
          }
          <View style={styles.protocolTextWrap}>
            <Text style={[styles.agreeText, { lineHeight: 18 }]}>我已阅读并同意</Text>
            <TouchableOpacity>
              <Text style={[styles.protocolText, { lineHeight: 18 }]}>《电子平台签约服务协议》</Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={styles.addButton}>
          <CommonButton
            text="确定"
            disable={disableButton}
            onPressButton={this.handleSubmit}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  addButton: {
    flex: 1,
    justifyContent: 'flex-end',
    marginBottom: 4 * GapCommon.gapBase,
    paddingLeft: 4 * GapCommon.gapBase,
    paddingRight: 4 * GapCommon.gapBase
  },
  headerStyle: {
    paddingLeft: 4 * GapCommon.gapBase,
    paddingTop: 3 * GapCommon.gapBase,
    paddingBottom: 3 * GapCommon.gapBase,
  },
  headerTextStyle: {
    fontSize: 14,
    color: ColorCommon.dark
  },
  protocolWrap: {
    marginTop: 6 * GapCommon.gapBase,
    paddingLeft: 4 * GapCommon.gapBase,
    paddingRight: 4 * GapCommon.gapBase
  },
  protocolTextWrap: {
    marginLeft: 2 * GapCommon.gapBase,
    flexWrap: 'wrap',
    flexDirection: 'row'
  },
  protocolText: {
    fontSize: 12,
    color: '#4269BA'
  },
  agreeText: {
    fontSize: 12,
    color: ColorCommon.dark
  }
});