import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    StatusBar,
    TouchableOpacity,
    Image,
    ScrollView,
    Platform,
} from 'react-native';

import {Button, Provider} from '@ant-design/react-native';
import {Cell, Section, TableView} from "react-native-tableview-simple"
import {Img} from "../../components";
import {createAction} from "../../utils";
import {connect} from 'react-redux'
import SyncStorage from "sync-storage";
import Bugly from "../../utils/Bugly";
import {ComponentsStyles} from "../../components/ComponentsStyles";

@connect(auth => ({...auth}))
class MineHome extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentPage: 1,
            version: '',
        };
    }

    static navigationOptions = {
        headerShown: false,  //隐藏顶部导航栏
    };

    componentDidMount() {
        Bugly.getVersion((ver) => {
            this.setState({
                version: ver
            })
        });
    }

    // 退出
    loginOut = () => {
        this.props.dispatch(createAction('auth/logout')());
    }
    onItemPress = (val) => {
        if (val === 'settingURL') {
            this.loginOut()
        } else {
            this.props.navigation.navigate(val)
        }
    }
    onCheckUpgrade = () => {
        Bugly.checkUpgrade();
    }

    render() {
        const credential = SyncStorage.get('credential');
        const baseURL = SyncStorage.get('baseURL');
        return (
            <View style={{flex: 1, marginTop: ComponentsStyles.top_margin}}>
                <StatusBar backgroundColor={'#f2f2f2'} barStyle='dark-content'/>
                <Provider>
                    <ScrollView>
                        {/* 头像 */}
                        <View style={styles.headImg}>
                            <Image style={styles.img} source={require('../../../assets/images/male_header.png')}>
                            </Image>
                        </View>
                        <View>
                            {/* 名字 */}
                            <Text style={{
                                color: '#333333',
                                fontSize: 22,
                                fontWeight: '900',
                                textAlign: "center"
                            }}>{credential.username}</Text>
                            <Text
                                style={{
                                    fontSize: 14,
                                    fontWeight: '900',
                                    textAlign: "center",
                                    marginTop: 5
                                }}>{credential.dept_name}</Text>
                            <Text
                                style={{
                                    fontSize: 14,
                                    fontWeight: '900',
                                    textAlign: "center",
                                    marginTop: 5
                                }}>{baseURL}</Text>
                        </View>
                        {/* 功能 */}
                        <TableView>
                            <Section sectionTintColor='#f2f2f2'>
                                <Cell
                                    accessory="DisclosureIndicator"
                                    cellStyle="RightDetail"
                                    title="APP下载"
                                    image={
                                        <Text style={styles.iconFont}>{'\ue603'}</Text>
                                    }
                                    onPress={() => this.onItemPress("Download")}
                                />
                                <Cell
                                    accessory="DisclosureIndicator"
                                    cellStyle="RightDetail"
                                    title="访问地址"
                                    image={
                                        <Text style={styles.iconFont}>{'\ue602'}</Text>
                                    }
                                    onPress={() => this.onItemPress("settingURL")}
                                />
                                <Cell
                                    accessory="DisclosureIndicator"
                                    cellStyle="RightDetail"
                                    title="修改密码"
                                    image={
                                        <Text style={styles.iconFont}>{'\ue60e'}</Text>
                                    }
                                    onPress={() => this.onItemPress("ChangePassword")}
                                />
                                <Cell
                                    accessory="DisclosureIndicator"
                                    cellStyle="RightDetail"
                                    title="隐私说明"
                                    image={
                                        <Text style={styles.iconFont}>{'\ue61c'}</Text>
                                    }
                                    onPress={() => this.onItemPress("Privacy")}
                                />
                                <Cell
                                    accessory="DisclosureIndicator"
                                    cellStyle="RightDetail"
                                    title="关于我们"
                                    image={
                                        <Text style={styles.iconFont}>{'\ue605'}</Text>
                                    }
                                    onPress={() => this.onItemPress("About")}
                                />
                                {Platform.OS === 'ios' ?
                                    <Cell
                                        cellStyle="RightDetail"
                                        title="当前版本"
                                        detail={this.state.version}
                                        image={
                                            <Text style={styles.iconFont}>{'\ue6aa'}</Text>
                                        }
                                    />
                                    :
                                    <Cell
                                        cellStyle="RightDetail"
                                        title="检查更新"
                                        detail={`当前版本:${this.state.version}`}
                                        onPress={this.onCheckUpgrade}
                                        image={
                                            <Text style={styles.iconFont}>{'\ue6aa'}</Text>
                                        }
                                    />
                                }

                            </Section>
                        </TableView>
                        {/* 退出登录 */}
                        <Button onPress={this.loginOut} style={styles.button} type="warning">退出登录</Button>
                    </ScrollView>
                </Provider>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    centerView: {
        width: 3,
        backgroundColor: '#d7d7d7',
        borderRadius: 3,
        justifyContent: 'center',
    },
    headImg: {
        flexDirection: 'row',
        justifyContent: 'center',
    },
    img: {
        width: 70,
        height: 70,
        marginVertical: 20,
        borderRadius: 50,
    },
    iconFont: {
        fontFamily: 'iconfont',
        fontSize: 20,
        color: '#1E90FF',
        lineHeight: 30
    },
    button: {
        marginHorizontal: 10,
    },
})

export default MineHome;