import React, {Component} from 'react';
import {
  Text,
  TextInput,
  TouchableOpacity,
  View,
  Image,
  KeyboardAvoidingView,
  ScrollView,
  Dimensions,
  PixelRatio,
  DeviceEventEmitter,
} from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';
import loading_css from '../../source/css/loading_css';
import login_css from '../login/login_css';
import public_css from '../../source/css/public_css';
import {Modal, Provider} from '@ant-design/react-native';
import ImagePicker from 'react-native-image-crop-picker';
import {ShowToast} from '../../components/rootToast/root_toast';
import {RetrieveData} from '../../data/storage';
import {GetDataPost} from '../../data/encryption';

export default class enterprise_shelves extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      listData: [],
      name: '',
      ent_tax_id: '',
      address: '',
      executive_name: '',
      phone: '',
      bank_name: '',
      bank_account: '',
      authorization: '',
      license: '',
    };
  }

  render() {
    return (
      <Provider>
        <KeyboardAvoidingView
          enabled
          style={{flex: 1, backgroundColor: '#ffffff'}}>
          <ScrollView>
            <View>
              <Spinner
                visible={this.state.spinner}
                textContent={'Loading...'}
                textStyle={loading_css.spinnerTextStyle}
              />
              <View style={login_css.inputView}>
                <View style={[public_css.view, public_css.lineTopBottom]}>
                  <Text
                    style={[
                      public_css.text,
                      {fontFamily: 'PingFang-SC-Regular', color: '#333333'},
                    ]}>
                    *纳税人名称:
                  </Text>
                  <TextInput
                    style={public_css.textInputStyle}
                    value={this.state.customer_name}
                    placeholder="请输入纳税人名称"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    onChangeText={(text) => {
                      this.setState({
                        name: text,
                      });
                    }}
                  />
                </View>
                <View style={[public_css.view, public_css.lineTopBottom]}>
                  <Text
                    style={[
                      public_css.text,
                      {fontFamily: 'PingFang-SC-Regular', color: '#333333'},
                    ]}>
                    *税号:
                  </Text>
                  <TextInput
                    style={public_css.textInputStyle}
                    value={this.state.ent_tax_id}
                    placeholder="请输入企业税号"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    onChangeText={(text) => {
                      this.setState({
                        ent_tax_id: text,
                      });
                    }}
                  />
                </View>
                <View style={[public_css.view, public_css.lineTopBottom]}>
                  <Text style={public_css.text}>*营业地址:</Text>
                  <TextInput
                    style={public_css.textInputStyle}
                    value={this.state.address}
                    placeholder="请输入营业地址"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    onChangeText={(text) => {
                      this.setState({
                        address: text,
                      });
                    }}
                  />
                </View>
                <View style={[public_css.view, public_css.lineTopBottom]}>
                  <Text style={public_css.text}>*主管姓名:</Text>
                  <TextInput
                    style={public_css.textInputStyle}
                    value={this.state.executive_name}
                    placeholder="请输入地址"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    onChangeText={(text) => {
                      this.setState({
                        executive_name: text,
                      });
                    }}
                    multiline={true}
                    numberOfLines={2}
                    textAlignVertical={'top'}
                  />
                </View>
                <View style={[public_css.view, public_css.lineTopBottom]}>
                  <Text style={public_css.text}>*联系电话:</Text>
                  <TextInput
                    style={public_css.textInputStyle}
                    value={this.state.phone}
                    placeholder="请输入银行账号"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    onChangeText={(text) => {
                      this.setState({
                        phone: text,
                      });
                    }}
                    multiline={true}
                    numberOfLines={2}
                    textAlignVertical={'top'}
                  />
                </View>
                <View style={[public_css.view, public_css.lineTopBottom]}>
                  <Text style={public_css.text}>银行名称:</Text>
                  <TextInput
                    style={public_css.textInputStyle}
                    value={this.state.bank_name}
                    placeholder="请输入备注"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    onChangeText={(text) => {
                      this.setState({
                        bank_name: text,
                      });
                    }}
                  />
                </View>
                <View style={[public_css.view, public_css.lineTopBottom]}>
                  <Text style={public_css.text}>银行帐号:</Text>
                  <TextInput
                    style={public_css.textInputStyle}
                    value={this.state.bank_account}
                    placeholder="请输入备注"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    onChangeText={(text) => {
                      this.setState({
                        bank_account: text,
                      });
                    }}
                  />
                </View>
                <View style={[public_css.imageView]}>
                  <Text style={public_css.text}>*营业执照:</Text>
                  <View
                    style={{
                      height: 100,
                      width: 100,
                      borderWidth: 3 / PixelRatio.get(),
                      borderColor: 'rgb(208,208,208)',
                      justifyContent: 'center',
                      alignItems: 'center',
                      margin: 10,
                      backgroundColor: '#e6e6e6',
                    }}>
                    <TouchableOpacity
                      onPress={() => {
                        this.selectHeadImage(1);
                      }}>
                      {this.state.license == '' ? (
                        <Image
                          source={require('../../source/img/add_image.png')}
                        />
                      ) : (
                        <Image
                          source={{uri: this.state.license}}
                          style={{
                            width: 100,
                            height: 100,
                            margin: 10,
                          }}
                        />
                      )}
                    </TouchableOpacity>
                  </View>
                </View>

                <View style={[public_css.imageView]}>
                  <Text style={public_css.text}>*授权书:</Text>
                  <View
                    style={{
                      height: 100,
                      width: 100,
                      borderWidth: 3 / PixelRatio.get(),
                      borderColor: 'rgb(208,208,208)',
                      justifyContent: 'center',
                      alignItems: 'center',
                      margin: 10,
                      backgroundColor: '#e6e6e6',
                    }}>
                    <TouchableOpacity
                      onPress={() => {
                        this.selectHeadImage(2);
                      }}>
                      {this.state.authorization == '' ? (
                        <Image
                          source={require('../../source/img/add_image.png')}
                        />
                      ) : (
                        <Image
                          source={{uri: this.state.authorization}}
                          style={{
                            width: 100,
                            height: 100,
                            margin: 10,
                          }}
                        />
                      )}
                    </TouchableOpacity>
                  </View>
                </View>
              </View>
            </View>
          </ScrollView>
          <View style={public_css.bottomStaus}>
            <TouchableOpacity
              style={[public_css.statusBtn, public_css.statusLBtn]}
              onPress={() => {
                this.setState({
                  name: '',
                  ent_tax_id: '',
                  address: '',
                  executive_name: '',
                  phone: '',
                  bank_name: '',
                  bank_account: '',
                  authorization: '',
                  license: '',
                });
              }}>
              <Image
                source={require('../../source/img/productImg/clear.png')}
                style={{width: 32, height: 32}}
              />
              <Text>全部清除</Text>
            </TouchableOpacity>
            <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>
        </KeyboardAvoidingView>
      </Provider>
    );
  }

  //设置头像
  selectHeadImage = (type) => {
    Modal.operation([
      {text: '拍照', onPress: () => this.openCamera(type)},
      {text: '相册', onPress: () => this.openPicker(type)},
    ]);
  };

  //拍照选择头像
  openCamera = (type) => {
    ImagePicker.openCamera({
      width: 300,
      height: 400,
      cropping: true,
    }).then((image) => {
      if (type == 1) {
        this.setState({
          license: image.path,
        });
      }
      if (type == 2) {
        this.setState({
          authorization: image.path,
        });
      }
    });
  };

  //相册选择头像
  openPicker = (type) => {
    ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
    }).then((image) => {
      if (type == 1) {
        this.setState({
          license: image.path,
        });
      }
      if (type == 2) {
        this.setState({
          authorization: image.path,
        });
      }
    });
  };

  //企业上架
  submitData = async () => {
    let name = this.state.name;
    if (!name) {
      ShowToast('纳税人姓名不可以为空！');
      return;
    }
    let ent_tax_id = this.state.ent_tax_id;
    if (!ent_tax_id) {
      ShowToast('税号不可以为空！');
      return;
    }
    let address = this.state.address;
    if (!address) {
      ShowToast('营业地址不可以为空！');
      return;
    }
    let executive_name = this.state.executive_name;
    if (!executive_name) {
      ShowToast('主管姓名不可以为空！');
      return;
    }
    let phone = this.state.phone;
    if (!phone) {
      ShowToast('联系电话不可以为空！');
      return;
    }
    this.setLoadingStatus(true);
    let token = await RetrieveData('token');
    let account = await RetrieveData('account');
    if (token && account) {
      token = token.substring(1, token.length - 1);
      account = account.substring(1, account.length - 1);
      const url = 'https://app.taxbk.cn:9443/sys/entInfo/preInit';
      let response = await GetDataPost(
        url,
        token,
        {
          entTaxId: this.state.ent_tax_id,
          entName: this.state.name,
          entType: 1,
          entContactPerson: this.state.executive_name,
          entPhone: this.state.phone,
          reserveMrMobile: this.state.phone,
          reserveMrName: this.state.executive_name,
          reqChannel: 3,
          userMobile: account,
        },
        false,
        1,
      );
      if (response) {
        if (response.code == 0) {
          ShowToast('上架成功！');
          this.setLoadingStatus(false);
          this.props.navigation.goBack();
        } else {
          ShowToast('上架失败！');
          this.setLoadingStatus(false);
        }
      } else {
        ShowToast(response.msg);
        this.setLoadingStatus(false);
      }
    }
  };
}