import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
  FlatList,
  PixelRatio,
  DeviceEventEmitter,
  Image,
  TextInput,
  SafeAreaView,
  ScrollView,
} from 'react-native';
import {
  List,
  SwipeAction,
  Picker,
  Provider,
  WhiteSpace,
  WingBlank,
} from '@ant-design/react-native';
import public_css from '../../source/css/public_css';
import {NumberTwoDecimal, RoundingData} from '../../source/inspect/inspect';
import buyer_invoice_css from './buyer_invoice_css';
import {SvgXml} from 'react-native-svg';
import {ToastShow} from '../../components/toast/toast';
import {plusIcon} from '../../source/icon/icon';
import {RetrieveData} from '../../data/storage';
import {RequestNetwork} from '../../data/encryption';

export default class buyer_invoice extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      listData: [],
      productNumberTotal: 0,
      taxAmount: 0.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: '',
      typeBack: 'rgba(42,103,254, 1)',
      typeBackFont: '#ffffff',
      typeBackMajor: 'rgba(42,103,254, 0.07)',
      typeBackMajorFont: '#2A67FE',
    };
  }

  render() {
    return (
      <Provider>
        <SafeAreaView style={public_css.body}>
          <ScrollView>
            <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>
              <List>
                <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
                      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>
                <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
                      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>
                <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
                      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>
              </List>
              <View
                style={{
                  backgroundColor: '#F7F7F7',
                  height: 40,
                  justifyContent: 'center',
                  marginLeft: 10,
                }}>
                <Text style={{color: '#888888', fontSize: 18}}>商品信息</Text>
              </View>
              <View style={buyer_invoice_css.list_view}>
                <Text style={buyer_invoice_css.list_title_text}>名称</Text>
                <Text style={buyer_invoice_css.list_title_text}>单价</Text>
                {/*<Text style={invoice_css.list_title_text}>数量</Text>*/}
                <Text style={buyer_invoice_css.list_title_text}>税率(%)</Text>
                <Text style={buyer_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: 2,
                      });
                    }}>
                    <SvgXml xml={plusIcon()} />
                    <Text style={{}}>添加商品信息</Text>
                  </TouchableOpacity>
                </WingBlank>
                <WhiteSpace />
              </View>
            </View>
          </ScrollView>
          <View>
            <WhiteSpace />
            <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.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>
      </Provider>
    );
  }

  // render完后后加载
  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('buyerInvoice', (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,
      });
    }
  };

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

  //提交开票信息
  submitData = async () => {
    if (this.state.payee === '') {
      ToastShow(1, '收款人不能为空!');
      return;
    }
    if (this.state.reviewer === '') {
      ToastShow(1, '审核人不能为空!');
      return;
    }
    if (this.state.drawer === '') {
      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/fapiao/todo/initSave';
      let response = await RequestNetwork(
        url,
        token,
        {
          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: '', //收票客户抬头类型 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: '', //收票方纳税人识别号
              SPF_MC: '', //收票方名称
              SPF_DH: '', //收票方电话
              SPF_DZ: '', //收票方地址
              SPF_YHZH: '', //收票方银行账号
              SPF_KHHMC: '', //收票方开户行名称
              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: '', //备注
              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) {
        console.log(response);
        if (response.code === 0) {
          this.props.navigation.navigate('buyer_qrcode', {
            url: response.data.qrcodeUrl,
            amount: this.state.amountTotal,
          });
        } else {
          ToastShow(1, response.msg);
        }
      } 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,
    });
  };

  //获取发票类型
  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,
      });
    }
  };
}

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