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

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

import wait_invoice_css from './wait_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';

export default class wait_invoice extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      listData: [],
      productNumberTotal: 0,
      amountTotal: 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',
      product_name: '',
      customerName: '',
      taxNumber: '',
      contactNumber: '',
      address: '',
      bank: '',
      bankAccount: '',
      payee: '',
      reviewer: '',
      drawer: '',
      remark: '',
      hideStatusText: '更多',
      hideStatus: false,
      email: '',
    };
  }

  render() {
    return (
      <Provider>
        <SafeAreaView style={public_css.body}>
          <ScrollView>
            <View>
              <Picker
                data={this.state.companyTypes}
                cols={1}
                value={this.state.companyType}
                onChange={(value) => {
                  this.setState({
                    companyType: value,
                  });
                }}>
                <List.Item arrow="horizontal" onPress={this.onPress}>
                  客户抬头类型：
                </List.Item>
              </Picker>
              <Picker
                data={this.state.invoiceTypes}
                cols={1}
                value={this.state.invoiceType}
                onChange={(value) => {
                  this.setState({
                    invoiceType: value,
                  });
                }}>
                <List.Item arrow="horizontal" onPress={this.onPress}>
                  发票类型：
                </List.Item>
              </Picker>
              <List>
                <View style={[public_css.view, {position: 'relative'}]}>
                  <View style={[public_css.view, {flex: 1}]}>
                    <Text style={public_css.text}>
                      <Text style={{color: 'red'}}>*</Text>企业名称:
                    </Text>
                    <TextInput
                      style={public_css.textInputStyle}
                      placeholder="请输入客户名称"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      onChangeText={(text) => {
                        // this.searchCustomer(text);
                        this.setState({
                          customerName: text,
                        });
                      }}
                      value={this.state.customerName}
                      // onBlur={() => {
                      //   this.searchCustomerName();
                      // }}
                    />
                  </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>
                <View style={[public_css.view, public_css.lineTopBottom]}>
                  <Text style={public_css.text}>
                    <Text style={{color: 'red'}}>*</Text>企业税号:
                  </Text>
                  <TextInput
                    style={public_css.textInputStyle}
                    placeholder="请输入客户企业税号"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    onChangeText={(text) => {
                      this.setState({
                        taxNumber: text,
                      });
                    }}
                    value={this.state.taxNumber}
                  />
                </View>
                {this.state.hideStatus === true ? (
                  <View style={[public_css.view, public_css.lineTopBottom]}>
                    <Text style={public_css.text}> 地址:</Text>
                    <TextInput
                      style={public_css.textInputStyle}
                      placeholder="请输入地址"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      onChangeText={(text) => {
                        this.setState({
                          address: text,
                        });
                      }}
                      value={this.state.address}
                    />
                  </View>
                ) : (
                  <View />
                )}
                {this.state.hideStatus === true ? (
                  <View style={[public_css.view, public_css.lineTopBottom]}>
                    <Text style={public_css.text}> 联系电话:</Text>
                    <TextInput
                      style={public_css.textInputStyle}
                      placeholder="请输入联系电话"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      onChangeText={(text) => {
                        this.setState({
                          contactNumber: text,
                        });
                      }}
                      value={this.state.contactNumber}
                    />
                  </View>
                ) : (
                  <View />
                )}
                {this.state.hideStatus === true ? (
                  <View style={[public_css.view, public_css.lineTopBottom]}>
                    <Text style={public_css.text}> 开户银行:</Text>
                    <TextInput
                      style={public_css.textInputStyle}
                      placeholder="请输入开户银行"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      onChangeText={(text) => {
                        this.setState({
                          bank: text,
                        });
                      }}
                      value={this.state.bank}
                    />
                  </View>
                ) : (
                  <View />
                )}
                {this.state.hideStatus === true ? (
                  <View style={[public_css.view, public_css.lineTopBottom]}>
                    <Text style={public_css.text}> 银行账号:</Text>
                    <TextInput
                      style={public_css.textInputStyle}
                      placeholder="请输入银行账号"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      onChangeText={(text) => {
                        this.setState({
                          bankAccount: text,
                        });
                      }}
                      value={this.state.bankAccount}
                    />
                  </View>
                ) : (
                  <View />
                )}
                <View
                  style={[
                    public_css.view,
                    public_css.lineTopBottom,
                    {alignItems: 'center'},
                  ]}>
                  <Text style={public_css.text}>
                    <Text style={{color: 'red'}}>*</Text>收款人:
                  </Text>
                  <TextInput
                    style={public_css.textInputStyle}
                    placeholder="请输入收款人"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    value={this.state.payee}
                    editable={false}
                  />
                  <View style={{marginRight: 20}}>
                    <TouchableOpacity
                      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>
                <View
                  style={[
                    public_css.view,
                    public_css.lineTopBottom,
                    {alignItems: 'center'},
                  ]}>
                  <Text style={public_css.text}>
                    <Text style={{color: 'red'}}>*</Text>审核人:
                  </Text>
                  <TextInput
                    style={public_css.textInputStyle}
                    placeholder="请输入审核人"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    value={this.state.reviewer}
                    editable={false}
                  />
                  <View style={{marginRight: 20}}>
                    <TouchableOpacity
                      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>
                <View
                  style={[
                    public_css.view,
                    public_css.lineTopBottom,
                    {alignItems: 'center'},
                  ]}>
                  <Text style={public_css.text}>
                    <Text style={{color: 'red'}}>*</Text>开票人:
                  </Text>
                  <TextInput
                    style={public_css.textInputStyle}
                    placeholder="请输入开票人"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    value={this.state.drawer}
                    editable={false}
                  />
                  <View style={{marginRight: 20}}>
                    <TouchableOpacity
                      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>
                {this.state.hideStatus === true ? (
                  <View style={[public_css.view, public_css.lineTopBottom]}>
                    <Text style={public_css.text}> 备注:</Text>
                    <TextInput
                      style={public_css.textInputStyle}
                      placeholder="请输入备注信息"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      onChangeText={(text) => {
                        this.setState({
                          remark: text,
                        });
                      }}
                    />
                  </View>
                ) : (
                  <View />
                )}
                <View
                  style={[
                    public_css.view,
                    public_css.lineTopBottom,
                    {alignItems: 'center'},
                  ]}>
                  <Text style={public_css.text}>
                    <Text style={{color: 'red'}}>*</Text>邮箱:
                  </Text>
                  <TextInput
                    style={public_css.textInputStyle}
                    placeholder="请输入邮箱"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    value={this.state.email}
                    onChangeText={(text) => {
                      this.setState({
                        email: text,
                      });
                    }}
                  />
                </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()}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                      <Text style={{color: '#B6B6BA', fontSize: 16}}>
                        {this.state.hideStatusText}
                      </Text>
                      <SvgXml xml={downArrowIcon()} />
                    </View>
                  </TouchableOpacity>
                </View>
              </List>
              <View style={wait_invoice_css.list_view}>
                <Text style={wait_invoice_css.list_title_text}>名称</Text>
                <Text style={wait_invoice_css.list_title_text}>单价</Text>
                {/*<Text style={wait_invoice_css.list_title_text}>数量</Text>*/}
                <Text style={wait_invoice_css.list_title_text}>税率(%)</Text>
                <Text style={wait_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('invoice_product_list');
                    }}>
                    <SvgXml xml={plusIcon()} />
                    <Text style={{}}>添加商品信息</Text>
                  </TouchableOpacity>
                </WingBlank>
                <WhiteSpace />
              </View>
            </View>
          </ScrollView>
          <View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-around',
                alignItems: 'center',
                width: Dimensions.get('window').width,
              }}>
              <Text>共{this.state.productNumberTotal}个产品</Text>
              <Text>
                开票金额:
                {RoundingData(parseFloat(this.state.amountTotal)).replace(
                  /(\d)(?=(\d{3})+(?:\.\d+)?$)/g,
                  '$1,',
                )}
                元
              </Text>
              <Text>
                税额:{RoundingData(parseFloat(this.state.taxRateTotal))}
              </Text>
            </View>
            <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>
          </View>
        </SafeAreaView>
      </Provider>
    );
  }

  async componentDidMount(): void {
    console.log(this.props.route.params);
    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();
    }
  }

  // 获取收款人、审核人、开票人信息
  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) => {
    this.setState({
      companyType: value,
    });
  };

  //提交开票信息
  submitData = async () => {
    if (this.state.customerName === '') {
      ToastShow(1, '企业名称不能为空!');
      return;
    }
    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.email === '') {
      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: 1,
          interactTypeDetail: this.state.email,
          invoiceWay: 1,
          invoiceCategory: 1,
          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.bank, //收票方银行账号
              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 折扣行、2 被折扣行
              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) {
          ToastShow(1, '开票成功!');
        }
      } else {
        ToastShow(1, response.msg);
      }
    }
  };

  //加载list列表
  setList = (data) => {
    console.log(data);
    let numberTotal =
      parseInt(this.state.productNumberTotal) + parseInt(data.XMSL);
    let taxRateTotal =
      parseFloat(this.state.taxRateTotal) + parseFloat(data.SE);
    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,
      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 =
      parseInt(this.state.productNumberTotal) - parseInt(data.XMSL);
    let taxRateTotal =
      parseFloat(this.state.taxRateTotal) - parseFloat(data.SE);
    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,
      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,
    });
  };
}

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,
  },
  //通用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,
  },
});