import React, {Component} from 'react';
import {
  View,
  Image,
  Text,
  FlatList,
  TextInput,
  TouchableOpacity,
  ScrollView,
  SafeAreaView,
  StyleSheet,
} from 'react-native';
import { List, SwipeAction, WhiteSpace, WingBlank } from "@ant-design/react-native";
import public_css from '../../../source/css/public_css';
import {ToastShow} from '../../../components/toast/toast';

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

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <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 ? (
                    <View
                      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>
                    </View>
                  ) : (
                    <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>
        <WingBlank>
          <View style={public_css.bottomStatus}>
            <TouchableOpacity
              style={[public_css.statusBtn, public_css.statusRBtn]}
              onPress={() => this.submitUsers()}>
              <Text style={{color: '#fff'}}>保存</Text>
            </TouchableOpacity>
          </View>
        </WingBlank>
        <WhiteSpace />
      </SafeAreaView>
    );
  }

  //显示页面加载
  async componentDidMount(): void {
    let users = this.props.route.params.data;
    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 = (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,
    });
  };

  // 添加人员信息
  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: '',
    });
  };

  //提交用户信息
  submitUsers = async () => {
    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 {
      this.props.route.params.getUserInfo(this.state.type, user);
      this.props.navigation.goBack();
    }
  };
}

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