TaxControlApp/page/invoice/invoice.js

import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
  FlatList,
  PixelRatio,
  DeviceEventEmitter,
  Image,
  TextInput,
  SafeAreaView,
  ScrollView,
  Alert,
  TouchableWithoutFeedback,
} from 'react-native';

import {
  List,
  SwipeAction,
  Radio,
  Picker,
  Provider,
  InputItem,
  WhiteSpace,
  WingBlank,
  Tag,
} from '@ant-design/react-native';
import public_css from '../../source/css/public_css';
import {NumberTwoDecimal, RoundingData} from '../../source/inspect/inspect';

import invoice_css from './invoice_css';
import {SvgXml} from 'react-native-svg';
import {ToastShow} from '../../components/toast/toast';
import {
  downArrowIcon,
  plusIcon,
  enterpriseIcon,
  upArrowIcon,
} from '../../source/icon/icon';
import {RetrieveData} from '../../data/storage';
import {RequestNetwork} from '../../data/encryption';
import {CleanAll} from '../../components/abnormalMessage/abnormal_message';

export default class invoice extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      listData: [],
      productNumberTotal: 0,
      amountTotal: 0.0,
      taxAmount: 0.0,
      taxRateTotal: 0.0,
      productAmountTotal: 0.0,
      companyTypes: [
        {
          label: '个人',
          value: '1',
        },
        {
          label: '企业',
          value: '2',
        },
      ],
      companyType: '1',
      invoiceTypes: [
        {
          label: '增值税普通电子发票',
          value: '1',
        },
        {
          label: '增值税电子专用发票',
          value: '2',
        },
      ],
      invoiceType: '1',
      customerName: '',
      taxNumber: '',
      contactNumber: '',
      address: '',
      bank: '',
      bankAccount: '',
      payee: '',
      reviewer: '',
      drawer: '',
      remark: '',
      hideStatusText: '更多',
      hideStatus: false,
      categoryBack: 'rgba(42,103,254, 1)',
      categoryBackFont: '#ffffff',
      categoryBackCompany: 'rgba(42,103,254, 0.07)',
      categoryBackCompanyFont: '#2A67FE',
      typeBack: 'rgba(42,103,254, 1)',
      typeBackFont: '#ffffff',
      typeBackMajor: 'rgba(42,103,254, 0.07)',
      typeBackMajorFont: '#2A67FE',
      receiveType: 1,
      receiveAddress: '',
      receiveBack: 'rgba(42,103,254, 1)',
      receiveBackFont: '#ffffff',
      receiveBackCompany: 'rgba(42,103,254, 0.07)',
      receiveBackCompanyFont: '#2A67FE',
      isShowSearch: false,
      headList: [],
      timer: '',
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <ScrollView>
          <TouchableWithoutFeedback
            onPress={() => {
              this.isHideHead();
            }}>
            <View>
              <View style={{flexDirection: 'row', justifyContent: 'flex-start'}}>
                <View>
                  <TouchableOpacity
                    onPress={() => {
                      this.getInvoiceCategory('1');
                    }}
                    style={{
                      alignItems: 'center',
                      justifyContent: 'center',
                      backgroundColor: this.state.categoryBack,
                      width: 90,
                      height: 40,
                      borderRadius: 39,
                      margin: 10,
                    }}>
                    <Text
                      style={{
                        color: this.state.categoryBackFont,
                        fontWeight: 'bold',
                        fontSize: 16,
                      }}>
                      个人
                    </Text>
                  </TouchableOpacity>
                </View>
                <View>
                  <TouchableOpacity
                    onPress={() => {
                      this.getInvoiceCategory('2');
                    }}
                    style={{
                      alignItems: 'center',
                      justifyContent: 'center',
                      backgroundColor: this.state.categoryBackCompany,
                      width: 90,
                      height: 40,
                      borderRadius: 39,
                      margin: 10,
                    }}>
                    <Text
                      style={{
                        color: this.state.categoryBackCompanyFont,
                        fontWeight: 'bold',
                        fontSize: 16,
                      }}>
                      企业
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
              <View
                style={{
                  backgroundColor: '#F7F7F7',
                  height: 40,
                  justifyContent: 'center',
                  marginLeft: 10,
                }}>
                <Text style={{color: '#888888', fontSize: 18}}>发票类型</Text>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View>
                  <TouchableOpacity
                    onPress={() => {
                      this.getInvoiceType('1');
                    }}
                    style={{
                      alignItems: 'center',
                      justifyContent: 'center',
                      backgroundColor: this.state.typeBack,
                      width: 160,
                      height: 40,
                      borderRadius: 39,
                      margin: 10,
                    }}>
                    <Text
                      style={{
                        color: this.state.typeBackFont,
                        fontWeight: 'bold',
                        fontSize: 16,
                      }}>
                      增值税电子普通发票
                    </Text>
                  </TouchableOpacity>
                </View>
                <View>
                  <TouchableOpacity
                    onPress={() => {
                      this.getInvoiceType('2');
                    }}
                    style={{
                      alignItems: 'center',
                      justifyContent: 'center',
                      backgroundColor: this.state.typeBackMajor,
                      width: 160,
                      height: 40,
                      borderRadius: 39,
                      margin: 10,
                    }}>
                    <Text
                      style={{
                        color: this.state.typeBackMajorFont,
                        fontWeight: 'bold',
                        fontSize: 16,
                      }}>
                      增值税电子专用发票
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
              <View
                style={{
                  backgroundColor: '#F7F7F7',
                  height: 40,
                  justifyContent: 'center',
                  marginLeft: 10,
                }}>
                <Text style={{color: '#888888', fontSize: 18}}>发票信息</Text>
              </View>
              <List>
                <WingBlank>
                  <View style={[public_css.view, {position: 'relative'}]}>
                    <View style={[public_css.view, {flex: 1}]}>
                      <View style={{flexDirection: 'row', alignItems: 'center'}}>
                        <Text style={{color: 'red', marginRight: 5}}>*</Text>
                        <Text style={{fontSize: 16}}>企业名称：</Text>
                      </View>
                      <TextInput
                        style={public_css.textInputStyle}
                        placeholder="请输入客户名称"
                        clearButtonMode="while-editing"
                        secureTextEntry={false}
                        onChangeText={(text) => {
                          if (text) {
                            this.setState({
                              customerName: text,
                            });
                          } else {
                            this.setState({
                              customerName: text,
                              isShowSearch: false,
                            });
                          }
                          this.setSearchCustomerName(text);
                        }}
                        value={this.state.customerName}
                        // onBlur={() => {
                        //   this.setSearchCustomerName('');
                        // }}
                        // blurOnSubmit={true}
                      />
                    </View>
                    <View style={{}}>
                      <TouchableOpacity
                        onPress={() =>
                          this.props.navigation.navigate(
                            'invoice_select_customer',
                            {
                              customer: this,
                              selectCustomer: (data) => {
                                this.selectCustomer(data);
                              },
                            },
                          )
                        }
                        style={{width: 30, alignItems: 'center'}}>
                        <Text style={public_css.arrow}>{'>'}</Text>
                      </TouchableOpacity>
                    </View>
                  </View>
                  {this.state.isShowSearch === true ? (
                    <View
                      style={{
                        height: 500,
                        // width: Dimensions.get('window').width * 0.7,
                        // top: 50,
                        // left: 90,
                        // elevation: 20,
                        // shadowOffset: {width: 0, height: 0},
                        // shadowColor: '#99b4b4b4',
                        // shadowOpacity: 1,
                        // shadowRadius: 5,
                        // flex: 1,
                      }}>
                      <View style={{flex: 1}}>
                        {this.state.headList.map((item, index) => {
                          if (index < 10) {
                            return (
                              <TouchableOpacity
                                onPress={() => {
                                  this.getHeadInfo(item);
                                }}
                                style={{
                                  height: 30,
                                  margin: 10,
                                  justifyContent: 'center',
                                }}>
                                <Text
                                  style={{
                                    fontSize: 15,
                                    color: '#000000',
                                  }}>
                                  {item.customerName}
                                </Text>
                                <Text style={{color: 'rgba(74, 74, 74, 0.6)'}}>{item.entTaxId}</Text>
                              </TouchableOpacity>
                            );
                          }
                        })}
                      </View>
                    </View>
                  ) : (
                    <View />
                  )}
                </WingBlank>
                {this.state.isShowSearch === false ? (
                  <View>
                    {this.state.companyType === '2' ? (
                      <WingBlank>
                        <View style={[public_css.view, public_css.lineTopBottom]}>
                          <View
                            style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{color: 'red', marginRight: 5}}>*</Text>
                            <Text style={{fontSize: 16}}>企业税号：</Text>
                          </View>
                          <TextInput
                            style={public_css.textInputStyle}
                            placeholder="请输入客户企业税号"
                            clearButtonMode="while-editing"
                            secureTextEntry={false}
                            onChangeText={(text) => {
                              this.setState({
                                taxNumber: text,
                              });
                            }}
                            value={this.state.taxNumber}
                          />
                        </View>
                      </WingBlank>
                    ) : (
                      <WingBlank>
                        <View style={[public_css.view, public_css.lineTopBottom]}>
                          <View
                            style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{color: 'red', marginRight: 10}} />
                            <Text style={{fontSize: 16}}>企业税号：</Text>
                          </View>
                          <TextInput
                            style={public_css.textInputStyle}
                            placeholder="请输入客户企业税号"
                            clearButtonMode="while-editing"
                            secureTextEntry={false}
                            onChangeText={(text) => {
                              this.setState({
                                taxNumber: text,
                              });
                            }}
                            value={this.state.taxNumber}
                          />
                        </View>
                      </WingBlank>
                    )}
                    <WingBlank>
                      {this.state.hideStatus === true ? (
                        <View style={[public_css.view, public_css.lineTopBottom]}>
                          <View
                            style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{fontSize: 16}}>地址：</Text>
                          </View>
                          <TextInput
                            style={public_css.textInputStyle}
                            placeholder="请输入地址"
                            clearButtonMode="while-editing"
                            secureTextEntry={false}
                            onChangeText={(text) => {
                              this.setState({
                                address: text,
                              });
                            }}
                            value={this.state.address}
                          />
                        </View>
                      ) : (
                        <View />
                      )}
                    </WingBlank>
                    <WingBlank>
                      {this.state.hideStatus === true ? (
                        <View style={[public_css.view, public_css.lineTopBottom]}>
                          <View
                            style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{fontSize: 16}}>联系电话：</Text>
                          </View>
                          <TextInput
                            style={public_css.textInputStyle}
                            placeholder="请输入联系电话"
                            clearButtonMode="while-editing"
                            secureTextEntry={false}
                            onChangeText={(text) => {
                              this.setState({
                                contactNumber: text,
                              });
                            }}
                            value={this.state.contactNumber}
                          />
                        </View>
                      ) : (
                        <View />
                      )}
                    </WingBlank>
                    <WingBlank>
                      {this.state.hideStatus === true ? (
                        <View style={[public_css.view, public_css.lineTopBottom]}>
                          <View
                            style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{fontSize: 16}}>开户银行：</Text>
                          </View>
                          <TextInput
                            style={public_css.textInputStyle}
                            placeholder="请输入开户银行"
                            clearButtonMode="while-editing"
                            secureTextEntry={false}
                            onChangeText={(text) => {
                              this.setState({
                                bank: text,
                              });
                            }}
                            value={this.state.bank}
                          />
                        </View>
                      ) : (
                        <View />
                      )}
                    </WingBlank>
                    <WingBlank>
                      {this.state.hideStatus === true ? (
                        <View style={[public_css.view, public_css.lineTopBottom]}>
                          <View
                            style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{fontSize: 16}}>银行账号：</Text>
                          </View>
                          <TextInput
                            style={public_css.textInputStyle}
                            placeholder="请输入银行账号"
                            clearButtonMode="while-editing"
                            secureTextEntry={false}
                            onChangeText={(text) => {
                              this.setState({
                                bankAccount: text,
                              });
                            }}
                            value={this.state.bankAccount}
                          />
                        </View>
                      ) : (
                        <View />
                      )}
                    </WingBlank>
                    <WingBlank>
                      <View
                        style={[
                          public_css.view,
                          public_css.lineTopBottom,
                          {alignItems: 'center'},
                        ]}>
                        <View
                          style={{flexDirection: 'row', alignItems: 'center'}}>
                          <Text style={{color: 'red', marginRight: 5}}>*</Text>
                          <Text style={{fontSize: 16}}>收款人：</Text>
                        </View>
                        <TextInput
                          style={public_css.textInputStyle}
                          placeholder="请输入收款人"
                          clearButtonMode="while-editing"
                          secureTextEntry={false}
                          value={this.state.payee}
                          editable={false}
                        />
                        <View style={{marginRight: 20}}>
                          <TouchableOpacity
                            style={{
                              width: 30,
                              height: 30,
                              justifyContent: 'center',
                              alignItems: 'center',
                            }}
                            onPress={() => {
                              this.props.navigation.navigate('select_user', {
                                type: 1,
                                getUserInfo: (type, name) => {
                                  this.getUserInfo(type, name);
                                },
                              });
                            }}>
                            <Image
                              source={require('../../source/img/productImg/addIcon.png')}
                              style={{height: 16, width: 16}}
                            />
                          </TouchableOpacity>
                        </View>
                      </View>
                    </WingBlank>
                    <WingBlank>
                      <View
                        style={[
                          public_css.view,
                          public_css.lineTopBottom,
                          {alignItems: 'center'},
                        ]}>
                        <View
                          style={{flexDirection: 'row', alignItems: 'center'}}>
                          <Text style={{color: 'red', marginRight: 5}}>*</Text>
                          <Text style={{fontSize: 16}}>审核人：</Text>
                        </View>
                        <TextInput
                          style={public_css.textInputStyle}
                          placeholder="请输入审核人"
                          clearButtonMode="while-editing"
                          secureTextEntry={false}
                          value={this.state.reviewer}
                          editable={false}
                        />
                        <View style={{marginRight: 20}}>
                          <TouchableOpacity
                            style={{
                              width: 30,
                              height: 30,
                              justifyContent: 'center',
                              alignItems: 'center',
                            }}
                            onPress={() => {
                              this.props.navigation.navigate('select_user', {
                                type: 2,
                                getUserInfo: (type, name) => {
                                  this.getUserInfo(type, name);
                                },
                              });
                            }}>
                            <Image
                              source={require('../../source/img/productImg/addIcon.png')}
                              style={{height: 16, width: 16}}
                            />
                          </TouchableOpacity>
                        </View>
                      </View>
                    </WingBlank>
                    <WingBlank>
                      <View
                        style={[
                          public_css.view,
                          public_css.lineTopBottom,
                          {alignItems: 'center'},
                        ]}>
                        <View
                          style={{flexDirection: 'row', alignItems: 'center'}}>
                          <Text style={{color: 'red', marginRight: 5}}>*</Text>
                          <Text style={{fontSize: 16}}>开票人：</Text>
                        </View>
                        <TextInput
                          style={public_css.textInputStyle}
                          placeholder="请输入开票人"
                          clearButtonMode="while-editing"
                          secureTextEntry={false}
                          value={this.state.drawer}
                          editable={false}
                        />
                        <View style={{marginRight: 20}}>
                          <TouchableOpacity
                            style={{
                              width: 30,
                              height: 30,
                              justifyContent: 'center',
                              alignItems: 'center',
                            }}
                            onPress={() => {
                              this.props.navigation.navigate('select_user', {
                                type: 3,
                                getUserInfo: (type, name) => {
                                  this.getUserInfo(type, name);
                                },
                              });
                            }}>
                            <Image
                              source={require('../../source/img/productImg/addIcon.png')}
                              style={{height: 16, width: 16}}
                            />
                          </TouchableOpacity>
                        </View>
                      </View>
                    </WingBlank>
                    <WingBlank>
                      {this.state.hideStatus === true ? (
                        <View style={[public_css.view, public_css.lineTopBottom]}>
                          <View
                            style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{fontSize: 16}}>备注：</Text>
                          </View>
                          <TextInput
                            style={public_css.textInputStyle}
                            placeholder="请输入备注信息"
                            clearButtonMode="while-editing"
                            secureTextEntry={false}
                            onChangeText={(text) => {
                              this.setState({
                                remark: text,
                              });
                            }}
                          />
                        </View>
                      ) : (
                        <View />
                      )}
                      <View style={[public_css.view, {justifyContent: 'center'}]}>
                        <TouchableOpacity
                          style={{
                            width: 120,
                            height: 30,
                            backgroundColor: '#F8F8F8',
                            opacity: 1,
                            borderRadius: 99,
                            flexDirection: 'row',
                            justifyContent: 'center',
                            alignItems: 'center',
                          }}
                          onPress={() => this.hideChange()}>
                          {this.state.hideStatus === false ? (
                            <View
                              style={{flexDirection: 'row', alignItems: 'center'}}>
                              <Text style={{color: '#B6B6BA', fontSize: 16}}>
                                {this.state.hideStatusText}
                              </Text>
                              <SvgXml style={{marginLeft: 5}} xml={downArrowIcon()} />
                            </View>
                          ) : (
                            <View
                              style={{flexDirection: 'row', alignItems: 'center'}}>
                              <Text style={{color: '#B6B6BA', fontSize: 16}}>
                                {this.state.hideStatusText}
                              </Text>
                              <SvgXml style={{marginLeft: 5}} xml={upArrowIcon()} />
                            </View>
                          )}
                        </TouchableOpacity>
                      </View>
                    </WingBlank>
                    <View
                      style={{
                        backgroundColor: '#F7F7F7',
                        height: 40,
                        justifyContent: 'center',
                        marginLeft: 10,
                      }}>
                      <Text style={{color: '#888888', fontSize: 18}}>
                        接收方式
                      </Text>
                    </View>
                    <WingBlank>
                      <View
                        style={{
                          flexDirection: 'row',
                          justifyContent: 'flex-start',
                          borderBottomWidth: 1,
                          borderColor: 'rgb(208,208,208)',
                        }}>
                        <View>
                          <TouchableOpacity
                            onPress={() => {
                              this.getReceive(1);
                            }}
                            style={{
                              alignItems: 'center',
                              justifyContent: 'center',
                              backgroundColor: this.state.receiveBack,
                              width: 90,
                              height: 40,
                              borderRadius: 39,
                              margin: 10,
                            }}>
                            <Text
                              style={{
                                color: this.state.receiveBackFont,
                                fontWeight: 'bold',
                                fontSize: 16,
                              }}>
                              邮箱
                            </Text>
                          </TouchableOpacity>
                        </View>
                        <View>
                          <TouchableOpacity
                            onPress={() => {
                              this.getReceive(2);
                            }}
                            style={{
                              alignItems: 'center',
                              justifyContent: 'center',
                              backgroundColor: this.state.receiveBackCompany,
                              width: 90,
                              height: 40,
                              borderRadius: 39,
                              margin: 10,
                            }}>
                            <Text
                              style={{
                                color: this.state.receiveBackCompanyFont,
                                fontWeight: 'bold',
                                fontSize: 16,
                              }}>
                              短信
                            </Text>
                          </TouchableOpacity>
                        </View>
                      </View>
                    </WingBlank>
                    <WingBlank>
                      {this.state.receiveType === 1 ? (
                        <View
                          style={[
                            public_css.view,
                            public_css.lineTopBottom,
                            {alignItems: 'center'},
                          ]}>
                          <View
                            style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{color: 'red', marginRight: 5}}>*</Text>
                            <Text style={{fontSize: 16}}>邮箱：</Text>
                          </View>
                          <TextInput
                            style={public_css.textInputStyle}
                            placeholder="请输入邮箱"
                            clearButtonMode="while-editing"
                            secureTextEntry={false}
                            value={this.state.receiveAddress}
                            onChangeText={(text) => {
                              this.setState({
                                receiveAddress: text,
                              });
                            }}
                          />
                        </View>
                      ) : (
                        <View
                          style={[
                            public_css.view,
                            public_css.lineTopBottom,
                            {alignItems: 'center'},
                          ]}>
                          <View
                            style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{color: 'red', marginRight: 5}}>*</Text>
                            <Text style={{fontSize: 16}}>手机号：</Text>
                          </View>
                          <TextInput
                            style={public_css.textInputStyle}
                            placeholder="请输入手机号码"
                            clearButtonMode="while-editing"
                            secureTextEntry={false}
                            value={this.state.receiveAddress}
                            onChangeText={(text) => {
                              this.setState({
                                receiveAddress: text,
                              });
                            }}
                          />
                        </View>
                      )}
                    </WingBlank>
                  </View>
                ) : (
                  <View />
                )}
              </List>
              {this.state.isShowSearch === false ? (
                <View>
                  <View
                    style={{
                      backgroundColor: '#F7F7F7',
                      height: 40,
                      justifyContent: 'center',
                      marginLeft: 10,
                    }}>
                    <Text style={{color: '#888888', fontSize: 18}}>商品信息</Text>
                  </View>
                  <View style={invoice_css.list_view}>
                    <Text style={invoice_css.list_title_text}>名称</Text>
                    <Text style={invoice_css.list_title_text}>单价</Text>
                    {/*<Text style={invoice_css.list_title_text}>数量</Text>*/}
                    <Text style={invoice_css.list_title_text}>税率(%)</Text>
                    <Text style={invoice_css.list_title_text}>税额</Text>
                  </View>
                  <FlatList
                    data={this.state.listData}
                    renderItem={(item) => this.renderItem(item)}
                  />
                  <View>
                    <WhiteSpace />
                    <WingBlank>
                      <TouchableOpacity
                        style={{
                          // width: Dimensions.get('window').width,
                          height: 52,
                          flexDirection: 'row',
                          justifyContent: 'center',
                          alignItems: 'center',
                          border: 2,
                          borderStyle: 'dotted',
                          borderColor: '#2A67FE',
                          borderWidth: 2,
                          borderRadius: 8,
                          opacity: 1,
                        }}
                        onPress={() => {
                          this.props.navigation.navigate('product_list_info', {
                            status: 1,
                          });
                        }}>
                        <SvgXml xml={plusIcon()} />
                        <Text style={{}}>添加商品信息</Text>
                      </TouchableOpacity>
                    </WingBlank>
                    <WhiteSpace />
                  </View>
                </View>
              ) : (
                <View />
              )}
            </View>
          </TouchableWithoutFeedback>
        </ScrollView>
        <View>
          <WhiteSpace />
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-around',
              alignItems: 'center',
            }}>
            <Text>共{this.state.productNumberTotal}个产品</Text>
            <Text>
              开票金额:
              {RoundingData(parseFloat(this.state.amountTotal)).replace(
                /(\d)(?=(\d{3})+(?:\.\d+)?$)/g,
                '$1,',
              )}
              元
            </Text>
            <Text>税额:{RoundingData(parseFloat(this.state.taxAmount))}</Text>
          </View>
          <WhiteSpace />
          <WingBlank>
            <View style={[public_css.bottomStatus]}>
              <TouchableOpacity
                style={[public_css.statusBtn, public_css.statusRBtn]}
                onPress={() => this.submitData()}>
                {/*<Image*/}
                {/*  source={require('../../source/img/productImg/confirm.png')}*/}
                {/*  style={{width: 32, height: 32}}*/}
                {/*/>*/}
                <Text style={{color: '#fff'}}>开具发票</Text>
              </TouchableOpacity>
            </View>
          </WingBlank>
          <WhiteSpace />
        </View>
      </SafeAreaView>
    );
  }

  async componentDidMount(): void {
    let company = JSON.parse(await RetrieveData('company'));
    let userName = await RetrieveData('userName');
    let payee = '';
    let reviewer = '';
    if (company.payees.length > 0) {
      payee = company.payees.split(',')[0];
    }
    if (company.reviewers.length > 0) {
      reviewer = company.reviewers.split(',')[0];
    }
    this.setState({
      company: company,
      payee: payee,
      reviewer: reviewer,
      drawer: userName,
    });
    //收到监听
    this.listener = DeviceEventEmitter.addListener('productInfo', (data) => {
      //收到监听后想做的事情
      this.setList(data);
    });
  }

  componentWillUnmount() {
    //移除监听
    if (this.listener) {
      this.listener.remove();
    }
    clearTimeout(this.state.timer);
  }

  // 获取收款人、审核人、开票人信息
  getUserInfo = (type, name) => {
    if (type === 1) {
      this.setState({
        payee: name,
      });
    }
    if (type === 2) {
      this.setState({
        reviewer: name,
      });
    }
    if (type === 3) {
      this.setState({
        drawer: name,
      });
    }
  };

  selectProduct = () => {
    this.setState({
      productVisible: !this.state.productVisible,
    });
  };

  // 开票企业类型选择
  companyTypeChange = (value) => {
    let companyType = '';
    if (value.length > 0) {
      companyType = value[0];
    }
    this.setState({
      companyType: companyType,
    });
  };

  // 开票类型选择
  invoiceTypeChange = (value) => {
    let invoiceType = '';
    if (value.length > 0) {
      invoiceType = value[0];
    }
    this.setState({
      invoiceType: invoiceType,
    });
  };

  //提交开票信息
  submitData = async () => {
    if (this.state.customerName === '') {
      ToastShow(1, '企业名称不能为空!');
      return;
    }
    if (this.state.companyType === '2') {
      if (this.state.taxNumber === '') {
        ToastShow(1, '企业税号不能为空!');
        return;
      }
    }
    if (this.state.payee === '') {
      ToastShow(1, '收款人不能为空!');
      return;
    }
    if (this.state.reviewer === '') {
      ToastShow(1, '审核人不能为空!');
      return;
    }
    if (this.state.drawer === '') {
      ToastShow(1, '开票人不能为空!');
      return;
    }
    if (this.state.receiveType === 1) {
      if (this.state.receiveAddress === '') {
        ToastShow(1, '邮箱地址不能为空!');
        return;
      }
    } else {
      if (this.state.receiveAddress === '') {
        ToastShow(1, '邮箱地址不能为空!');
        return;
      }
    }
    if (this.state.listData <= 0) {
      ToastShow(1, '商品信息不能为空!');
      return;
    }
    const account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token) {
      const url = '/sys/invoice/save';
      let response = await RequestNetwork(
        url,
        token,
        {
          interactType: this.state.receiveType,
          interactTypeDetail: this.state.receiveAddress,
          invoiceWay: 1,
          invoiceCategory: this.state.invoiceType,
          cmdParam: {
            REQUEST_COMMON_FPKJ: {
              SBLX: this.state.company.defaultDeviceInfo.deviceType, //设备类型
              SBBH: this.state.company.defaultDeviceInfo.taxDiscId, //设备编号
              KPLX: 0, //开票类型 0-蓝字发票；1-红字发票
              FPZL: this.state.invoiceType, //发票种类 1.增值税普通电子发票   2.增值税电子专用发票  3.增值税普通纸质发票  4 增值税专用纸质发票
              TTLX: this.state.companyType, //收票客户抬头类型 1：个人  2：企业
              KPF_NSRSBH: this.state.company.entTaxId, //开票方纳税人识别号
              KPF_MC: this.state.company.entName, //开票方名称
              KPF_DZ: this.state.company.entAddress, //开票方地址
              KPF_DH: this.state.company.entPhone, //开票方电话
              KPF_YHZH: this.state.company.bankAccountNumber, //开票方银行账号
              KPF_KHHMC: this.state.company.bankName, //开票方开户行名称
              SPF_NSRSBH: this.state.taxNumber, //收票方纳税人识别号
              SPF_MC: this.state.customerName, //收票方名称
              SPF_DH: this.state.contactNumber, //收票方电话
              SPF_DZ: this.state.address, //收票方地址
              SPF_YHZH: this.state.bankAccount, //收票方银行账号
              SPF_KHHMC: this.state.bank, //收票方开户行名称
              KPR: this.state.drawer, //开票人
              SKR: this.state.payee, //收款人
              FHR: this.state.reviewer, //复核人
              YFP_DM: '', //原发票代码
              YFP_HM: '', //原发票号码
              JSHJ: NumberTwoDecimal(parseFloat(this.state.amountTotal)), //价税合计
              HJJE: NumberTwoDecimal(parseFloat(this.state.productAmountTotal)), //合计金额
              HJSE: NumberTwoDecimal(this.state.taxRateTotal), //合计税额
              BZ: this.state.remark, //备注
              HYLX: '0', //行业类型 0 商业、1 其它
              TSPZ: '00', //特殊票种标识 “00”不是 “01”农产品销售“02”农产品收购“06”抵扣通行费“07”其它通行费“08”成品油销售说明:如果非特殊票种此节点可以没有。
              COMMON_FPKJ_XMXXS: {
                COMMON_FPKJ_XMXX: this.state.listData,
              }, // 产品列表
            },
          },
          mobile: account,
          reqChannel: 3,
        },
        false,
        1,
      );
      if (response) {
        if (response.code === 0) {
          Alert.alert(
            '开具',
            '开票成功！',
            [
              {
                text: '确定',
                onPress: () => {
                  DeviceEventEmitter.emit('updateStatistics');
                  this.props.navigation.goBack();
                },
              },
            ],
            {cancelable: false},
          );
        } else {
          await this.abnormalMessage(response);
        }
      } else {
        ToastShow(1, response.msg);
      }
    }
  };

  //加载list列表
  setList = (data) => {
    let numberTotal = '';
    if (data.XMSL === '') {
      numberTotal = parseInt(this.state.productNumberTotal) + 1;
    } else {
      numberTotal =
        parseInt(this.state.productNumberTotal) + parseInt(data.XMSL);
    }
    let taxRateTotal =
      parseFloat(this.state.taxRateTotal) + parseFloat(data.SE);
    let taxAmount =
      parseFloat(this.state.taxAmount) + parseFloat(data.taxAmount);
    let amountTotal =
      parseFloat(this.state.amountTotal) + parseFloat(data.amount);
    let productAmountTotal =
      parseFloat(this.state.productAmountTotal) + parseFloat(data.XMJE);
    let list = this.state.listData.concat(data);
    this.setState({
      listData: list,
      amountTotal: amountTotal,
      taxRateTotal: taxRateTotal,
      taxAmount: taxAmount,
      productNumberTotal: numberTotal,
      productAmountTotal: productAmountTotal,
    });
  };

  //加载items
  renderItem = (data) => (
    <SwipeAction
      autoClose
      style={{backgroundColor: 'transparent'}}
      right={this.right(data)}>
      <List.Item>
        <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
          <View style={{width: 70, alignItems: 'center'}}>
            <Text>{data.item.XMMC} </Text>
          </View>
          <View style={{width: 70, alignItems: 'center'}}>
            <Text>{data.item.price}</Text>
          </View>
          {/*<View>*/}
          {/*  <Text>{data.item.XMSL} </Text>*/}
          {/*</View>*/}
          <View style={{width: 70, alignItems: 'center'}}>
            <Text>{data.item.SL * 100}</Text>
          </View>
          <View style={{width: 70, alignItems: 'center'}}>
            <Text>{data.item.taxAmount}</Text>
          </View>
        </View>
      </List.Item>
    </SwipeAction>
  );

  //左滑删除
  right = (data) => [
    {
      text: '删除',
      onPress: () => {
        this.deleteData(data.item);
      },
      style: {backgroundColor: 'red', color: 'white'},
    },
  ];

  //删除产品信息
  deleteData = (data) => {
    let listData = this.state.listData;
    let numberTotal = '';
    if (data.XMSL === '') {
      numberTotal = parseInt(this.state.productNumberTotal) - 1;
    } else {
      numberTotal =
        parseInt(this.state.productNumberTotal) - parseInt(data.XMSL);
    }
    let taxRateTotal =
      parseFloat(this.state.taxRateTotal) - parseFloat(data.SE);
    let taxAmount =
      parseFloat(this.state.taxAmount) - parseFloat(data.taxAmount);
    let amountTotal =
      parseFloat(this.state.amountTotal) - parseFloat(data.amount);
    let productAmountTotal =
      parseFloat(this.state.productAmountTotal) - parseFloat(data.XMJE);
    const prevIndex = listData.findIndex((item) => item.key === data.SPBM);
    listData.splice(prevIndex, 1);
    this.setState({
      listData: listData,
      amountTotal: amountTotal,
      taxRateTotal: taxRateTotal,
      taxAmount: taxAmount,
      productNumberTotal: numberTotal,
      productAmountTotal: productAmountTotal,
    });
  };

  // 字段隐藏切换
  hideChange = () => {
    this.setState({
      hideStatus: !this.state.hideStatus,
      hideStatusText: '收起',
    });
  };

  // 获取选择企业信息
  selectCustomer = (data) => {
    this.setState({
      customerName: data.customerName,
      taxNumber: data.entTaxId,
      contactNumber: data.contactPhone,
      address: data.address,
      bank: data.bankName,
      bankAccount: data.bankAccount,
    });
  };

  // 获取开票类型
  getInvoiceCategory = (invoiceCategory) => {
    if (invoiceCategory === '1') {
      this.setState({
        categoryBack: 'rgba(42,103,254, 1)',
        categoryBackCompany: 'rgba(42,103,254, 0.07)',
        categoryBackFont: '#ffffff',
        categoryBackCompanyFont: '#2A67FE',
        companyType: invoiceCategory,
      });
    } else {
      this.setState({
        categoryBack: 'rgba(42,103,254, 0.07)',
        categoryBackCompany: 'rgba(42,103,254, 1)',
        categoryBackFont: '#2A67FE',
        categoryBackCompanyFont: '#ffffff',
        companyType: invoiceCategory,
      });
    }
  };

  //获取发票类型
  getInvoiceType = (invoiceType) => {
    if (invoiceType === '1') {
      this.setState({
        typeBack: 'rgba(42,103,254, 1)',
        typeBackMajor: 'rgba(42,103,254, 0.07)',
        typeBackFont: '#ffffff',
        typeBackMajorFont: '#2A67FE',
        invoiceType: invoiceType,
      });
    } else {
      this.setState({
        typeBack: 'rgba(42,103,254, 0.07)',
        typeBackMajor: 'rgba(42,103,254, 1)',
        typeBackFont: '#2A67FE',
        typeBackMajorFont: '#ffffff',
        invoiceType: invoiceType,
      });
    }
  };

  //获取接收方式类型
  getReceive = (type) => {
    if (type === 1) {
      this.setState({
        receiveType: type,
        receiveBack: 'rgba(42,103,254, 1)',
        receiveBackFont: '#ffffff',
        receiveBackCompany: 'rgba(42,103,254, 0.07)',
        receiveBackCompanyFont: '#2A67FE',
        receiveAddress: '',
      });
    } else {
      this.setState({
        receiveType: type,
        receiveBack: 'rgba(42,103,254, 0.07)',
        receiveBackFont: '#2A67FE',
        receiveBackCompany: 'rgba(42,103,254, 1)',
        receiveBackCompanyFont: '#ffffff',
        receiveAddress: '',
      });
    }
  };

  // 设置云抬头显示
  setSearchCustomerName = (value) => {
    if (value) {
      this.getCustomerData(value);
    } else {
      this.setState({
        isShowSearch: false,
      });
    }
  };

  //获得客户信息
  getCustomerData = async (value) => {
    let token = await RetrieveData('token');
    let company = JSON.parse(await RetrieveData('company'));
    if (token) {
      const url = '/sys/customer/customerSearch';
      let res = await RequestNetwork(
        url,
        token,
        {
          customerName: value,
          entTaxId: company.entTaxId,
          reqChannel: 3,
        },
        false,
        2,
      );
      if (res) {
        console.log(res);
        if (res.code === 0) {
          this.setCustomerList(res.data);
        } else {
          await this.abnormalMessage(res);
        }
      }
    }
  };

  //设置客户信息列表
  setCustomerList = (data) => {
    this.setState({
      headList: [],
    });
    let listDatas = data.map((_, i) => ({
      key: data[i].customerId,
      customerName: data[i].customerName,
      entTaxId: data[i].customerEntTaxId,
      contactPhone: data[i].contactPhone,
      address: data[i].address,
      bankName: data[i].bankName,
      bankAccount: data[i].bankAccountNumber,
      customerMobile: data[i].customerMobile,
      email: data[i].email,
    }));
    let list = this.state.headList.concat(listDatas);
    if (list.length > 0) {
      this.setState({
        headList: list,
        isShowSearch: true,
      });
    } else {
      this.setState({
        headList: list,
        isShowSearch: false,
      });
    }
  };

  // 获取抬头信息
  getHeadInfo = (data) => {
    this.setState({
      customerName: data.customerName,
      taxNumber: data.entTaxId,
      contactNumber: data.contactPhone,
      address: data.address,
      bank: data.bankName,
      bankAccount: data.bankAccount,
      isShowSearch: false,
    });
  };

  // 点击空白处隐藏云抬头
  isHideHead = () => {
    console.log(123);
    let status = this.state.isShowSearch;
    if (status) {
      this.setState({
        isShowSearch: false,
      });
    }
  };

  // 处理网络请求数据
  abnormalMessage = async (jason) => {
    if (jason.code === 401) {
      await Alert.alert(
        '登录失效',
        '登录状态已失效，请重新登录！',
        [
          {
            text: '确定',
            onPress: () => {
              CleanAll();
              this.props.navigation.popToTop();
            },
          },
        ],
        {cancelable: false},
      );
    }
    if (jason.code === 403) {
      Alert.alert(
        '权限',
        '暂无权限操作此模块！',
        [
          {
            text: '确定',
            onPress: () => {
              this.props.navigation.goBack();
            },
          },
        ],
        {cancelable: false},
      );
    }
    if (jason.code !== 401 && jason.code !== 403) {
      ToastShow(1, jason.msg);
    }
  };
}

const styles = StyleSheet.create({
  buttonView: {
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },

  //通用按钮样式
  button: {
    marginTop: 5,
    width: Dimensions.get('window').width * 0.8,
    height: 34,
    borderRadius: 10,
    backgroundColor: '#1874CD',
    justifyContent: 'center',
    alignItems: 'center',
  },
  //通用按钮样式
  buttonText: {
    textAlign: 'center',
    color: 'white',
  },

  inputView: {
    padding: 5,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    display: 'flex',
  },

  view: {
    flexDirection: 'row',
    height: 34,
    width: Dimensions.get('window').width * 0.8,
    borderBottomWidth: 3 / PixelRatio.get(),
    borderColor: 'rgb(208,208,208)',
  },
  //通用textInput样式
  text: {
    lineHeight: 34,
    fontSize: 14,
  },
  //通用textInput样式
  lineTopBottom: {
    borderBottomWidth: 3 / PixelRatio.get(),
    borderColor: 'rgb(208,208,208)',
  },

  textInputStyle: {
    marginRight: 10,
    marginLeft: 20,
    fontSize: 14,
    marginTop: 4,
  },
});