import React, {Component} from 'react';
import {
  View,
  Image,
  TouchableHighlight,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  Dimensions,
  ScrollView,
  KeyboardAvoidingView,
  DeviceEventEmitter,
} from 'react-native';

import login_css from '../login/login_css';
import public_css from '../../source/css/public_css';
import loading_css from '../../source/css/loading_css';
import Spinner from 'react-native-loading-spinner-overlay';
import {GetDataPost} from '../../data/encryption';
import {ShowToast} from '../../components/rootToast/root_toast';
import {RetrieveData, StorageData} from '../../data/storage';
import {CheckEmail, CheckPhoneNumber} from '../../source/inspect/inspect';

export default class customer_edit extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.companyId = this.props.route.params.companyId;
    this.state = {
      customer_name: '',
      customer_code: '',
      parent_code: '',
      ent_tax_id: '',
      short_code: '',
      email: '',
      customer_mobile: '',
      address: '',
      contact_phone: '',
      bank_account: '',
      remark: '',
      mobile: '',
      req_channel: '',
      ip: '',
      spinner: false,
    };
  }

  render() {
    return (
      <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({
                      customer_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.contact_phone}
                  placeholder="请输入联系电话"
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  onChangeText={text => {
                    this.setState({
                      contact_phone: 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,
                    });
                  }}
                  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_account}
                  placeholder="请输入银行账号"
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  onChangeText={text => {
                    this.setState({
                      bank_account: 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.remark}
                  placeholder="请输入备注"
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  onChangeText={text => {
                    this.setState({
                      remark: text,
                    });
                  }}
                />
              </View>
              <View
                style={{
                  backgroundColor: '#F6F6F6',
                  width: Dimensions.get('window').width * 0.8,
                  height: 40,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <Text style={{color: '#A9A9A9', fontSize: 16}}>
                  填写联系方式，向你同步电子发票信息
                </Text>
              </View>
              <View style={[public_css.view, public_css.lineTopBottom]}>
                <Text style={public_css.text}>*客户手机号:</Text>
                <TextInput
                  style={public_css.textInputStyle}
                  placeholder="请输入客户手机号"
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  value={this.state.customer_mobile}
                  onChangeText={text => {
                    this.setState({
                      customer_mobile: text,
                    });
                  }}
                />
              </View>
              <View style={[public_css.view, public_css.lineTopBottom]}>
                <Text style={public_css.text}>*邮箱:</Text>
                <TextInput
                  style={public_css.textInputStyle}
                  placeholder="请输入邮件"
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  value={this.state.email}
                  onChangeText={text => {
                    this.setState({
                      email: text,
                    });
                  }}
                />
              </View>
            </View>
          </View>
        </ScrollView>
        <View style={public_css.bottomStaus}>
          <TouchableOpacity
            style={[public_css.statusBtn, public_css.statusLBtn]}
            onPress={() => {
              this.setState({
                customer_name: '',
                customer_code: '',
                parent_code: '',
                ent_tax_id: '',
                short_code: '',
                email: '',
                customer_mobile: '',
                address: '',
                contact_phone: '',
                bank_account: '',
                remark: '',
                mobile: '',
                req_channel: '',
                ip: '',
              });
            }}>
            <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>
    );
  }

  //提交数据
  submitData = async () => {
    let name = this.state.customer_name;
    if (!name) {
      ShowToast('客户姓名不可以为空！');
      return;
    }
    let entId = this.state.ent_tax_id;
    if (!entId) {
      ShowToast('客户企业税号不可以为空！');
      return;
    }
    let phone = this.state.customer_mobile;
    if (!phone) {
      ShowToast('客户手机号不可以为空！');
      return;
    }
    let email = this.state.email;
    if (!email) {
      ShowToast('客户邮箱不可以为空！');
      return;
    }
    let {status, msg} = CheckPhoneNumber(`${this.state.customer_mobile}`);
    if (status) {
      let {status, msg} = CheckEmail(`${this.state.email}`);
      if (status) {
        this.setLoadingStatus(true);
        const res = await RetrieveData('token');
        const account = await RetrieveData('account');
        if (res && account) {
          let token = res.substring(1, res.length - 1);
          let mobile = account.substring(1, account.length - 1);
          const url = 'https://app.taxbk.cn:9443/sys/customer/saveOrUpdate';
          let response = await GetDataPost(
            url,
            token,
            {
              customerId: this.companyId,
              customerName: this.state.customer_name,
              customerCode: this.state.customer_code,
              parentCode: this.state.parent_code,
              entTaxId: this.state.ent_tax_id,
              shortCode: this.state.short_code,
              email: this.state.email,
              customerMobile: this.state.customer_mobile,
              address: this.state.address,
              contactPhone: this.state.contact_phone,
              bankAccount: this.state.bank_account,
              remark: this.state.remark,
              mobile: mobile,
              reqChannel: 3,
              ip: this.state.ip,
            },
            false,
            1,
          );
          if (response.code != 0) {
            ShowToast(response.msg);
            this.setLoadingStatus(false);
          } else {
            ShowToast('编辑成功！');
            this.setLoadingStatus(false);
            this.props.navigation.goBack();
            DeviceEventEmitter.emit('刷新列表', '');
          }
        }
      } else {
        ShowToast(msg);
      }
    } else {
      ShowToast(msg);
    }
  };

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

  //加载页面时显示数据
  componentDidMount(): void {
    this.getCompanyData();
  }

  //加载数据
  getCompanyData = async () => {
    const res = await RetrieveData('token');
    if (res) {
      let token = res.substring(1, res.length - 1);
      const url = 'https://app.taxbk.cn:9443/sys/customer/findById';
      GetDataPost(
        url,
        token,
        {
          customerId: this.companyId,
        },
        false,
        2,
      ).then(res => {
        console.log(res);
        this.setState({
          customer_name: res.data.customerName,
          customer_code: res.data.customerCode,
          parent_code: res.data.parentCode,
          ent_tax_id: res.data.entTaxId,
          short_code: res.data.shortCode,
          email: res.data.email,
          address: res.data.address,
          contact_phone: res.data.contactPhone,
          bank_account: res.data.bankAccount,
          remark: res.data.remark,
        });
      });
    }
  };
}