import React, {Component} from 'react';
import {
  View,
  Text,
  SafeAreaView,
  ScrollView,
  Image,
  Dimensions,
  TouchableOpacity,
  TextInput, DeviceEventEmitter,
} from "react-native";
import public_css from '../../../source/css/public_css';
import { RequestNetwork } from "../../../data/encryption";
import { StorageData } from "../../../data/storage";
import { ToastShow } from "../../../components/toast/toast";
import Spinner from 'react-native-loading-spinner-overlay';
import loading_css from "../../../source/css/loading_css";

export default class loan_apply extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      companyName: '',
      contacts: '',
      phone: '',
      quota: '',
      spinner: false,
      initData: 'loading',
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <Spinner
          visible={this.state.spinner}
          textContent={this.state.initData}
          textStyle={loading_css.spinnerTextStyle}
        />
        <ScrollView>
          <View style={{alignItems: 'center'}}>
            <View>
              <Image
                style={{width: Dimensions.get('window').width, height: 600}}
                resizeMode={'stretch'}
                source={require('../../../source/img/homeImg/loan_apply.png')}
              />
            </View>
            <View
              style={{
                position: 'absolute',
                top: 100,
              }}>
              <Text
                style={{color: '#EB2B2D', fontWeight: 'bold', fontSize: 25}}>
                填写申请信息
              </Text>
            </View>
            <View style={{position: 'absolute', top: 150}}>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  backgroundColor: '#EEE9E9',
                }}>
                <Text
                  style={{
                    color: '#693434',
                    fontWeight: 'bold',
                    fontSize: 16,
                    marginLeft: 10,
                  }}>
                  企业名称：
                </Text>
                <TextInput
                  style={{height: 40, width: 200}}
                  value={this.state.companyName}
                  onChangeText={(text) => {
                    this.setState({companyName: text});
                  }}
                />
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  backgroundColor: '#EEE9E9',
                  marginTop: 20,
                }}>
                <Text
                  style={{
                    color: '#693434',
                    fontWeight: 'bold',
                    fontSize: 16,
                    marginLeft: 10,
                  }}>
                  联系人：
                </Text>
                <TextInput
                  style={{height: 40, width: 200}}
                  value={this.state.contacts}
                  onChangeText={(text) => {
                    this.setState({contacts: text});
                  }}
                />
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  backgroundColor: '#EEE9E9',
                  marginTop: 20,
                }}>
                <Text
                  style={{
                    color: '#693434',
                    fontWeight: 'bold',
                    fontSize: 16,
                    marginLeft: 10,
                  }}>
                  联系电话：
                </Text>
                <TextInput
                  style={{height: 40, width: 200}}
                  value={this.state.phone}
                  onChangeText={(text) => {
                    this.setState({phone: text});
                  }}
                />
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  backgroundColor: '#EEE9E9',
                  marginTop: 20,
                }}>
                <Text
                  style={{
                    color: '#693434',
                    fontWeight: 'bold',
                    fontSize: 16,
                    marginLeft: 10,
                  }}>
                  意向额度：
                </Text>
                <TextInput
                  style={{height: 40, width: 200}}
                  value={this.state.quota}
                  onChangeText={(text) => {
                    this.setState({quota: text});
                  }}
                />
              </View>
            </View>
            <View style={{position: 'absolute', top: 400, width: 300}}>
              <Text style={{color: '#89898B'}}>
                小提示：提交申请后，工作人员会在第一时间与您取得联系，请保持手机畅通！
              </Text>
            </View>
            <View
              style={{
                position: 'relative',
                top: -120,
              }}>
              <TouchableOpacity
                style={{
                  height: 40,
                  width: 180,
                  backgroundColor: '#FFE95F',
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderRadius: 64,
                  elevation: 20, // 适配android的
                  shadowOffset: {width: 0, height: 0},
                  shadowColor: 'black',
                  shadowOpacity: 0.15,
                  shadowRadius: 5,
                }} onPress={() => this.submitData()}>
                <Text
                  style={{color: '#CD0014', fontSize: 16, fontWeight: 'bold'}}>
                  立即申请
                </Text>
              </TouchableOpacity>
            </View>
            <View style={{position: 'relative', top: -70}}>
              <Text style={{color: '#FBC85B'}}>
                *本产品最终解释权归昆明官渡农村合作银行所有
              </Text>
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }

  //提交申请信息
  submitData = async () => {
    this.setLoadingStatus(true);
    const url = '/marketing/recommended/save';
    let token = null;
    let response = await RequestNetwork(
      url,
      token,
      {
        contactName: this.state.contacts,
        contactPhone: this.state.phone,
        entName: this.state.companyName,
        campaignId: '4efc6f48fed8ce0457fc4abaf3470a82',
        reqChannel: 3,
        by1: this.state.quota,
      },
      false,
      1,
    );
    if (response) {
      if (response.code === 0) {
        this.setLoadingStatus(false);
        ToastShow(1, '申请成功！');
        this.props.navigation.goBack();
      } else {
        this.setLoadingStatus(false);
        ToastShow(1, response.msg);
      }
    }
  };

  //是否显示Loading层
  setLoadingStatus(isLoading) {
    this.setState({
      spinner: isLoading,
    });
  }
}