import React, {Component} from 'react';
import {
  View,
  Image,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  DeviceEventEmitter,
  SafeAreaView,
} from 'react-native';
import {WingBlank, WhiteSpace, List, Picker} from '@ant-design/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 {RequestNetwork} from '../../../data/encryption';

import {IndividualStorageData, RetrieveData} from '../../../data/storage';
import {ToastShow} from '../../../components/toast/toast';
const Item = List.Item;
export default class enterprise_edit extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      entName: '',
      entTaxId: '',
      entAddress: '',
      entContactPerson: '',
      entPhone: '',
      bankAccountName: '',
      bankAccountNumber: '',
      payees: '',
      reviewers: '',
      drawers: '',
      taxRates: '',
      spinner: false,
      companyTypeList: [
        {
          label: '一般纳税人',
          value: '1',
        },
        {
          label: '小规模纳税人',
          value: '2',
        },
        {
          label: '起征点以下纳税人',
          value: '3',
        },
      ],
      companyType: '1',
      deviceKey: '',
      deviceName: '',
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <Spinner
          visible={this.state.spinner}
          textContent={'Loading...'}
          textStyle={loading_css.spinnerTextStyle}
        />
        <ScrollView>
          <WingBlank>
            <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.entName}
                clearButtonMode="while-editing"
                secureTextEntry={false}
                editable={false}
              />
            </View>
          </WingBlank>
          <WingBlank>
            <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}
                clearButtonMode="while-editing"
                secureTextEntry={false}
                editable={false}
                onChangeText={(text) => {
                  this.setState({
                    entTaxId: text,
                  });
                }}
              />
            </View>
          </WingBlank>
          <Picker
            data={this.state.companyTypeList}
            cols={1}
            value={[this.state.companyType]}
            disabled={true}
            onChange={(value) => this.companyTypeChange(value)}>
            <List.Item arrow="horizontal" onPress={this.onPress}>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Text style={{fontSize: 16}}>企业类型：</Text>
              </View>
            </List.Item>
          </Picker>
          <List>
            <Item
              extra={this.state.deviceName}
              arrow="horizontal"
              onPress={() => {
                this.props.navigation.navigate('device_select', {
                  deviceKey: this.state.deviceKey,
                  entTaxId: this.state.entTaxId,
                  getDeviceInfo: (deviceName, deviceKey) => {
                    this.getDeviceInfo(deviceName, deviceKey);
                  },
                });
              }}>
              默认开票设备：
            </Item>
          </List>
          <WingBlank>
            <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.entAddress}
                placeholder="请输入企业地址"
                clearButtonMode="while-editing"
                secureTextEntry={false}
                onChangeText={(text) => {
                  this.setState({
                    entAddress: 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.entPhone}
                placeholder="请输入企业电话"
                clearButtonMode="while-editing"
                secureTextEntry={false}
                onChangeText={(text) => {
                  this.setState({
                    entPhone: 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.bankAccountName}
                placeholder="请输入开户银行名称"
                clearButtonMode="while-editing"
                secureTextEntry={false}
                onChangeText={(text) => {
                  this.setState({
                    bankAccountName: 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.bankAccountNumber}
                placeholder="请输入开户银行账号"
                clearButtonMode="while-editing"
                secureTextEntry={false}
                onChangeText={(text) => {
                  this.setState({
                    bankAccountNumber: 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.entContactPerson}
                placeholder="请输入企业联系人"
                clearButtonMode="while-editing"
                secureTextEntry={false}
                onChangeText={(text) => {
                  this.setState({
                    entContactPerson: text,
                  });
                }}
              />
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={[
                public_css.view,
                public_css.lineTopBottom,
                {alignItems: 'center'},
              ]}>
              <Text style={public_css.text}>收款人：</Text>
              <TextInput
                style={public_css.textInputStyle}
                placeholder="请添加收款人"
                clearButtonMode="while-editing"
                secureTextEntry={false}
                value={this.state.payees}
                editable={false}
              />
              <View style={{marginRight: 20}}>
                <TouchableOpacity
                  onPress={() => {
                    this.props.navigation.navigate('enterprise_user', {
                      type: 1,
                      data: this.state.payees,
                      getUserInfo: (type, name) => {
                        this.getUserInfo(type, name);
                      },
                    });
                  }}>
                  <Image
                    source={require('../../../source/img/productImg/addIcon.png')}
                    style={{height: 16, width: 16}}
                  />
                </TouchableOpacity>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={[
                public_css.view,
                public_css.lineTopBottom,
                {alignItems: 'center'},
              ]}>
              <Text style={public_css.text}>审核人：</Text>
              <TextInput
                style={public_css.textInputStyle}
                placeholder="请添加审核者"
                clearButtonMode="while-editing"
                secureTextEntry={false}
                value={this.state.reviewers}
                editable={false}
              />
              <View style={{marginRight: 20}}>
                <TouchableOpacity
                  onPress={() => {
                    this.props.navigation.navigate('enterprise_user', {
                      type: 2,
                      data: this.state.reviewers,
                      getUserInfo: (type, name) => {
                        this.getUserInfo(type, name);
                      },
                    });
                  }}>
                  <Image
                    source={require('../../../source/img/productImg/addIcon.png')}
                    style={{height: 16, width: 16}}
                  />
                </TouchableOpacity>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={[
                public_css.view,
                public_css.lineTopBottom,
                {alignItems: 'center'},
              ]}>
              <Text style={public_css.text}>开票人：</Text>
              <TextInput
                style={public_css.textInputStyle}
                placeholder="请添加审核者"
                clearButtonMode="while-editing"
                secureTextEntry={false}
                value={this.state.drawers}
                editable={false}
              />
              <View style={{marginRight: 20}}>
                <TouchableOpacity
                  onPress={() => {
                    this.props.navigation.navigate('enterprise_user', {
                      type: 3,
                      data: this.state.drawers,
                      getUserInfo: (type, name) => {
                        this.getUserInfo(type, name);
                      },
                    });
                  }}>
                  <Image
                    source={require('../../../source/img/productImg/addIcon.png')}
                    style={{height: 16, width: 16}}
                  />
                </TouchableOpacity>
              </View>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={[
                public_css.view,
                public_css.lineTopBottom,
                {alignItems: 'center'},
              ]}>
              <Text style={public_css.text}>可用税率：</Text>
              <TextInput
                style={[public_css.textInputStyle, {height: 150}]}
                placeholder="请添加可用税率"
                clearButtonMode="while-editing"
                secureTextEntry={false}
                value={this.state.taxRates}
                editable={false}
                multiline={true}
                numberOfLines={3}
              />
              <View>
                <TouchableOpacity
                  style={{
                    backgroundColor: '#2A67FE',
                    width: 50,
                    height: 30,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                  onPress={() => {
                    this.getRatesInfo();
                    // this.props.navigation.navigate('enterprise_tax_rate', {
                    //   data: this.state.taxRates,
                    //   getUserTaxRate: (taxRates) => {
                    //     this.getUserTaxRate(taxRates);
                    //   },
                    // });
                  }}>
                  <Text style={{color: '#fff'}}>同步</Text>
                </TouchableOpacity>
              </View>
            </View>
          </WingBlank>
        </ScrollView>
        <WingBlank>
          <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>
    );
  }

  //加载页面时显示数据
  async componentDidMount(): void {
    let company = this.props.route.params.enterprise;
    this.setState({
      entName: company.entName,
      entTaxId: company.entTaxId,
      entAddress: company.entAddress,
      entContactPerson: company.entContactPerson,
      entPhone: company.entPhone,
      bankAccountName: company.bankAccountName,
      bankAccountNumber: company.bankAccountNumber,
      payees: company.payees,
      reviewers: company.reviewers,
      drawers: company.drawers,
      taxRates: company.availableTaxes,
      companyType: company.entType.toString(),
      deviceKey: company.defaultInvoiceDevice,
    });
    await this.getDeviceName();
  }

  //提交数据
  submitData = async () => {
    let company = JSON.parse(await RetrieveData('company'));
    let number = this.state.bankAccountNumber;
    if (!number) {
      ToastShow(1, '企业银行帐号不可以为空!');
      return;
    }
    let payees = this.state.payees;
    if (!payees) {
      ToastShow(1, '收款人不可以为空!');
      return;
    }
    let entTaxId = this.state.entTaxId;
    if (!entTaxId) {
      ToastShow(1, '客户税号不可以为空!');
      return;
    }
    this.setLoadingStatus(true);
    let token = await RetrieveData('token');
    let account = await RetrieveData('account');
    if (token && account) {
      const url = '/sys/entInfo/updateBriefInfo';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: this.state.entTaxId,
          entName: this.state.entName,
          entType: this.state.companyType,
          entAddress: this.state.entAddress,
          entContactPerson: this.state.entContactPerson,
          entPhone: this.state.entPhone,
          bankAccountName: this.state.bankAccountName,
          bankAccountNumber: this.state.bankAccountNumber,
          payees: this.state.payees,
          reviewers: this.state.reviewers,
          drawers: this.state.drawers,
          availableTaxes: this.state.taxRates,
          doConfirm: false,
          defaultInvoiceDevice: this.state.deviceKey,
          reqChannel: 3,
          mobile: account,
        },
        false,
        1,
      );
      if (response) {
        if (response.code === 0) {
          this.setLoadingStatus(false);
          company.payees = this.state.payees;
          company.reviewers = this.state.reviewers;
          company.drawers = this.state.drawers;
          company.availableTaxes = this.state.taxRates;
          company.entAddress = this.state.entAddress;
          company.entContactPerson = this.state.entContactPerson;
          company.entPhone = this.state.entPhone;
          company.bankName = this.state.bankAccountName;
          company.bankAccountNumber = this.state.bankAccountNumber;
          await IndividualStorageData('company', JSON.stringify(company));
          ToastShow(1, '编辑成功!');
          DeviceEventEmitter.emit('updateCompany', null);
          DeviceEventEmitter.emit('企业信息刷新', '');
          this.props.navigation.goBack();
        } else {
          this.setLoadingStatus(false);
          ToastShow(1, '编辑失败!');
        }
      } else {
        this.setLoadingStatus(false);
        ToastShow(1, response.msg);
      }
    }
  };

  // 获取收款人、审核人、开票人信息
  getUserInfo = (type, name) => {
    if (type === 1) {
      this.setState({
        payees: name,
      });
    }
    if (type === 2) {
      this.setState({
        reviewers: name,
      });
    }
    if (type === 3) {
      this.setState({
        drawers: name,
      });
    }
  };

  // 获取可用税率信息
  getUserTaxRate = (taxRates) => {
    this.setState({
      taxRates: taxRates,
    });
  };

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

  // 获取设备名称
  getDeviceName = async () => {
    const token = await RetrieveData('token');
    if (token) {
      const url = '/sys/entDevice/findDevices';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: this.state.entTaxId,
        },
        false,
        2,
      );
      if (response) {
        if (response.code === 0) {
          response.data.map((item) => {
            if (this.state.deviceKey === item.deviceKey) {
              this.setState({
                deviceName: item.deviceLabel,
              });
            }
          });
        }
      }
    }
  };

  // 获取选择的设备信息
  getDeviceInfo = (deviceName, deviceKey) => {
    this.setState({
      deviceName: deviceName,
      deviceKey: deviceKey,
    });
  };

  // 同步税率信息
  getRatesInfo = async () => {
    const token = await RetrieveData('token');
    if (token) {
      this.setLoadingStatus(true);
      const url = '/sys/entInfo/syncSkRates';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: this.state.entTaxId,
          reqChannel: 3,
        },
        false,
        1,
      );
      if (response) {
        console.log(response);
        if (response.code === 0) {
          this.setLoadingStatus(false);
          if (response.data.rates) {
            this.setState({
              taxRates: response.data.rates,
            });
          } else {
            this.setState({
              taxRates: '',
            });
          }
        } else {
          this.setLoadingStatus(false);
          ToastShow(1, response.msg);
        }
      }
    }
  };
}