import React, {Component} from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  SafeAreaView,
} from 'react-native';
import {List, Picker, WingBlank, WhiteSpace} from '@ant-design/react-native';
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 {RequestNetwork} from '../../../data/encryption';
import {RetrieveData} from '../../../data/storage';
import {CheckEmail, CheckPhoneNumber} from '../../../source/inspect/inspect';
import {ToastShow} from '../../../components/toast/toast';

export default class customer_add_or_edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      customerName: '',
      entTaxId: '',
      email: '',
      customerMobile: '',
      address: '',
      contactPhone: '',
      bank: '',
      bankAccount: '',
      remark: '',
      mobile: '',
      spinner: false,
      companyTypes: [
        {
          label: '个人',
          value: '1',
        },
        {
          label: '企业',
          value: '2',
        },
      ],
      companyType: '1',
      isEdit: false,
      customerId: '',
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <ScrollView>
          <View>
            <Spinner
              visible={this.state.spinner}
              textContent={'Loading...'}
              textStyle={loading_css.spinnerTextStyle}
            />
            <View
              style={{
                backgroundColor: '#F6F6F6',
                height: 36,
                justifyContent: 'center',
                marginLeft: 14,
              }}>
              <Text style={{color: '#A9A9A9', fontSize: 16}}>基础信息</Text>
            </View>
            <Picker
              data={this.state.companyTypes}
              cols={1}
              value={[this.state.companyType]}
              onChange={(value) => this.companyTypeChange(value)}>
              <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]}>
                <Text
                  style={[
                    public_css.text,
                    {fontFamily: 'PingFang-SC-Regular', color: '#333333'},
                  ]}>
                  <Text style={{color: 'red'}}>*</Text>客户姓名：
                </Text>
                <TextInput
                  style={public_css.textInputStyle}
                  value={this.state.customerName}
                  placeholder="请输入客户名称"
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  onChangeText={(text) => {
                    this.setState({
                      customerName: text,
                    });
                  }}
                />
              </View>
            </WingBlank>
            <WingBlank>
              {this.state.companyType === '1' ? (
                <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.entTaxId}
                    placeholder="请输入客户企业税号"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    onChangeText={(text) => {
                      this.setState({
                        entTaxId: text,
                      });
                    }}
                  />
                </View>
              ) : (
                <View style={[public_css.view, public_css.lineTopBottom]}>
                  <Text
                    style={[
                      public_css.text,
                      {fontFamily: 'PingFang-SC-Regular', color: '#333333'},
                    ]}>
                    <Text style={{color: 'red'}}>*</Text> 客户企业税号：
                  </Text>
                  <TextInput
                    style={public_css.textInputStyle}
                    value={this.state.entTaxId}
                    placeholder="请输入客户企业税号"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    onChangeText={(text) => {
                      this.setState({
                        entTaxId: text,
                      });
                    }}
                  />
                </View>
              )}
            </WingBlank>
            <WingBlank>
              <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>
            </WingBlank>
            <WingBlank>
              <View style={[public_css.view, public_css.lineTopBottom]}>
                <Text style={public_css.text}>联系电话：</Text>
                <TextInput
                  style={public_css.textInputStyle}
                  value={this.state.contactPhone}
                  placeholder="请输入联系电话"
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  onChangeText={(text) => {
                    this.setState({
                      contactPhone: text,
                    });
                  }}
                />
              </View>
            </WingBlank>
            <WingBlank>
              <View style={[public_css.view, public_css.lineTopBottom]}>
                <Text style={public_css.text}>开户行：</Text>
                <TextInput
                  style={public_css.textInputStyle}
                  value={this.state.bank}
                  placeholder="请输入地址"
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  onChangeText={(text) => {
                    this.setState({
                      bank: text,
                    });
                  }}
                />
              </View>
            </WingBlank>
            <WingBlank>
              <View style={[public_css.view, public_css.lineTopBottom]}>
                <Text style={public_css.text}>银行账号：</Text>
                <TextInput
                  style={public_css.textInputStyle}
                  value={this.state.bankAccount}
                  placeholder="请输入银行账号"
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  onChangeText={(text) => {
                    this.setState({
                      bankAccount: text,
                    });
                  }}
                  multiline={true}
                  numberOfLines={2}
                  textAlignVertical={'top'}
                />
              </View>
            </WingBlank>
            <WingBlank>
              <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>
            </WingBlank>
            <View
              style={{
                backgroundColor: '#F6F6F6',
                height: 40,
                marginLeft: 14,
                justifyContent: 'center',
              }}>
              <Text style={{color: '#A9A9A9', fontSize: 16}}>
                填写联系方式，向您同步电子发票信息
              </Text>
            </View>
            <WingBlank>
              <View style={[public_css.view, public_css.lineTopBottom]}>
                <Text style={public_css.text}>
                  <Text style={{color: 'red'}}>*</Text> 客户手机号：
                </Text>
                <TextInput
                  style={public_css.textInputStyle}
                  placeholder="请输入客户手机号"
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  value={this.state.customerMobile}
                  onChangeText={(text) => {
                    this.setState({
                      customerMobile: text,
                    });
                  }}
                />
              </View>
            </WingBlank>
            <WingBlank>
              <View style={[public_css.view, public_css.lineTopBottom]}>
                <Text style={public_css.text}>
                  <Text style={{color: 'red'}}>*</Text> 邮箱：
                </Text>
                <TextInput
                  style={public_css.textInputStyle}
                  placeholder="请输入邮件"
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  value={this.state.email}
                  onChangeText={(text) => {
                    this.setState({
                      email: text,
                    });
                  }}
                />
              </View>
            </WingBlank>
          </View>
        </ScrollView>
        <WingBlank>
          {this.state.isEdit === true ? (
            <View style={public_css.bottomStatus}>
              <TouchableOpacity
                style={{
                  width: 120,
                  borderWidth: 1,
                  borderColor: '#FE2A53',
                  borderRadius: 8,
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginRight: 10,
                }}
                onPress={() => this.deleteCustomer()}>
                <Text style={{color: '#FE2A53'}}>删除</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[public_css.statusBtn, public_css.statusRBtn]}
                onPress={() => this.submitData()}>
                <Text style={{color: '#fff'}}>保存</Text>
              </TouchableOpacity>
            </View>
          ) : (
            <View style={public_css.bottomStatus}>
              <TouchableOpacity
                style={[public_css.statusBtn, public_css.statusRBtn]}
                onPress={() => this.submitData()}>
                <Text style={{color: '#fff'}}>新增</Text>
              </TouchableOpacity>
            </View>
          )}
        </WingBlank>
        <WhiteSpace />
      </SafeAreaView>
    );
  }

  //加载页面时显示数据
  componentDidMount(): void {
    let customerId = this.props.route.params.companyId;
    if (customerId) {
      this.setState({
        isEdit: true,
        customerId: customerId,
      });
      this.getCompanyData();
    }
  }

  //提交数据
  submitData = async () => {
    let name = this.state.customerName;
    if (!name) {
      ToastShow(1, '客户姓名不可以为空!');
      return;
    }
    if (this.state.companyType === '2') {
      let entId = this.state.entTaxId;
      if (!entId) {
        ToastShow(1, '客户企业税号不可以为空!');
        return;
      }
    }
    let phone = this.state.customerMobile;
    if (!phone) {
      ToastShow(1, '客户手机号不可以为空!');
      return;
    }
    let email = this.state.email;
    if (!email) {
      ToastShow(1, '客户邮箱不可以为空!');
      return;
    }
    let {status, msg} = CheckPhoneNumber(`${this.state.customerMobile}`);
    if (status) {
      let {status, msg} = CheckEmail(`${this.state.email}`);
      if (status) {
        this.setLoadingStatus(true);
        const token = await RetrieveData('token');
        const account = await RetrieveData('account');
        const company = JSON.parse(await RetrieveData('company'));
        if (token && account) {
          const url = '/sys/customer/save';
          let response = await RequestNetwork(
            url,
            token,
            {
              customerId: this.state.customerId,
              customerName: this.state.customerName,
              customerType: this.state.companyType,
              customerEntTaxId: this.state.entTaxId,
              email: this.state.email,
              customerMobile: this.state.customerMobile,
              address: this.state.address,
              contactPhone: this.state.contactPhone,
              bankName: this.state.bank,
              bankAccountNumber: this.state.bankAccount,
              remark: this.state.remark,
              entTaxId: company.entTaxId,
              mobile: account,
              reqChannel: 3,
            },
            false,
            1,
          );
          if (response) {
            console.log(response);
            if (response.code === 0) {
              this.setLoadingStatus(false);
              ToastShow(1, '保存成功!');
              this.props.route.params.refresh();
              this.props.navigation.goBack();
            } else {
              this.setLoadingStatus(false);
              ToastShow(1, response.msg);
            }
          }
        }
      } else {
        ToastShow(1, msg);
      }
    } else {
      ToastShow(1, msg);
    }
  };

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

  // 企业类型选择
  companyTypeChange = (value) => {
    let companyType = '';
    if (value.length > 0) {
      companyType = value[0];
    }
    this.setState({
      companyType: companyType,
    });
  };

  //加载数据
  getCompanyData = async () => {
    const token = await RetrieveData('token');
    if (token) {
      const url = '/sys/customer/findById';
      let res = await RequestNetwork(
        url,
        token,
        {
          customerId: this.state.customerId,
        },
        false,
        2,
      );
      if (res) {
        if (res.code === 0) {
          this.setState({
            customerName: res.data.customerName,
            entTaxId: res.data.customerEntTaxId,
            email: res.data.email,
            address: res.data.address,
            contactPhone: res.data.contactPhone,
            customerMobile: res.data.customerMobile,
            bank: res.data.bankName,
            bankAccount: res.data.bankAccountNumber,
            remark: res.data.remark,
            companyType: res.data.customerType.toString(),
          });
        }
      }
    }
  };

  //删除客户数据
  deleteCustomer = async () => {
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    const company = JSON.parse(await RetrieveData('company'));
    if (account && token) {
      const url = '/sys/customer/delete';
      let res = await RequestNetwork(
        url,
        token,
        {
          mobile: account,
          reqChannel: 3,
          delList: [
            {
              customerId: this.state.customerId,
              entTaxId: company.entTaxId,
            },
          ],
        },
        false,
        1,
      );
      if (res) {
        if (res.code === 0) {
          ToastShow(1, '删除成功!');
          this.props.route.params.refresh();
          this.props.navigation.goBack();
        } else {
          ToastShow(1, '删除失败!');
        }
      } else {
        ToastShow(1, '删除失败!');
      }
    }
  };
}