import React, {Component} from 'react';
import {
  View,
  Image,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  SafeAreaView,
  StyleSheet,
} from 'react-native';
import {
  List,
  SwipeAction,
  WingBlank,
  WhiteSpace,
} from '@ant-design/react-native';
import public_css from '../../source/css/public_css';
import {ToastShow} from '../toast/toast';
import {IndividualStorageData, RetrieveData} from '../../data/storage';
import {RequestNetwork} from '../../data/encryption';

export default class select_user extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: this.props.route.params.type,
      user: [],
      userName: '',
    };
  }

  render() {
    return (
      <SafeAreaView style={[public_css.body, {backgroundColor: '#FCFCFC'}]}>
        <WhiteSpace />
        <WingBlank>
          <TouchableOpacity
            onPress={() => {
              this.addUser();
            }}
            style={{
              height: 40,
              backgroundColor: '#ffffff',
              justifyContent: 'center',
              alignItems: 'center',
              flexDirection: 'row',
              elevation: 10,
              shadowColor: 'black',
              shadowOffset: {width: 0, height: 0},
              shadowOpacity: 1,
              shadowRadius: 10,
            }}>
            <Image
              source={require('../../source/img/productImg/addIcon.png')}
              style={{height: 16, width: 16}}
            />
            <Text style={{marginLeft: 5, color: '#2A67FE'}}>添加开票员</Text>
          </TouchableOpacity>
        </WingBlank>
        <WhiteSpace />
        <ScrollView>
          {this.state.user.map((item) => {
            return (
              <SwipeAction
                autoClose
                style={{backgroundColor: 'transparent'}}
                right={this.right(item)}>
                <List.Item>
                  {item.isEdit === false ? (
                    <TouchableOpacity
                      onPress={() => this.selectUser(item)}
                      style={{
                        height: 40,
                        // flexDirection: 'row',
                        backgroundColor: '#ffffff',
                        justifyContent: 'center',
                        elevation: 10,
                        shadowColor: 'black',
                        shadowOffset: {width: 0, height: 0},
                        shadowOpacity: 1,
                        shadowRadius: 10,
                      }}>
                      <Text
                        style={{
                          color: '#333333',
                          fontSize: 16,
                          fontWeight: 'bold',
                          marginLeft: 15,
                        }}>
                        {item.name}{' '}
                      </Text>
                    </TouchableOpacity>
                  ) : (
                    <View
                      style={{
                        flexDirection: 'row',
                        justifyContent: 'center',
                        alignItems: 'center',
                        height: 40,
                        // flexDirection: 'row',
                        backgroundColor: '#ffffff',
                        elevation: 10,
                        shadowColor: 'black',
                        shadowOffset: {width: 0, height: 0},
                        shadowOpacity: 1,
                        shadowRadius: 10,
                      }}>
                      <View style={{flex: 1}}>
                        <TextInput
                          style={{
                            marginLeft: 15,
                            color: '#333333',
                            fontSize: 16,
                            fontWeight: 'bold',
                          }}
                          onChangeText={(value) => {
                            this.setState({
                              userName: value,
                            });
                          }}
                          value={this.state.userName}
                        />
                      </View>
                      <View>
                        <TouchableOpacity
                          style={{
                            height: 40,
                            width: 60,
                            alignItems: 'center',
                            justifyContent: 'center',
                          }}
                          onPress={() => {
                            this.userConfirm(item);
                          }}>
                          <Image
                            source={require('../../source/img/select.png')}
                            style={{height: 16, width: 16}}
                          />
                        </TouchableOpacity>
                      </View>
                    </View>
                  )}
                </List.Item>
              </SwipeAction>
            );
          })}
        </ScrollView>
      </SafeAreaView>
    );
  }

  //显示页面加载
  async componentDidMount(): void {
    let company = JSON.parse(await RetrieveData('company'));
    let users = '';
    if (this.state.type === 1) {
      users = company.payees;
    }
    if (this.state.type === 2) {
      users = company.reviewers;
    }
    if (this.state.type === 3) {
      users = company.drawers;
    }
    if (users != null || users !== '') {
      if (users.length > 0) {
        let list = users.split(',');
        let userList = list.map((_, i) => ({
          key: i,
          name: list[i],
          isEdit: false,
        }));
        this.setState({
          user: this.state.user.concat(userList),
          userName: '',
        });
      }
    }
  }

  //显示侧滑按钮
  right = (data) => [
    {
      text: '删除',
      onPress: () => {
        this.deleteData(data);
      },
      style: {backgroundColor: 'red', color: 'white'},
    },
  ];

  //删除用户信息
  deleteData = async (data) => {
    let listData = this.state.user;
    const prevIndex = listData.findIndex((item) => item.key === data.key);
    listData.splice(prevIndex, 1);
    let userList = listData.map((_, i) => ({
      key: i,
      name: listData[i].name,
      isEdit: false,
    }));
    this.setState({
      user: userList,
    });
    let user = '';
    if (this.state.user.length > 0) {
      this.state.user.map((item) => {
        user += item.name + ',';
      });
      user = user.substring(0, user.length - 1);
    }
    await this.updateCompany(user);
  };

  // 添加人员信息
  addUser = () => {
    let isEdit = false;
    this.state.user.map((item) => {
      isEdit = item.isEdit;
    });
    if (isEdit) {
      ToastShow(1, '存在编辑中的数据，请编辑完成后再添加人员信息!');
    } else {
      let user = {
        key: this.state.user.length,
        name: '',
        isEdit: true,
      };
      this.setState({
        user: this.state.user.concat(user),
      });
    }
  };

  // 人员信息确认
  userConfirm = async (data) => {
    let isRepeat = false;
    if (this.state.userName === '') {
      ToastShow(1, '请输入人员姓名!');
      return;
    }
    this.state.user.map((item) => {
      if (item.name === this.state.userName) {
        isRepeat = true;
      }
    });
    if (isRepeat) {
      ToastShow(1, '人员姓名已存在，请重新输入!');
      return;
    }
    data.name = this.state.userName;
    data.isEdit = false;
    this.setState({
      user: this.state.user,
      userName: '',
    });
    let user = '';
    let status = 0;
    if (this.state.user.length > 0) {
      this.state.user.map((item) => {
        if (item.isEdit) {
          status = 1;
        } else {
          user += item.name + ',';
        }
      });
      user = user.substring(0, user.length - 1);
    }
    if (status === 1) {
      ToastShow(1, '存在编辑中的数据，请编辑完成后再选择人员信息!');
    } else {
      await this.updateCompany(user);
    }
  };

  //提交用户信息
  selectUser = async (data) => {
    let status = 0;
    if (this.state.user.length > 0) {
      this.state.user.map((item) => {
        if (item.isEdit) {
          status = 1;
        }
      });
    }
    if (status === 1) {
      ToastShow(1, '存在编辑中的数据，请编辑完成后再选择人员信息!');
    } else {
      this.props.route.params.getUserInfo(this.state.type, data.name);
      this.props.navigation.goBack();
    }
  };

  // 更新企业收款人、开票人、审核人
  updateCompany = async (user) => {
    let company = JSON.parse(await RetrieveData('company'));
    const account = await RetrieveData('account');
    let type = this.state.type;
    let jason = {};
    if (type === 1) {
      jason = {
        entTaxId: company.entTaxId,
        entName: company.entName,
        entType: company.entType,
        payees: user,
        reqChannel: 3,
        mobile: account,
      };
    }
    if (type === 2) {
      jason = {
        entTaxId: company.entTaxId,
        entName: company.entName,
        entType: company.entType,
        reviewers: user,
        reqChannel: 3,
        mobile: account,
      };
    }
    if (type === 3) {
      jason = {
        entTaxId: company.entTaxId,
        entName: company.entName,
        entType: company.entType,
        drawers: user,
        reqChannel: 3,
        mobile: account,
      };
    }
    let token = await RetrieveData('token');
    if (token) {
      const url = '/sys/entInfo/updateBriefInfo';
      let response = await RequestNetwork(url, token, jason, false, 1);
      if (response) {
        if (response.code === 0) {
          if (type === 1) {
            company.payees = user;
          }
          if (type === 2) {
            company.reviewers = user;
          }
          if (type === 3) {
            company.drawers = user;
          }
          await IndividualStorageData('company', JSON.stringify(company));
        }
      }
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  item_text: {
    marginRight: 15,
    color: '#2ecc71',
  },
});