import React, {Component} from 'react';
import {
  Image,
  Text,
  View,
  TouchableOpacity,
  DeviceEventEmitter,
  Alert,
  SafeAreaView,
  ScrollView,
  Linking,
} from 'react-native';
import {WhiteSpace, WingBlank, List, Modal} from '@ant-design/react-native';
import personal_center_css from './personal_center_css';
import public_css from '../../source/css/public_css';
import {
  RetrieveData,
  ClearAll,
  IndividualStorageData,
} from '../../data/storage';
import Spinner from 'react-native-loading-spinner-overlay';
import loading_css from '../../source/css/loading_css';
import {RequestNetwork} from '../../data/encryption';
import LinearGradient from 'react-native-linear-gradient';
import {GetMonthDate} from '../../utils/date';
import {ToastShow} from '../../components/toast/toast';
import FastImage from 'react-native-fast-image';
import { CleanAll } from "../../components/abnormalMessage/abnormal_message";

const Item = List.Item;

export default class personal_center extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: '',
      userType: '',
      spinner: false,
      user: '',
      loginText: '点击登录',
      infoText: '立即登陆体验完整功能',
      telPhone: 'tel:0871-63193319',
      headImage: '',
      sex: '',
      invoiceNumber: '——',
      companyNumber: '——',
      messageNumber: '——',
      lastLoginDate: '——',
      membershipStatus: '请登录查看您的会员状态',
      isShowText: '展开',
      isShow: false,
      productList: [],
      productNumber: 0,
      isShowMore: false,
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <ScrollView style={{flex: 1}}>
          <View
            style={{
              height: 130,
              justifyContent: 'center',
              backgroundColor: '#F4F7FC',
            }}>
            <View style={{height: 100, flexDirection: 'row'}}>
              {this.state.headImage === '' || this.state.headImage === null ? (
                this.state.sex === 'F' ? (
                  <View
                    style={{
                      justifyContent: 'center',
                    }}>
                    <Image
                      source={require('../../source/img/personal/woman.png')}
                      style={[personal_center_css.headImg]}
                    />
                  </View>
                ) : (
                  <View
                    style={{
                      justifyContent: 'center',
                    }}>
                    <Image
                      source={require('../../source/img/personal/man.png')}
                      style={[personal_center_css.headImg]}
                    />
                  </View>
                )
              ) : (
                <View
                  style={{
                    justifyContent: 'center',
                  }}>
                  <Image
                    source={{uri: this.state.headImage}}
                    style={[personal_center_css.headImg]}
                  />
                </View>
              )}
              <View>
                {this.state.userName === '' ? (
                  <View style={{flex: 1, justifyContent: 'center'}}>
                    <TouchableOpacity
                      onPress={() =>
                        this.props.navigation.navigate('login', {
                          refresh: (type) => {
                            this.refresh(type);
                          },
                        })
                      }>
                      <Text
                        style={{
                          color: '#06090E',
                          fontSize: 20,
                          fontWeight: 'bold',
                        }}>
                        {this.state.loginText}
                      </Text>
                    </TouchableOpacity>
                  </View>
                ) : (
                  <View style={{flex: 1, justifyContent: 'center'}}>
                    <Text
                      style={{
                        color: '#06090E',
                        fontSize: 20,
                        fontWeight: 'bold',
                      }}>
                      {this.state.userName}
                    </Text>
                  </View>
                )}
                {this.state.userName === '' ? (
                  <View style={{flex: 1}}>
                    <Text style={{color: '#06090E', fontSize: 15}}>
                      {this.state.infoText}
                    </Text>
                  </View>
                ) : (
                  <View style={{flex: 1}}>
                    <TouchableOpacity onPress={() => this.getLandingStatus(1)}>
                      <Text style={{color: '#06090E', fontSize: 15}}>
                        {this.state.infoText}
                      </Text>
                    </TouchableOpacity>
                  </View>
                )}
              </View>
            </View>
          </View>
          <WingBlank>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-around',
                height: 50,
              }}>
              <View style={{justifyContent: 'center', alignItems: 'center'}}>
                <Text style={{color: '#01020F', fontSize: 20}}>
                  {this.state.invoiceNumber}
                </Text>
                <Text style={{color: '#787B84'}}>本月正数开具</Text>
              </View>
              <View
                style={{
                  borderWidth: 0.5,
                  height: 30,
                  borderColor: '#D9D9D9',
                  marginTop: 10,
                }}
              />
              <View style={{justifyContent: 'center', alignItems: 'center'}}>
                <Text style={{color: '#01020F', fontSize: 20}}>
                  {this.state.companyNumber}
                </Text>
                <Text style={{color: '#787B84'}}>绑定企业</Text>
              </View>
              <View
                style={{
                  borderWidth: 0.5,
                  height: 30,
                  borderColor: '#D9D9D9',
                  marginTop: 10,
                }}
              />
              <View style={{justifyContent: 'center', alignItems: 'center'}}>
                <Text style={{color: '#01020F', fontSize: 20}}>
                  {this.state.messageNumber}
                </Text>
                <Text style={{color: '#787B84'}}>短信剩余</Text>
              </View>
              {/*<View*/}
              {/*  style={{*/}
              {/*    borderWidth: 0.5,*/}
              {/*    height: 30,*/}
              {/*    borderColor: '#D9D9D9',*/}
              {/*    marginTop: 10,*/}
              {/*  }}*/}
              {/*/>*/}
              {/*<View style={{justifyContent: 'center', alignItems: 'center'}}>*/}
              {/*  <Text style={{color: '#01020F', fontSize: 20}}>*/}
              {/*    {this.state.lastLoginDate}*/}
              {/*  </Text>*/}
              {/*  <Text style={{color: '#787B84'}}>上次登录</Text>*/}
              {/*</View>*/}
            </View>
          </WingBlank>
          <WingBlank>
            {/*<View*/}
            {/*  style={{*/}
            {/*    // height: 90,*/}
            {/*    backgroundColor: '#2A2C44',*/}
            {/*    marginTop: 10,*/}
            {/*  }}>*/}
            {/*  <View style={{height: 40, flexDirection: 'row'}}>*/}
            {/*    <View style={{flex: 1}}>*/}
            {/*      <Text*/}
            {/*        style={{*/}
            {/*          color: '#EAC47D',*/}
            {/*          fontSize: 16,*/}
            {/*          marginLeft: 11.5,*/}
            {/*          marginTop: 8.5,*/}
            {/*          fontWeight: 'bold',*/}
            {/*        }}>*/}
            {/*        报税旗舰版*/}
            {/*      </Text>*/}
            {/*    </View>*/}
            {/*    <View style={{width: 100, alignItems: 'flex-end'}}>*/}
            {/*      <TouchableOpacity*/}
            {/*        style={{marginTop: 8.5}}*/}
            {/*        onPress={() => {*/}
            {/*          this.getLandingStatus(3);*/}
            {/*        }}>*/}
            {/*        <LinearGradient*/}
            {/*          colors={['#F6DDB5', '#EABC78']}*/}
            {/*          style={{*/}
            {/*            height: 24,*/}
            {/*            width: 70,*/}
            {/*            borderBottomLeftRadius: 99,*/}
            {/*            borderTopLeftRadius: 99,*/}
            {/*            justifyContent: 'center',*/}
            {/*          }}*/}
            {/*          start={{x: 0.25, y: 0.25}}*/}
            {/*          end={{x: 0.7, y: 0.7}}>*/}
            {/*          <Text style={{textAlign: 'center'}}>产品调整</Text>*/}
            {/*        </LinearGradient>*/}
            {/*      </TouchableOpacity>*/}
            {/*    </View>*/}
            {/*  </View>*/}
            {/*  <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>*/}
            {/*    {this.state.productList.map((item) => {*/}
            {/*      return (*/}
            {/*        <View*/}
            {/*          style={{*/}
            {/*            flexDirection: 'row',*/}
            {/*            justifyContent: 'center',*/}
            {/*            alignItems: 'center',*/}
            {/*            marginLeft: 10,*/}
            {/*            marginRight: 10,*/}
            {/*            marginTop: 10,*/}
            {/*            marginBottom: 5,*/}
            {/*          }}>*/}
            {/*          <View style={{marginLeft: 5}}>*/}
            {/*            <Image*/}
            {/*              style={{width: 44, height: 44}}*/}
            {/*              source={{uri: item.img}}*/}
            {/*              resizeMode="cover"*/}
            {/*            />*/}
            {/*          </View>*/}
            {/*          <View style={{marginLeft: 5}}>*/}
            {/*            <Text style={{color: '#EABC78'}}>{item.title}</Text>*/}
            {/*            <Text style={{color: '#ffffff'}}>{item.data}</Text>*/}
            {/*          </View>*/}
            {/*        </View>*/}
            {/*      );*/}
            {/*    })}*/}
            {/*  </View>*/}
            {/*  {this.state.isShowMore === true ? (*/}
            {/*    <View*/}
            {/*      style={{*/}
            {/*        borderTopWidth: 0.5,*/}
            {/*        borderColor: '#707070',*/}
            {/*        marginLeft: 5.5,*/}
            {/*        marginRight: 5.5,*/}
            {/*        justifyContent: 'center',*/}
            {/*        // alignItems: 'center',*/}
            {/*        height: 29.5,*/}
            {/*        marginTop: 10,*/}
            {/*      }}>*/}
            {/*      <TouchableOpacity*/}
            {/*        style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}*/}
            {/*        onPress={() => {*/}
            {/*          this.showProductInfo();*/}
            {/*        }}>*/}
            {/*        <Text*/}
            {/*          style={{*/}
            {/*            color: '#EDBE75',*/}
            {/*            fontWeight: 'bold',*/}
            {/*            fontSize: 13,*/}
            {/*          }}>*/}
            {/*          {this.state.isShowText}*/}
            {/*        </Text>*/}
            {/*        {this.state.isShow === true ? (*/}
            {/*          <Image*/}
            {/*            source={require('../../source/img/personal/up.png')}*/}
            {/*            style={{*/}
            {/*              width: 6.8,*/}
            {/*              height: 9.93,*/}
            {/*              marginLeft: 5,*/}
            {/*            }}*/}
            {/*          />*/}
            {/*        ) : (*/}
            {/*          <Image*/}
            {/*            source={require('../../source/img/personal/down.png')}*/}
            {/*            style={{*/}
            {/*              width: 6.8,*/}
            {/*              height: 9.93,*/}
            {/*              marginLeft: 5,*/}
            {/*            }}*/}
            {/*          />*/}
            {/*        )}*/}
            {/*      </TouchableOpacity>*/}
            {/*    </View>*/}
            {/*  ) : (*/}
            {/*    <View />*/}
            {/*  )}*/}
            {/*</View>*/}
          </WingBlank>
          <List style={{top: 10}}>
            <Item
              arrow="horizontal"
              onPress={() => {
                this.getLandingStatus(2);
              }}>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Image
                  source={require('../../source/img/svg/enterprise.png')}
                />
                <Text style={{marginLeft: 5}}>绑定企业</Text>
              </View>
            </Item>
            <Item
              arrow="horizontal"
              onPress={() => {
                this.contactService();
              }}>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Image source={require('../../source/img/svg/customer.png')} />
                <Text style={{marginLeft: 5}}>联系客服</Text>
              </View>
            </Item>
            <Item
              arrow="horizontal"
              onPress={() => {
                this.props.navigation.navigate('about');
              }}>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Image source={require('../../source/img/svg/about.png')} />
                <Text style={{marginLeft: 5}}>关于</Text>
              </View>
            </Item>
            <Item
              arrow="horizontal"
              onPress={() => {
                this.props.navigation.navigate('set', {
                  refresh: (type) => {
                    this.refresh(type);
                  },
                });
              }}>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Image source={require('../../source/img/svg/set.png')} />
                <Text style={{marginLeft: 5}}>设置</Text>
              </View>
            </Item>
            <Item />
          </List>
        </ScrollView>
      </SafeAreaView>
    );
  }

  //页面加载获取信息
  async componentDidMount(): void {
    await this.getSignIn();
    // 收到监听
    this.listener = DeviceEventEmitter.addListener(
      'updateLoginInfo',
      message => {
        // 收到监听后想做的事情 // 监听
        this.refresh(message);
      },
    );

    // 收到监听
    this.listenerPersonal = DeviceEventEmitter.addListener(
      'updatePersonal',
      (message) => {
        // 收到监听后想做的事情 // 监听
        this.refresh(message);
      },
    );
  }

  componentWillUnmount() {
    // 移除监听
    if (this.listener) {
      this.listener.remove();
    }
    if (this.listenerPersonal) {
      this.listenerPersonal.remove();
    }
  }

  refresh = async (type) => {
    if (type) {
      await this.getSignIn();
    } else {
      this.setState({
        userName: '',
        userType: '',
        user: '',
        loginText: '点击登录',
        infoText: '立即登陆体验完整功能',
        headImage: '',
        sex: '',
        invoiceNumber: '——',
        companyNumber: '——',
        messageNumber: '——',
        lastLoginDate: '——',
        membershipStatus: '请登录查看您的会员状态',
        isShowText: '展开',
        isShow: false,
        productList: [],
        productNumber: 0,
        isShowMore: false,
      });
      this.props.navigation.setOptions({
        headerTitle: '会员中心',
      });
    }
  };

  //获取登录信息
  getSignIn = async () => {
    let title = '会员中心';
    let company = await RetrieveData('company');
    if (company) {
      company = JSON.parse(company);
      title = company.entName;
    }
    this.props.navigation.setOptions({
      headerTitle: title,
    });
    let userHeadImg = JSON.parse(await RetrieveData('userHeadImg'));
    let userName = await RetrieveData('userName');
    let userType = await RetrieveData('usertype');
    let token = await RetrieveData('token');
    let account = await RetrieveData('account');
    if (userName && userType && token && account) {
      this.setState({
        userName: userName,
        userType: userType,
        infoText: '查看或编辑个人资料 >',
        membershipStatus: '您的服务到剩余日期：--天',
      });
      await this.getUserInformation(account, token);
      await this.getCompanyList();
      await this.getMessageNumber();
      await this.getInvoiceNumber();
      await this.getProductList();
    }
    if (userHeadImg) {
      this.setState({
        headImage: userHeadImg.headImage,
        sex: userHeadImg.sex,
      });
    } else {
      this.setState({
        headImage: '',
        sex: '',
      });
    }
  };

  //获取用户信息
  getUserInformation = async (account, token) => {
    const url = '/auth/comm/user/personalInfo/find';
    let response = await RequestNetwork(
      url,
      token,
      {
        mobile: account,
      },
      false,
      2,
    );
    if (response) {
      if (response.code === 0) {
        console.log(response);
        await IndividualStorageData('userInfo', JSON.stringify(response.data));
        this.setState({
          user: response.data,
        });
      }
    }
  };

  //退出登录
  signOut = async () => {
    this.setLoadingStatus(true);
    await ClearAll();
    this.setLoadingStatus(false);
    DeviceEventEmitter.emit('updateCurMon', null);
    this.props.navigation.navigate('home_navigation');
  };

  // 联系客服
  contactService = () => {
    Modal.alert('提示', '0871-63193319', [
      {
        text: '取消',
        onPress: () => console.log('cancel'),
        style: 'cancel',
      },
      {
        text: '确认',
        onPress: () => {
          Linking.canOpenURL(this.state.telPhone)
            .then((supported) => {
              if (!supported) {
                console.log('Can not handle tel: ' + this.state.telPhone);
              } else {
                return Linking.openURL(this.state.telPhone);
              }
            })
            .catch((error) => console.log('tel error', error));
        },
      },
    ]);
  };

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

  //判断是否登录
  getLandingStatus = async (type) => {
    const account = await RetrieveData('account');
    if (account) {
      if (type === 1) {
        this.props.navigation.navigate('personal_information', {
          user: this.state.user,
          refresh: type => {
            this.refresh(type);
          },
        });
      }
      if (type === 2) {
        this.props.navigation.navigate('enterprise_list');
      }
      if (type === 3) {
        this.props.navigation.navigate('service_handle');
      }
    } else {
      this.props.navigation.navigate('login');
    }
  };

  //获取企业数据
  getCompanyList = async () => {
    const entInfo = JSON.parse(await RetrieveData('company'));
    this.setState({entItem: entInfo});
    const token = await RetrieveData('token');
    const account = await RetrieveData('account');
    if (token && account) {
      const url = '/auth/ent/user/findManageInfoByMobile';
      let response = await RequestNetwork(
        url,
        token,
        {
          entUserMobile: account,
          pageNum: 1,
          pageSize: 10,
        },
        false,
        2,
      );
      if (response) {
        if (response.code === 0) {
          this.setState({
            companyNumber: response.data.total,
          });
        } else {
          await this.abnormalMessage(response);
        }
      }
    }
  };

  //获取短信数量
  getMessageNumber = async () => {
    let company = JSON.parse(await RetrieveData('company'));
    let token = await RetrieveData('token');
    if (token && company) {
      const url = '/marketing/ent/features/findPage';
      let res = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
          featureId: 'F0000001',
          featureName: '短信服务',
          pageNum: 1,
          pageSize: 10,
        },
        false,
        2,
      );
      if (res) {
        if (res.code === 0) {
          res.data.records.map((item) => {
            if (item.featureId === 'F0000001') {
              this.setState({
                messageNumber: parseFloat(item.surplus),
              });
            }
          });
        } else {
          await this.abnormalMessage(res);
        }
      }
    }
  };

  //获取发票数量统计
  getInvoiceNumber = async () => {
    let company = await RetrieveData('company');
    if (company) {
      company = JSON.parse(company);
    }
    const token = await RetrieveData('token');
    const account = await RetrieveData('account');
    if (token && company) {
      let date = GetMonthDate();
      const url = '/sys/invoiceExt/reports';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
          deviceType: company.defaultDeviceInfo.deviceType,
          taxDiscId: company.defaultDeviceInfo.taxDiscId,
          mobile: account,
          invoiceDateBegin: date.startDateTime,
          invoiceDateEnd: date.endDateTime,
          reqChannel: 3,
        },
        false,
        2,
      );
      if (response) {
        if (response.code === 0) {
          this.setState({
            invoiceNumber: response.data.blueInvoiceCnt,
          });
        } else {
          await this.abnormalMessage(response);
        }
      }
    }
  };

  // 产品信息展示状态变更
  showProductInfo = () => {
    if (this.state.isShow) {
      this.setState({
        isShow: false,
        isShowText: '展开',
      });
    } else {
      this.setState({
        isShow: true,
        isShowText: '收起',
      });
    }
  };

  //获取最近一次登录时间
  getLastLoginDate = async () => {
    const account = await RetrieveData('account');
    let token = await RetrieveData('token');
    console.log(123);
    console.log(account);
    if (token) {
      const url = '/auth/log/findPage';
      let res = await RequestNetwork(
        url,
        token,
        {
          mobile: account,
          opType: '用户登录',
          pageNum: 1,
          pageSize: 2,
        },
        false,
        2,
      );
      if (res) {
        if (res.code === 0) {
          console.log('登录信息');
          console.log(res);
          // res.data.records.map((item) => {
          //   if (item.featureId === 'F0000001') {
          //     this.messageNumber = parseFloat(item.surplus);
          //   }
          // });
        } else {
          await this.abnormalMessage(res);
        }
      }
    }
  };

  // 获取已开通产品列表
  getProductList = async () => {
    let company = await RetrieveData('company');
    if (company) {
      company = JSON.parse(company);
    }
    let token = await RetrieveData('token');
    if (token && company) {
      const url = '/marketing/ent/features/findPage';
      let res = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
        },
        false,
        2,
      );
      if (res) {
        if (res.code === 0) {
          let isShow = false;
          if (res.data.total > 2) {
            isShow = true;
          } else {
            isShow = false;
          }
          let list = [];
          res.data.records.map((item) => {
            let title: '';
            let data = '';
            if (item.limitType === '1') {
              title = item.featureName + '到期时间';
              data = item.endDate;
            }
            if (item.limitType === '2') {
              title = item.featureName + '剩余数量';
              if (item.surplus) {
                data = parseInt(item.surplus).toString() + '条';
              } else {
                data = 0;
              }
            }
            let productList = {
              title: title,
              data: data,
              img: item.featureImgUrl,
            };
            list = list.concat(productList);
          });
          this.setState({
            productList: list,
            productNumber: res.data.total,
            isShowMore: isShow,
          });
        } else {
          await this.abnormalMessage(res);
        }
      }
    }
  };

  // 处理网络请求数据
  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);
    }
  };
}