import React, {Component} from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  SafeAreaView,
} from 'react-native';
import {WingBlank, WhiteSpace} from '@ant-design/react-native';
import public_css from '../../../source/css/public_css';
import {RequestNetwork} from '../../../data/encryption';

import {RetrieveData} from '../../../data/storage';
import {CheckPhoneNumber} from '../../../source/inspect/inspect';
import {ToastShow} from '../../../components/toast/toast';

export default class invoice_drawer_add_or_edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: '',
      userPhone: '',
      parentCode: '',
      entTaxId: null,
      shortCode: '',
      email: '',
      customerMobile: '',
      address: '',
      contactPhone: '',
      bankAccount: '',
      bank: '',
      remark: '',
      mobile: '',
      ip: '',
      spinner: false,
      companyTypes: [
        {
          label: '个人',
          value: '1',
        },
        {
          label: '企业',
          value: '2',
        },
      ],
      userType: '1',
      categoryBack: 'rgba(42,103,254, 1)',
      categoryBackFont: '#ffffff',
      categoryBackCompany: 'rgba(42,103,254, 0.07)',
      categoryBackCompanyFont: '#2A67FE',
      companyKId: '',
      companyMId: '',
      editStatus: true,
      isEdit: false,
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <View style={{flex: 1}}>
          <View style={{height: 40, backgroundColor: '#F7F7F7', justifyContent: 'center', marginLeft: 15}}>
            <Text style={{color: '#888888', fontSize: 15}}>基础信息</Text>
          </View>
          <WingBlank>
            <View style={[public_css.view, public_css.lineTopBottom]}>
              <Text
                style={[
                  public_css.text,
                  {color: '#333333'},
                ]}>
                <Text style={{color: 'red'}}>*</Text> 员工姓名：
              </Text>
              <TextInput
                style={public_css.textInputStyle}
                value={this.state.userName}
                placeholder="请输入员工姓名"
                clearButtonMode="while-editing"
                secureTextEntry={false}
                onChangeText={(text) => {
                  this.setState({
                    userName: text,
                  });
                }}
                editable={this.state.editStatus}
              />
            </View>
            <View style={[public_css.view, public_css.lineTopBottom]}>
              <Text
                style={[
                  public_css.text,
                  {color: '#333333'},
                ]}>
                <Text style={{color: 'red'}}>*</Text> 手机号码：
              </Text>
              <TextInput
                style={public_css.textInputStyle}
                value={this.state.userPhone}
                placeholder="请输入手机号码"
                clearButtonMode="while-editing"
                secureTextEntry={false}
                onChangeText={(text) => {
                  this.setState({
                    userPhone: text,
                  });
                }}
                editable={this.state.editStatus}
              />
            </View>
          </WingBlank>
          <View style={{height: 40, backgroundColor: '#F7F7F7', justifyContent: 'center'}}>
            <Text style={{color: '#888888', fontSize: 15, marginLeft: 15}}>企业权限</Text>
          </View>
          <View style={{flexDirection: 'row', justifyContent: 'flex-start'}}>
            <View>
              <TouchableOpacity
                onPress={() => {
                  this.setSelectStatus('1');
                }}
                style={{
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: this.state.categoryBack,
                  width: 150,
                  height: 40,
                  borderRadius: 39,
                  margin: 10,
                }}>
                <Text
                  style={{
                    color: this.state.categoryBackFont,
                    fontWeight: 'bold',
                    fontSize: 16,
                  }}>
                  企业开票主管
                </Text>
              </TouchableOpacity>
            </View>
            <View>
              <TouchableOpacity
                onPress={() => {
                  this.setSelectStatus('2');
                }}
                style={{
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: this.state.categoryBackCompany,
                  width: 150,
                  height: 40,
                  borderRadius: 39,
                  margin: 10,
                }}>
                <Text
                  style={{
                    color: this.state.categoryBackCompanyFont,
                    fontWeight: 'bold',
                    fontSize: 16,
                  }}>
                  企业开票员
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <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.deleteUser()}>
                <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() {
    if (this.props.route.params.dataStatus === 1) {
      let data = this.props.route.params.data;
      let userType = '';
      if (data.item.roleMemo === '企业开票主管') {
        userType = '1';
      } else {
        userType = '2';
      }
      this.setSelectStatus(userType);
      this.setState({
        userName: data.item.userName,
        userPhone: data.item.userMobile,
        editStatus: false,
        isEdit: true,
      });
    }
    this.getUserRole();
  }

  //提交数据
  submitData = async () => {
    let name = this.state.userName;
    if (!name) {
      ToastShow(1, '员工姓名不可以为空!');
      return;
    }
    let phone = this.state.userPhone;
    if (!phone) {
      ToastShow(1, '手机号码不可以为空!');
      return;
    }
    let userType = '';
    if (this.state.userType === '1') {
      userType = this.state.companyMId;
    }
    if (this.state.userType === '2') {
      userType = this.state.companyKId;
    }
    let { status, msg } = CheckPhoneNumber(`${this.state.userPhone}`);
    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 = '/auth/ent/user/saveOnEnt';
        let response = await RequestNetwork(
          url,
          token,
          {
            entUserMobile: this.state.userPhone,
            entUserName: this.state.userName,
            mobile: account,
            reqChannel: 3,
            entTaxId: company.entTaxId,
            roleId: userType,
          },
          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);
    }
  };

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

  //获取用户角色
  getUserRole = async () => {
    let token = await RetrieveData('token');
    if (token) {
      const url = '/auth/ent/role/findCategoryRoles';
      let res = await RequestNetwork(
        url,
        token,
        {},
        false,
        2,
      );
      if (res) {
        if (res.code === 0) {
          res.data.map((item) => {
            if (item.name === 'EKPM') {
              this.setState({
                companyMId: item.id,
              });
            }
            if (item.name === 'EKPP') {
              this.setState({
                companyKId: item.id,
              });
            }
          });
        }
      }
    }
  };

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

  // 获取开票类型
  setSelectStatus = (invoiceCategory) => {
    if (invoiceCategory === '1') {
      this.setState({
        categoryBack: 'rgba(42,103,254, 1)',
        categoryBackCompany: 'rgba(42,103,254, 0.07)',
        categoryBackFont: '#ffffff',
        categoryBackCompanyFont: '#2A67FE',
        userType: invoiceCategory,
      });
    } else {
      this.setState({
        categoryBack: 'rgba(42,103,254, 0.07)',
        categoryBackCompany: 'rgba(42,103,254, 1)',
        categoryBackFont: '#2A67FE',
        categoryBackCompanyFont: '#ffffff',
        userType: invoiceCategory,
      });
    }
  };

  // 删除用户信息
  deleteUser = async () => {
    let token = await RetrieveData('token');
    const account = await RetrieveData('account');
    const company = JSON.parse(await RetrieveData('company'));
    if (token) {
      this.setLoadingStatus(true);
      const url = '/auth/ent/user/delOnEnt';
      let res = await RequestNetwork(
        url,
        token,
        {
          entUserMobile: this.state.userPhone,
          entTaxId: company.entTaxId,
          mobile: account,
          reqChannel: 3,
        },
        false,
        1,
      );
      if (res) {
        if (res.code === 0) {
          this.setLoadingStatus(false);
          ToastShow(1, '删除成功!');
          this.props.route.params.refresh();
          this.props.navigation.goBack();
        }
      }
    }
  };
}