import React, {Component} from 'react';
import {
  Image,
  Text,
  View,
  TouchableOpacity,
  DeviceEventEmitter,
  Alert,
} from 'react-native';

import personal_center_page_css from './personal_center_page_css';
import public_css from '../../source/css/public_css';
import {RetrieveData, ClearAll} from '../../data/storage';
import Spinner from 'react-native-loading-spinner-overlay';
import loading_css from '../../source/css/loading_css';
import {GetDataPost, GetNetworkUrl} from '../../data/encryption';

export default class personal_center_page extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user_name: '',
      user_type: '',
      spinner: false,
      user: '',
    };
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <Spinner
          visible={this.state.spinner}
          textContent={'Loading...'}
          textStyle={loading_css.spinnerTextStyle}
        />
        <View style={{backgroundColor: '#ffffff', flex: 1}}>
          <View
            style={{
              height: 200,
              backgroundColor: '#0A81CF',
              position: 'relative',
              borderBottomLeftRadius: 600,
              borderBottomRightRadius: 600,
              alignItems: 'center',
            }}>
            <Image
              source={require('../../source/img/personal/head.png')}
              style={{height: 200, width: 200}}
            />
          </View>
          <View
            style={{
              alignItems: 'center',
              top: -70,
              zIndex: 100,
            }}>
            {this.state.user == '' || this.state.user == null ? (
              <Image
                source={require('../../source/img/personal/headImg.png')}
                style={[
                  personal_center_page_css.headImg,
                  {position: 'absolute'},
                ]}
              />
            ) : (
              <Image
                source={{
                  uri: GetNetworkUrl() + this.state.user.avatar,
                }}
                style={[
                  personal_center_page_css.headImg,
                  {position: 'absolute'},
                ]}
              />
            )}
          </View>
          {this.state.user_name === '' ? (
            <View style={[personal_center_page_css.headStyle]}>
              <TouchableOpacity
                onPress={() => this.props.navigation.navigate('login_head')}>
                <Text>登录</Text>
              </TouchableOpacity>
            </View>
          ) : (
            <View style={[personal_center_page_css.headStyle]}>
              <Text style={{fontSize: 18}}>{this.state.user_name}</Text>
            </View>
          )}
        </View>
        <View style={{flex: 1}}>
          <View>
            <TouchableOpacity
              onPress={() => this.getLandingStatus(1)}
              style={personal_center_page_css.textListStyle}>
              <Text style={personal_center_page_css.textListFontStyle}>
                个人信息
              </Text>
            </TouchableOpacity>
          </View>
          {this.state.user_name === '' ? (
            <View />
          ) : (
            <View style={public_css.buttonView}>
              <TouchableOpacity
                style={public_css.button}
                onPress={() => this.showAlert()}>
                <Text style={public_css.buttonText}>退出登录</Text>
              </TouchableOpacity>
            </View>
          )}
        </View>
        {/*<View>*/}
        {/*  <TouchableOpacity*/}
        {/*    onPress={() => this.getLandingStatus(2)}*/}
        {/*    style={personal_center_page_css.textListStyle}>*/}
        {/*    <Text style={personal_center_page_css.textListFontStyle}>*/}
        {/*      客户信息*/}
        {/*    </Text>*/}
        {/*  </TouchableOpacity>*/}
        {/*</View>*/}
        {/*<View>*/}
        {/*  <TouchableOpacity*/}
        {/*    onPress={() => this.getLandingStatus(3)}*/}
        {/*    style={personal_center_page_css.textListStyle}>*/}
        {/*    <Text style={personal_center_page_css.textListFontStyle}>*/}
        {/*      企业信息*/}
        {/*    </Text>*/}
        {/*  </TouchableOpacity>*/}
        {/*</View>*/}
      </View>
    );
  }

  //页面加载获取信息
  componentDidMount(): void {
    this.getSignIn();
  }

  //获取登录信息
  getSignIn = async () => {
    let user_name = await RetrieveData('userName');
    let user_type = await RetrieveData('usertype');
    let token = await RetrieveData('token');
    let account = await RetrieveData('account');
    if (user_name && user_type && token && account) {
      user_name = user_name.substring(1, user_name.length - 1);
      account = account.substring(1, account.length - 1);
      token = token.substring(1, token.length - 1);
      this.setState({
        user_name: user_name,
        user_type: user_type,
      });
      this.getUserInformation(account, token);
    }
  };

  //获取用户信息
  getUserInformation = async (account, token) => {
    const url = '/auth/comm/user/personalInfo/find';
    let response = await GetDataPost(
      url,
      token,
      {
        mobile: account,
      },
      false,
      2,
    );
    if (response) {
      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');
  };

  //显示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,
        });
      }
      // if (type == 2) {
      //   this.props.navigation.navigate('customer_information');
      // }
      // if (type == 3) {
      //   this.props.navigation.navigate('enterprise_list');
      // }
    } else {
      this.props.navigation.navigate('login_head');
    }
  };

  //显示红冲确认信息
  showAlert = () => {
    Alert.alert(
      '退出登录',
      '确定要退出登录吗！',
      [
        {
          text: '取消',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {text: '确定', onPress: () => this.signOut()},
      ],
      {cancelable: false},
    );
  };
}