import React, {Component} from 'react';
import {
  View,
  Image,
  Text,
  TouchableOpacity,
  SafeAreaView,
  ScrollView,
  Alert,
  DeviceEventEmitter,
} from 'react-native';
import {WingBlank, WhiteSpace, Modal} from '@ant-design/react-native';
import {
  ClearAll,
  IndividualStorageData,
  RetrieveData,
} from '../../../data/storage';
import {
  RequestNetwork,
  UploadImage,
  GetNetworkUrl,
} from '../../../data/encryption';
import public_css from '../../../source/css/public_css';
import {ToastShow} from '../../../components/toast/toast';
import {rightArrowIcon} from '../../../source/icon/icon';
import {SvgXml} from 'react-native-svg';
import {GetMonthDate} from '../../../utils/date';
// import ImagePicker from 'react-native-image-crop-picker';

export default class invoice_info extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      userName: '',
      invoiceReqFlowNo: '',
      invoiceStatus: false,
      invoiceType: '',
      invoiceCategory: 3,
      buyerName: '',
      buyerEntTaxId: '',
      invoiceTotalPrice: '',
      invoiceTotalPriceTax: '',
      invoiceTotalTax: '',
      sellerEntName: '',
      sellerEntTaxId: '',
      drawer: '',
      payee: '',
      checker: '',
      invoiceCode: '',
      invoiceNo: '',
      invoiceDate: '',
      invalidStatus: true,
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <ScrollView>
          <View style={{alignItems: 'center', marginTop: 10}}>
            <Image source={require('../../../source/img/tax/invoiceBack.png')} />
            {this.state.invoiceCategory === 3 ? (
              <Text
                style={{
                  position: 'absolute',
                  top: 30,
                  color: '#9A4411',
                  fontSize: 25,
                }}>
                增值税普通纸质发票
              </Text>
            ) : this.state.invoiceCategory === 4 ? (
              <Text
                style={{
                  position: 'absolute',
                  top: 30,
                  color: '#9A4411',
                  fontSize: 25,
                }}>
                增值税专用纸质发票
              </Text>
            ) : (
              <Text />
            )}
          </View>
          {this.state.invoiceStatus ? (
            <View style={{alignItems: 'center', marginTop: 10}}>
              <Text style={{color: '#A0A0A0'}}>开票成功</Text>
            </View>
          ) : (
            <View />
          )}
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                borderBottomWidth: 0.5,
                height: 50,
              }}>
              <View style={{width: 90}}>
                <Text
                  style={{textAlign: 'right', color: '#9A4411', fontSize: 16}}>
                  价税合计：
                </Text>
              </View>
              <View>
                <Text style={{color: '#0C0C0C', fontSize: 16}}>
                  ¥{this.state.invoiceTotalPriceTax}
                </Text>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View style={{width: 90}}>
                <Text
                  style={{textAlign: 'right', color: '#9A4411', fontSize: 16}}>
                  购方名称：
                </Text>
              </View>
              <View>
                <Text style={{color: '#0C0C0C', fontSize: 16}}>
                  {this.state.buyerName}
                </Text>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View style={{width: 90}}>
                <Text
                  style={{textAlign: 'right', color: '#9A4411', fontSize: 16}}>
                  企业税号：
                </Text>
              </View>
              <View>
                <Text style={{color: '#0C0C0C', fontSize: 16}}>
                  {this.state.buyerEntTaxId}
                </Text>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View style={{width: 90}}>
                <Text
                  style={{textAlign: 'right', color: '#9A4411', fontSize: 16}}>
                  合计金额：
                </Text>
              </View>
              <View>
                <Text style={{color: '#0C0C0C', fontSize: 16}}>
                  ¥{this.state.invoiceTotalPrice}
                </Text>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View style={{width: 90}}>
                <Text
                  style={{textAlign: 'right', color: '#9A4411', fontSize: 16}}>
                  合计税额：
                </Text>
              </View>
              <View>
                <Text style={{color: '#0C0C0C', fontSize: 16}}>
                  ¥{this.state.invoiceTotalTax}
                </Text>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View style={{width: 90}}>
                <Text
                  style={{textAlign: 'right', color: '#9A4411', fontSize: 16}}>
                  客户名称：
                </Text>
              </View>
              <View>
                <Text style={{color: '#0C0C0C', fontSize: 16}}>
                  {this.state.sellerEntName}
                </Text>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View style={{width: 90}}>
                <Text
                  style={{textAlign: 'right', color: '#9A4411', fontSize: 16}}>
                  客户税号：
                </Text>
              </View>
              <View>
                <Text style={{color: '#0C0C0C', fontSize: 16}}>
                  {this.state.sellerEntTaxId}
                </Text>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View style={{width: 90}}>
                <Text
                  style={{textAlign: 'right', color: '#9A4411', fontSize: 16}}>
                  开票人：
                </Text>
              </View>
              <View>
                <Text style={{color: '#0C0C0C', fontSize: 16}}>
                  {this.state.drawer}
                </Text>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View style={{width: 90}}>
                <Text
                  style={{textAlign: 'right', color: '#9A4411', fontSize: 16}}>
                  收款人：
                </Text>
              </View>
              <View>
                <Text style={{color: '#0C0C0C', fontSize: 16}}>
                  {this.state.payee}
                </Text>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View style={{width: 90}}>
                <Text
                  style={{textAlign: 'right', color: '#9A4411', fontSize: 16}}>
                  审核人：
                </Text>
              </View>
              <View>
                <Text style={{color: '#0C0C0C', fontSize: 16}}>
                  {this.state.checker}
                </Text>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View style={{width: 90}}>
                <Text
                  style={{textAlign: 'right', color: '#9A4411', fontSize: 16}}>
                  发票代码：
                </Text>
              </View>
              <View>
                <Text style={{color: '#0C0C0C', fontSize: 16}}>
                  {this.state.invoiceCode}
                </Text>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View style={{width: 90}}>
                <Text
                  style={{textAlign: 'right', color: '#9A4411', fontSize: 16}}>
                  发票号码：
                </Text>
              </View>
              <View>
                <Text style={{color: '#0C0C0C', fontSize: 16}}>
                  {this.state.invoiceNo}
                </Text>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View style={{width: 90}}>
                <Text
                  style={{textAlign: 'right', color: '#9A4411', fontSize: 16}}>
                  开票日期：
                </Text>
              </View>
              <View>
                <Text style={{color: '#0C0C0C', fontSize: 16}}>
                  {this.state.invoiceDate}
                </Text>
              </View>
            </View>
          </WingBlank>
        </ScrollView>
        <View style={{height: 50, flexDirection: 'row', alignItems: 'center'}}>
          <View
            style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <TouchableOpacity
              style={{
                alignItems: 'center',
                justifyContent: 'center',
                height: 40,
                width: 160,
                borderWidth: 1,
                borderRadius: 8,
                borderColor: '#FE2A53',
              }}
              onPress={() => {
                this.invoiceHongChong();
              }}>
              <Text style={{color: '#FE2A53'}}>发票红冲</Text>
            </TouchableOpacity>
          </View>
          <View
            style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            {this.state.invalidStatus ? (
              <TouchableOpacity
                style={{
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: 40,
                  width: 160,
                  backgroundColor: '#F06969',
                  borderRadius: 8,
                }}
                onPress={() => {
                  this.invoiceInvalid();
                }}>
                <Text style={{color: '#FFFFFF'}}>发票作废</Text>
              </TouchableOpacity>
            ) : (
              <View />
            )}
          </View>
        </View>
      </SafeAreaView>
    );
  }

  //加载信息
  componentDidMount(): void {
    let data = this.props.route.params.data;
    this.setState({
      invoiceReqFlowNo: data.invoiceReqFlowNo,
      invoiceType: data.invoiceType,
      invoiceCategory: data.invoiceCategory,
    });
    this.invoiceInvalidStatus(data.invoiceDate);
    this.getInvoiceData(data.invoiceNumber, data.invoiceCode, data.invoiceType);
  }

  // 获取发票信息
  getInvoiceData = async (invoiceNumber, invoiceCode, invoiceType) => {
    let company = JSON.parse(await RetrieveData('company'));
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      const url = '/sys/invoiceExt/getResultData';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
          invoiceType: invoiceType,
          invoiceNumber: invoiceNumber,
          invoiceCode: invoiceCode,
        },
        false,
        2,
      );
      if (response) {
        if (response.code === 0) {
          this.setState({
            invoiceStatus: response.data.invoiceStatus,
            buyerName: response.data.invoiceData.buyerName,
            buyerEntTaxId: response.data.invoiceData.buyerEntTaxId,
            invoiceTotalPrice: response.data.invoiceData.invoiceTotalPrice,
            invoiceTotalPriceTax:
              response.data.invoiceData.invoiceTotalPriceTax,
            invoiceTotalTax: response.data.invoiceData.invoiceTotalTax,
            sellerEntName: response.data.invoiceData.sellerEntName,
            sellerEntTaxId: response.data.invoiceData.sellerEntTaxId,
            drawer: response.data.invoiceData.drawer,
            payee: response.data.invoiceData.payee,
            checker: response.data.invoiceData.checker,
            invoiceCode: response.data.invoiceData.invoiceCode,
            invoiceNo: response.data.invoiceData.invoiceNo,
            invoiceDate: response.data.invoiceData.invoiceDate,
          });
        } else {
          ToastShow(1, response.msg);
        }
      }
    }
  };

  //发票红冲
  invoiceHongChong = async () => {
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      const url = '/sys/invoice/quickyHongchong';
      let response = await RequestNetwork(
        url,
        token,
        {
          oriInvoiceReqFlowNo: this.state.oriInvoiceReqFlowNo,
          mobile: account,
          reqChannel: 3,
        },
        false,
        1,
      );
      if (response) {
        if (response.code === 0) {
          ToastShow(1, '红冲成功！');
        } else {
          ToastShow(1, response.msg);
        }
      }
    }
  };

  // 发票作废
  invoiceInvalid = async () => {
    let userName = await RetrieveData('userName');
    let company = JSON.parse(await RetrieveData('company'));
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      const url = '/sys/invoiceExt/invalid';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
          deviceType: company.defaultDeviceInfo.deviceType,
          taxDiscId: company.defaultDeviceInfo.taxDiscId,
          invoiceInvalidType: this.state.invoiceType,
          invoiceCategory: this.state.invoiceCategory,
          invoiceCode: this.state.invoiceCode,
          invoiceNumber: this.state.invoiceNo,
          invalidOper: userName,
          mobile: account,
          reqChannel: 3,
        },
        false,
        1,
      );
      if (response) {
        if (response.code === 0) {
          ToastShow(1, '作废成功！');
        } else {
          ToastShow(1, response.msg);
        }
      }
    }
  };

  // 判断发票作废按钮状态
  invoiceInvalidStatus = (invoiceDate) => {
    let date = GetMonthDate();
    if (
      invoiceDate >= date.startDateString &&
      invoiceDate <= date.endDateString
    ) {
      this.setState({
        invalidStatus: true,
      });
    } else {
      this.setState({
        invalidStatus: false,
      });
    }
  };
}