import React, {Component} from 'react';
import {
  Image,
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  SafeAreaView,
  DeviceEventEmitter,
  Dimensions,
} from 'react-native';
import {WingBlank, WhiteSpace} from '@ant-design/react-native';
import public_css from '../../source/css/public_css';
import {RetrieveData} from '../../data/storage';
import LinearGradient from 'react-native-linear-gradient';

export default class configure extends Component {
  constructor(props) {
    super(props);
    this.state = {
      authority: '',
      landingStatus: 0, //登录状态，0：表示未登录,1：表示已登录
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <ScrollView style={{backgroundColor: '#F2F1F7'}}>
          <View style={styles.img_con}>
            <LinearGradient
              colors={['#628FFC', '#2965FA']}
              style={{
                height: '100%',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Image
                style={styles.bg_img}
                source={require('../../source/img/set/set_bg.png')}
                resizeMode="cover"
              />
            </LinearGradient>
          </View>
          <View style={styles.bottom_con}>
            <View style={styles.nav_con}>
              <TouchableOpacity
                style={styles.nav_item}
                activeOpacity={1}
                onPress={() => {
                  this.getLandingStatus(1);
                }}>
                <Image
                  style={styles.icon}
                  source={require('../../source/img/set/icon1.png')}
                  resizeMode="contain"
                />
                <Text style={styles.text}>客户管理</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.nav_item}
                activeOpacity={1}
                onPress={() => {
                  this.getLandingStatus(2);
                }}>
                <Image
                  style={styles.icon}
                  source={require('../../source/img/set/icon2.png')}
                  resizeMode="contain"
                />
                <Text style={styles.text}>商品管理</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.nav_con}>
              <TouchableOpacity
                style={styles.nav_item}
                activeOpacity={1}
                onPress={() => {
                  this.getLandingStatus(3);
                }}>
                <Image
                  style={styles.icon}
                  source={require('../../source/img/set/icon3.png')}
                  resizeMode="contain"
                />
                <Text style={styles.text}>开票员管理</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.nav_item}
                activeOpacity={1}
                onPress={() => {
                  this.getLandingStatus(4);
                }}>
                <Image
                  style={styles.icon}
                  source={require('../../source/img/set/icon4.png')}
                  resizeMode="contain"
                />
                <Text style={styles.text}>企业信息配置</Text>
              </TouchableOpacity>
            </View>
          </View>
          <View style={{height: 30}}></View>
        </ScrollView>
      </SafeAreaView>
    );
  }

  //加载数据
  componentDidMount() {
    this.getAuthority();
  }

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

  refresh = async (type) => {
    DeviceEventEmitter.emit('updateLoginInfo', type);
    DeviceEventEmitter.emit('updateCompany', null);
  };

  //获取权限信息
  getAuthority = async () => {
    const authority = await RetrieveData('authority');
    if (authority) {
      this.setState({
        authority: authority,
        landingStatus: 1,
      });
    }
  };
}
const windowWidth = Dimensions.get('window').width;
const styles = StyleSheet.create({
  tapBtnBakCol: {
    flexDirection: 'column',
    alignItems: 'center',
  },
  tapBtnImg: {
    width: 49,
    height: 49,
  },
  tapBtnTips: {
    marginTop: 10,
    color: '#757374',
  },
  img_con: {
    borderBottomLeftRadius: 30,
    overflow: 'hidden',
    height: 280,
  },
  bg_img: {
    width: 335,
    height: 150,
  },
  bottom_con: {
    width: '100%',
    marginTop: -20,
  },
  nav_con: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  nav_item: {
    width: 150,
    height: 180,
    backgroundColor: '#FFF',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 20,
  },
  icon: {
    width: 65,
    height: 65,
  },
  text: {
    fontSize: 13,
    color: '#454545',
    marginTop: 15,
  },
});