import React, {Component} from 'react';
import {
  View,
  Image,
  Text,
  TextInput,
  TouchableOpacity,
  Dimensions,
  ScrollView,
  KeyboardAvoidingView,
  DeviceEventEmitter,
} from 'react-native';
import {List, Picker, Provider} 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 {GetDataPost} from '../../data/encryption';
import {ShowToast} from '../../components/rootToast/root_toast';
import {RetrieveData} from '../../data/storage';

export default class personnel_add extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      name: this.props.route.params.personnel.name,
      phone: this.props.route.params.personnel.mobile,
      role_name: this.props.route.params.personnel.role_name,
      role_list: [],
      ents: [],
      user_type: 1,
      spinner: false,
    };
    alert(this.props.route.params.personnel.role_name);
  }

  render() {
    return (
      <Provider>
        <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}
                    placeholder="请输入员工姓名"
                    value={this.state.name}
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    onChangeText={(text) => {
                      this.setState({
                        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}
                    placeholder="请输入手机号码"
                    value={this.state.phone}
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    onChangeText={(text) => {
                      this.setState({
                        phone: text,
                      });
                    }}
                  />
                </View>
                <View style={{width: Dimensions.get('window').width}}>
                  <Picker
                    data={this.state.role_list}
                    cols={1}
                    value={this.state.role_name}
                    onChange={(value) => {
                      this.setState({role_name: value});
                    }}>
                    <List.Item arrow="horizontal">*角色:</List.Item>
                  </Picker>
                </View>
              </View>
            </View>
          </ScrollView>
          <View style={public_css.bottomStaus}>
            <TouchableOpacity
              style={[public_css.statusBtn, public_css.statusLBtn]}
              onPress={() => {
                this.setState({
                  name: '',
                  phone: '',
                  role_name: '',
                  ent_name: '',
                });
              }}>
              <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>
      </Provider>
    );
  }

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

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

  //根据登陆帐号类型加载数据
  setLoginType = async () => {
    let userType = await RetrieveData('usertype');
    userType = userType.substring(1, userType.length - 1);
    this.setState({
      user_type: userType,
    });
    //服务商
    if (userType == 2) {
      this.getIspRoleList();
    }
    //运营商
    if (userType == 3) {
      this.getOperRoleList();
    }
  };

  //提交数据
  submitData = () => {
    //服务商
    if (this.state.user_type == 2) {
      this.submitEditIspUser();
    }
    //运营商
    if (this.state.user_type == 3) {
      this.submitEditOperUser();
    }
  };

  //运营商用户数据编辑
  submitEditOperUser = async () => {
    let name = this.state.name;
    if (!name) {
      ShowToast('员工姓名不可以为空！');
      return;
    }
    let phone = this.state.phone;
    if (!phone) {
      ShowToast('手机号码不可以为空！');
      return;
    }
    this.setLoadingStatus(true);
    let token = await RetrieveData('token');
    let account = await RetrieveData('account');
    if (token && account) {
      token = token.substring(1, token.length - 1);
      account = account.substring(1, account.length - 1);
      const url = 'https://app.taxbk.cn:9443/auth/oper/user/updateManageInfo';
      let response = await GetDataPost(
        url,
        token,
        {
          mobile: this.state.phone,
          name: this.state.name,
          currentUserMobile: account,
          reqChannel: 3,
          status: true,
          roleIds: this.state.role_name,
        },
        false,
        1,
      );
      if (response) {
        if (response.code == 0) {
          ShowToast('编辑成功！');
          this.setLoadingStatus(false);
          this.props.navigation.goBack();
          DeviceEventEmitter.emit('刷新用户列表', '');
        } else {
          ShowToast('编辑失败！');
          this.setLoadingStatus(false);
        }
      } else {
        ShowToast(response.msg);
        this.setLoadingStatus(false);
      }
    }
  };

  //编辑服务商用户信息
  submitEditIspUser = async () => {
    let name = this.state.name;
    if (!name) {
      ShowToast('员工姓名不可以为空！');
      return;
    }
    let phone = this.state.phone;
    if (!phone) {
      ShowToast('手机号码不可以为空！');
      return;
    }
    this.setLoadingStatus(true);
    let token = await RetrieveData('token');
    let account = await RetrieveData('account');
    if (token && account) {
      token = token.substring(1, token.length - 1);
      account = account.substring(1, account.length - 1);
      const url = 'https://app.taxbk.cn:9443/auth/isp/user/updateManageInfo';
      let response = await GetDataPost(
        url,
        token,
        {
          mobile: this.state.phone,
          name: this.state.name,
          currentUserMobile: account,
          reqChannel: 3,
          status: true,
          roleIds: this.state.role_name,
        },
        false,
        1,
      );
      if (response) {
        if (response.code == 0) {
          ShowToast('编辑成功！');
          this.setLoadingStatus(false);
          this.props.navigation.goBack();
          DeviceEventEmitter.emit('刷新用户列表', '');
        } else {
          ShowToast('编辑失败！');
          this.setLoadingStatus(false);
        }
      } else {
        ShowToast(response.msg);
        this.setLoadingStatus(false);
      }
    }
  };

  //获取运营商角色列表
  getOperRoleList = async () => {
    let token = await RetrieveData('token');
    if (token) {
      token = token.substring(1, token.length - 1);
      const url = 'https://app.taxbk.cn:9443/auth/oper/role/findCategoryRoles';
      let response = await GetDataPost(url, token, {}, false, 2);
      if (response) {
        if (response.code == 0) {
          let listDatas = response.data.map((_, i) => ({
            label: response.data[i].remark,
            value: response.data[i].id,
          }));
          let list = this.state.role_list.concat(listDatas);
          this.setState({
            role_list: list,
          });
        }
      } else {
        ShowToast(response.msg);
      }
    }
  };

  //获取服务商角色列表
  getIspRoleList = async () => {
    let token = await RetrieveData('token');
    if (token) {
      token = token.substring(1, token.length - 1);
      const url = 'https://app.taxbk.cn:9443/auth/isp/role/findCategoryRoles';
      let response = await GetDataPost(url, token, {}, false, 2);
      if (response) {
        if (response.code == 0) {
          let listDatas = response.data.map((_, i) => ({
            label: response.data[i].remark,
            value: response.data[i].id,
          }));
          let list = this.state.role_list.concat(listDatas);
          this.setState({
            role_list: list,
          });
        }
      } else {
        ShowToast(response.msg);
      }
    }
  };
}