import React, {Component} from 'react';
import {
  View,
  Text,
  FlatList,
  RefreshControl,
  Alert,
  SafeAreaView, TouchableOpacity,
} from "react-native";
import { List, SearchBar, SwipeAction } from "@ant-design/react-native";

import {RetrieveData} from '../../../data/storage';
import {RequestNetwork} from '../../../data/encryption';
import public_css from '../../../source/css/public_css';
import {Footer} from '../../../components/listPage/pagination';
import {CleanAll} from '../../../components/abnormalMessage/abnormal_message';
import {ToastShow} from '../../../components/toast/toast';
import LinearGradient from "react-native-linear-gradient";
import Icon from "react-native-vector-icons/Ionicons";
import customer_css from "../customerInformation/customer_css";
import ActionButton from "react-native-action-button";

let pageNo = 1; //当前页码
let totalPage = 5; //总的页数
let pageSize = 10; //每页数量
export default class invoice_drawer extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      listData: [],
      productName: '',
      showFoot: 0, // 控制foot， 0：无数据  1：加载中   2 ：上拉加载
      isLoading: false,
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <View style={public_css.search}>
          <SearchBar
            placeholder="搜索"
            value={this.state.productName}
            onCancel={() => this.searchClear()}
            onChange={(value) => this.searchData(value)}
            showCancelButton={false}
            style={{borderRadius: 15}}
          />
        </View>
        <FlatList
          data={this.state.listData}
          renderItem={(item) => this.renderItem(item)}
          onRefresh={this.initData.bind(this)}
          refreshing={this.state.isLoading}
          refreshControl={
            <RefreshControl
              title={'加载中...'}
              colors={['#B7B7B7']} //此颜色无效
              tintColor={'#B7B7B7'}
              titleColor={'#B7B7B7'} //只有ios有效
              refreshing={this.state.isLoading}
              onRefresh={() => {
                this.initData();
              }}
            />
          }
          ListFooterComponent={() => Footer(this.state.showFoot)}
          onEndReached={() => this.onEndReached()}
          onEndReachedThreshold={0.1}
        />
        <ActionButton
          buttonColor="rgba(50,100,235,1)"
          onPress={() => {
            this.props.navigation.navigate('invoice_drawer_add_or_edit', {
              dataStatus: 0,
              refresh: () => {
                this.refresh();
              },
            });
          }}
          renderIcon={() => (
            <Icon name="md-add-outline" style={customer_css.actionButtonIcon} />
          )}
        />
      </SafeAreaView>
    );
  }

  //页面渲染完成后加载
  async componentDidMount(): void {
    pageNo = 1;
    this.setState({
      listData: [],
      productName: '',
      showFoot: 1,
    });
    await this.getUserList();
  }

  //搜索
  searchData = async (text) => {
    pageNo = 1;
    this.setState({
      listData: [],
      productName: text,
      showFoot: 0,
    });
    await this.getUserList();
  };

  //初始化数据
  initData = async () => {
    pageNo = 1;
    this.setState({
      listData: [],
      productName: '',
      showFoot: 1,
      isLoading: true,
    });
    await this.getUserList();
  };

  //清空搜索栏
  searchClear = async () => {
    await this.initData();
  };

  //获取产品列表
  getUserList = async () => {
    let token = await RetrieveData('token');
    let account = await RetrieveData('account');
    let company = JSON.parse(await RetrieveData('company'));
    if (token && account) {
      const url = '/auth/ent/user/findEntUserRoleInfo';
      let res = await RequestNetwork(
        url,
        token,
        {
          mobile: account,
          entTaxId: company.entTaxId,
          entUserMobile: this.state.productName,
          pageNum: pageNo,
          pageSize: pageSize,
        },
        false,
        2,
      );
      if (res) {
        if (res.code === 0) {
          totalPage = res.data.pages;
          this.setList(res.data.records);
        } else {
          this.setState({
            showFoot: 0,
          });
          await this.abnormalMessage(res);
        }
      }
    }
  };

  //加载产品列表
  setList = (data) => {
    let listDatas = data.map((_, i) => ({
      key: data[i].userId, //产品Id
      userMobile: data[i].userMobile,
      userName: data[i].userName,
      userEmail: data[i].userEmail,
      defaultChoose: data[i].defaultChoose,
      createTime: data[i].createTime,
      roleId: data[i].roleId,
      roleMemo: data[i].roleMemo,
      firstName: data[i].userName.charAt(0),
    }));
    let list = this.state.listData.concat(listDatas);
    if (list.length > 0) {
      this.setState({
        showFoot: 2,
        isLoading: false,
        listData: list,
      });
    } else {
      this.setState({
        showFoot: 0,
        isLoading: false,
        listData: list,
      });
    }
  };

  //加载列表item
  renderItem = (data) => (
    <SwipeAction
      autoClose
      style={{backgroundColor: 'transparent'}}>
      <List.Item
        onPress={() => {
          this.props.navigation.navigate('invoice_drawer_add_or_edit', {
            dataStatus: 1,
            data: data,
            refresh: () => {
              this.refresh();
            },
          });
        }}
        style={{display: 'flex', backgroundColor: '#F7F7F7'}}>
        <View style={{flex: 1, backgroundColor: '#ffffff', flexDirection: 'row', height: 70}}>
          <View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginLeft: 10}}>
            <View>
              <LinearGradient
                colors={['#2A67FE', '#4F81FA']}
                style={{width: 40, height: 40, justifyContent: 'center', alignItems: 'center', borderRadius: 40}}
                start={{x: 0.25, y: 0.25}}
                end={{x: 0.7, y: 0.7}}>
                <Text style={{color: '#FFFFFF', fontSize: 15}}>{data.item.firstName}</Text>
              </LinearGradient>
            </View>
            <View>
              <Text
                style={{
                  color: '#333333',
                  fontWeight: 'bold',
                  fontSize: 18,
                  marginLeft: 10,
                }}>
                {data.item.userName}
              </Text>
              <Text
                style={{
                  color: '#838383',
                  fontSize: 15,
                  marginLeft: 10,
                  marginTop: 5,
                }}>
                {data.item.userMobile}
              </Text>
            </View>
          </View>
          <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <View
              style={{
                alignItems: 'center',
                padding: 5,
                backgroundColor: '#E1E9FF',
                width: 105,
                height: 27,
                justifyContent: 'center',
                borderRadius: 99,
              }}>
              <Text style={{color: '#5284FF', fontSize: 14}}>{data.item.roleMemo}</Text>
            </View>
          </View>
        </View>
      </List.Item>
    </SwipeAction>
  );

  //列表上拉加载
  onEndReached = async () => {
    if (this.state.showFoot === 2) {
      if (pageNo >= totalPage) {
        this.setState({showFoot: 0});
        return;
      } else {
        pageNo++;
        this.setState({showFoot: 1});
        await this.getUserList();
      }
    }
  };

  // 刷新列表
  refresh = async () => {
    await this.initData();
  };

  // 处理网络请求数据
  abnormalMessage = async (jason) => {
    if (jason.code === 401) {
      await Alert.alert(
        '登录失效',
        '登录状态已失效，请重新登录！',
        [
          {
            text: '确定',
            onPress: () => {
              CleanAll();
              this.props.navigation.popToTop();
            },
          },
        ],
        {cancelable: false},
      );
    }
    if (jason.code === 403) {
      Alert.alert(
        '权限',
        '暂无权限操作此模块！',
        [
          {
            text: '确定',
            onPress: () => {
              this.props.navigation.goBack();
            },
          },
        ],
        {cancelable: false},
      );
    }
    if (jason.code !== 401 && jason.code !== 403) {
      ToastShow(1, jason.msg);
    }
  };
}