import React, {Component} from 'react';
import {
  Text,
  TextInput,
  TouchableOpacity,
  View,
  SafeAreaView,
  ScrollView,
  Image,
  Alert,
} from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';
import loading_css from '../../source/css/loading_css';
import public_css from '../../source/css/public_css';
import {List, Picker, WhiteSpace, WingBlank} from '@ant-design/react-native';
import {RetrieveData} from '../../data/storage';
import {RequestNetwork} from '../../data/encryption';
import {CleanAll} from '../../components/abnormalMessage/abnormal_message';
import {ToastShow} from '../../components/toast/toast';

export default class invoice_application extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listData: [],
      invoiceCategoryList: [],
      invoiceCategory: '',
      invoiceCategoryText: '',
      invoiceTypeList: [],
      invoiceType: '',
      invoiceTypeText: '',
      invoiceInfo: [],
      userInfo: [],
      certificatesInfo: [],
      applyNumber: '',
      certificatesList: [],
      certificates: '',
      certificatesText: '居民身份证',
      certificatesNumber: '',
      agent: '',
      collectTicketsList: [
        {
          value: 1,
          label: '自行领取',
        },
        {
          value: 2,
          label: '快递配送',
        },
      ],
      collectTickets: 1,
      addressee: '',
      expressAddress: '',
      mobilePhone: '',
      fixedTelephone: '',
      postalCode: '',
      remark: '发票申领',
      spinner: false,
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <Spinner
          visible={this.state.spinner}
          textContent={'Loading...'}
          textStyle={loading_css.spinnerTextStyle}
        />
        <ScrollView>
          <Picker
            data={this.state.invoiceCategoryList}
            cols={1}
            value={[this.state.invoiceCategory]}
            onChange={(select) => this.invoiceCategoryChange(select)}>
            <List.Item arrow="horizontal" onPress={this.onPress}>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Text style={{color: 'red', marginRight: 5}}>*</Text>
                <Text style={{fontSize: 16}}>发票类别：</Text>
              </View>
            </List.Item>
          </Picker>
          <Picker
            data={this.state.invoiceTypeList}
            cols={1}
            value={[this.state.invoiceType]}
            onChange={(select) => this.invoiceTypeChange(select)}>
            <List.Item arrow="horizontal" onPress={this.onPress}>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Text style={{color: 'red', marginRight: 5}}>*</Text>
                <Text style={{fontSize: 16}}>发票种类：</Text>
              </View>
            </List.Item>
          </Picker>
          <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"
                onChangeText={(text) => {
                  this.setState({
                    applyNumber: text,
                  });
                }}
              />
            </View>
          </WingBlank>
          <Picker
            data={this.state.certificatesList}
            cols={1}
            value={[this.state.certificates]}
            onChange={(select) => this.certificatesChange(select)}>
            <List.Item arrow="horizontal" onPress={this.onPress}>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Text style={{color: 'red', marginRight: 5}}>*</Text>
                <Text style={{fontSize: 16}}>证件类型：</Text>
              </View>
            </List.Item>
          </Picker>
          <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"
                value={this.state.certificatesNumber}
                onChangeText={(text) => {
                  this.setState({
                    certificatesNumber: text,
                  });
                }}
              />
            </View>
          </WingBlank>
          <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"
                value={this.state.agent}
                onChangeText={(text) => {
                  this.setState({
                    agent: text,
                  });
                }}
              />
            </View>
          </WingBlank>
          <Picker
            data={this.state.collectTicketsList}
            cols={1}
            value={[this.state.collectTickets]}
            onChange={(select) => this.collectTicketsChange(select)}>
            <List.Item arrow="horizontal" onPress={this.onPress}>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Text style={{color: 'red', marginRight: 5}}>*</Text>
                <Text style={{fontSize: 16}}>领票方式：</Text>
              </View>
            </List.Item>
          </Picker>
          {this.state.collectTickets === 2 ? (
            <View>
              <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"
                    onChangeText={(text) => {
                      this.setState({
                        addressee: text,
                      });
                    }}
                  />
                </View>
              </WingBlank>
              <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"
                    onChangeText={(text) => {
                      this.setState({
                        expressAddress: text,
                      });
                    }}
                  />
                </View>
              </WingBlank>
              <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"
                    onChangeText={(text) => {
                      this.setState({
                        mobilePhone: text,
                      });
                    }}
                  />
                </View>
              </WingBlank>
              <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"
                    onChangeText={(text) => {
                      this.setState({
                        fixedTelephone: text,
                      });
                    }}
                  />
                </View>
              </WingBlank>
              <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"
                    onChangeText={(text) => {
                      this.setState({
                        postalCode: text,
                      });
                    }}
                  />
                </View>
              </WingBlank>
            </View>
          ) : (
            <View />
          )}
          <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"
                value={this.state.remark}
                onChangeText={(text) => {
                  this.setState({
                    remark: text,
                  });
                }}
              />
            </View>
          </WingBlank>
        </ScrollView>
        <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 />
      </SafeAreaView>
    );
  }

  // render加载完后调用
  async componentDidMount() {
    await this.getApplicationInfo();
  }

  // 获取申领基本信息
  getApplicationInfo = async () => {
    const company = JSON.parse(await RetrieveData('company'));
    const token = await RetrieveData('token');
    const account = await RetrieveData('account');
    if (token && account) {
      const url = '/sys/invoicePurchase/preInfo';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
          deviceType: company.defaultDeviceInfo.deviceType,
          taxDiscId: company.defaultDeviceInfo.taxDiscId,
        },
        false,
        2,
      );
      if (response) {
        if (response.code === 0) {
          this.setState({
            invoiceInfo: response.data.pzhdInfos,
            userInfo: response.data.operatorInfos,
            certificatesInfo: response.data.papers,
          });
          this.getInvoiceCategory();
          this.getCertificates();
          this.getUserInfo();
        } else {
          await this.abnormalMessage(response);
        }
      }
    }
  };

  // 加载发票类别信息
  getInvoiceCategory = () => {
    let invoiceCategory = [];
    this.state.invoiceInfo.forEach((item) => {
      let status = invoiceCategory.some(
        (value) => value.value === item.invoiceCateCode,
      );
      if (!status) {
        invoiceCategory.push({
          value: item.invoiceCateCode,
          label: item.invoiceCateName,
        });
      }
    });
    this.setState({
      invoiceCategoryList: invoiceCategory,
    });
  };

  // 加载发票种类信息
  getInvoiceType = (type) => {
    let invoiceType = [];
    this.state.invoiceInfo.forEach((item) => {
      if (type === item.invoiceCateCode) {
        invoiceType.push({
          value: item.invoiceKindCode,
          label: item.invoiceKindName,
        });
      }
    });
    this.setState({
      invoiceTypeList: invoiceType,
    });
  };

  // 加载证件类型信息
  getCertificates = () => {
    let certificatesList = [];
    this.state.certificatesInfo.forEach((item) => {
      certificatesList.push({
        value: item.paperType,
        label: item.paperTypeChn,
      });
    });
    this.setState({
      certificatesList: certificatesList,
    });
  };

  // 加载人员信息
  getUserInfo = () => {
    if (this.state.userInfo.length > 0) {
      this.setState({
        certificatesNumber: this.state.userInfo[0].paperNumber,
        agent: this.state.userInfo[0].operatorName,
        certificates: this.state.userInfo[0].paperType,
      });
    }
  };

  // 发票类别选择
  invoiceCategoryChange = (select) => {
    let invoiceCategory = '';
    let invoiceCategoryText = '';
    if (select.length > 0) {
      invoiceCategory = select[0];
      let categoryText = this.state.invoiceCategoryList.filter((item) => {
        return item.value === invoiceCategory;
      });
      if (categoryText.length > 0) {
        invoiceCategoryText = categoryText[0].label;
      }
    }
    this.setState({
      invoiceCategory: invoiceCategory,
      invoiceCategoryText: invoiceCategoryText,
    });
    this.getInvoiceType(invoiceCategory);
  };

  //发票类型选择
  invoiceTypeChange = (select) => {
    let invoiceType = '';
    let invoiceTypeText = '';
    if (select.length > 0) {
      invoiceType = select[0];
      let typeText = this.state.invoiceTypeList.filter((item) => {
        return item.value === invoiceType;
      });
      if (typeText.length > 0) {
        invoiceTypeText = typeText[0].label;
      }
    }
    this.setState({
      invoiceType: invoiceType,
      invoiceTypeText: invoiceTypeText,
    });
  };

  // 证件类型选择
  certificatesChange = (select) => {
    let certificates = '';
    let certificatesText = '';
    if (select.length > 0) {
      certificates = select[0];
      let certificatesTypeText = this.state.certificatesList.filter((item) => {
        return item.value === certificates;
      });
      if (certificatesTypeText.length > 0) {
        certificatesText = certificatesTypeText[0].label;
      }
    }
    this.setState({
      certificates: certificates,
      certificatesText: certificatesText,
    });
  };

  // 领取方式选择
  collectTicketsChange = (select) => {
    let collectTickets = '';
    if (select.length > 0) {
      collectTickets = select[0];
    }
    this.setState({
      collectTickets: collectTickets,
    });
  };

  // 发票申领
  submitData = async () => {
    if (this.state.invoiceCategory === '') {
      ToastShow(1, '发票类别不能为空!');
      return;
    }
    if (this.state.invoiceType === '') {
      ToastShow(1, '发票种类不能为空!');
      return;
    }
    if (this.state.applyNumber === '') {
      ToastShow(1, '申领份数不能为空!');
      return;
    }
    if (this.state.certificates === '') {
      ToastShow(1, '证件类型不能为空!');
      return;
    }
    if (this.state.certificatesNumber === '') {
      ToastShow(1, '证件号码不能为空!');
      return;
    }
    if (this.state.agent === '') {
      ToastShow(1, '经办人不能为空!');
      return;
    }
    if (this.state.collectTickets === 2) {
      if (this.state.addressee === '') {
        ToastShow(1, '收件人不能为空!');
        return;
      }
      if (this.state.expressAddress === '') {
        ToastShow(1, '快递地址不能为空!');
        return;
      }
      if (this.state.mobilePhone === '') {
        ToastShow(1, '移动电话不能为空!');
        return;
      }
      if (this.state.fixedTelephone === '') {
        ToastShow(1, '固定电话不能为空!');
        return;
      }
      if (this.state.postalCode === '') {
        ToastShow(1, '邮政编码不能为空!');
        return;
      }
    }
    if (this.state.remark === '') {
      ToastShow(1, '申领说明不能为空!');
      return;
    }
    this.setLoadingStatus(true);
    const company = JSON.parse(await RetrieveData('company'));
    const token = await RetrieveData('token');
    const account = await RetrieveData('account');
    if (token && account) {
      const url = '/sys/invoicePurchase/apply';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
          deviceType: company.defaultDeviceInfo.deviceType,
          taxDiscId: company.defaultDeviceInfo.taxDiscId,
          invoiceKindCode: this.state.invoiceType,
          invoiceKindName: this.state.invoiceCategoryText,
          invoiceCateCode: this.state.invoiceCategory,
          invoiceCateName: this.state.invoiceTypeText,
          applyNum: this.state.applyNumber,
          operatorName: this.state.agent,
          paperType: this.state.certificates,
          paperTypeChn: this.state.certificatesText,
          paperNumber: this.state.certificatesNumber,
          remark: this.state.remark,
          getWay: this.state.collectTickets,
          receiverName: this.state.addressee,
          receiverAddress: this.state.expressAddress,
          mobilePhoneNumber: this.state.collectTickets,
          zipCode: this.state.collectTickets,
          fixedPhoneNumber: '',
          mobile: account,
          reqChannel: 3,
        },
        false,
        1,
      );
      if (response) {
        if (response.code === 0) {
          this.setLoadingStatus(false);
          ToastShow(1, '申领成功！');
          this.props.route.params.setRefresh();
          this.props.navigation.goBack();
        } else {
          this.setLoadingStatus(false);
          await this.abnormalMessage(response);
        }
      }
    }
  };

  // 设置load层是否显示
  setLoadingStatus = (isLoading) => {
    this.setState({
      spinner: isLoading,
    });
  };

  // 处理网络请求数据
  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);
    }
  };
}