import React, {Component} from 'react';
import {StyleSheet, View, Text, DeviceEventEmitter, TouchableOpacity, ToastAndroid, StatusBar} from 'react-native';
import {FlatGrid} from 'react-native-super-grid';
import {Badge,} from "@ant-design/react-native";

import {createAction} from "../../utils";
import {connect} from 'react-redux'
import ReadUHF from "../../utils/ReadUHF";
@connect(home => ({...home}))
@connect(auth => ({...auth}))
class DesktopHome extends Component {
    constructor(props) {
        super(props);
        const {refreshState} = this.props.home
        this.state = {
            refreshState: refreshState,
        };
    }

    componentDidMount() {
        this._fetchData();
    }

    _fetchData = () => {
        // this.props.dispatch(createAction('auth/tokenRefresh')());
    }
    _logout = () => {
        this.props.dispatch(createAction('auth/logout')());
    }

    render() {
        const {list, refreshState} = this.props.home
        const {userData} = this.props.auth
        const items = [
            {
                "icon": "\ue600",
                "title": "出库",
                "key": "3_1",
                "stack": "DeliverHome",
                "type": "Deliver",

            },
            {
                "icon": "\ue601",
                "title": "退货",
                "key": "3_2",
                "stack": "ReturnHome",
                "type": "Return",
            }, {
                "icon": "\ue645",
                "title": "窜货查询",
                "key": "3_3",
                "stack": "SearchHome"
            },
            {
                "icon": "\ue600",
                "title": "射频出库",
                "key": "3_4",
                "stack": "UHFDeliver",
                "type": "Deliver",
            },
            {
                "icon": "\ue601",
                "title": "射频退货",
                "key": "3_5",
                "stack": "UHFReturn",
                "type": "Return",
            },
        ]
        return (
            <View style={styles.container}>

                <FlatGrid
                    style={styles.gridView}
                    itemDimension={120}
                    spacing={0}
                    items={items}
                    renderItem={({item}) => <ItemGrid name={item.title} icon={item.icon}
                                                      navigation={this.props.navigation} stack={item.stack} type={item.type}
                    />}
                />

                <View style={styles.userContainer}>
                    <Text style={styles.userImg}>{"\ue602"}</Text>

                    <View style={styles.userInfo}>
                        <Text style={styles.userInfoText}>账号：{userData.username}</Text>
                        <Text style={styles.userInfoText}>姓名：{userData.name}</Text>
                    </View>

                    <View style={styles.loginOut}>
                        <TouchableOpacity onPress={() => this._logout()}>
                            <Text style={styles.loginOutText}>注销登录</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    }
}

class ItemGrid extends Component {
    constructor(props) {
        super(props);
    }

    doPress=()=>{
        DeviceEventEmitter.emit("MsgFromAndroid", {msg:'aaaa'});
        ReadUHF.changeFlag(1)
        ReadUHF.doRead()
    }

    render() {
        return (
            <View style={styles.itemContainer}>
                <TouchableOpacity
                    onPress={() => this.props.navigation.navigate(this.props.stack,{type:this.props.type})}>
                    {/*onPress={() => this.doPress()}>*/}
                    <View>
                        <Badge text={this.props.tips} size='small'>
                            <Text style={styles.iconFont}>{this.props.icon}</Text>
                            <View>
                                <Text style={styles.sizeFont}>{this.props.name}</Text>
                            </View>
                        </Badge>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    userContainer: {
        height: 50,
        backgroundColor: '#7ff0ed',
        flexDirection: 'row',
    },
    userImg: {
        fontFamily: 'iconfont',
        color: '#fff',
        paddingLeft: 10,
        paddingTop: 5,
        fontSize: 35,
    },
    userInfo: {
        marginBottom: 5,
        paddingTop: 5,
        paddingLeft: 10,
        flex: 1
    },
    userInfoText: {
        color: '#fff',
    },
    loginOut: {
        flexDirection: 'row',
        width: 80,
        paddingTop: 15,
        justifyContent: 'center',
        backgroundColor: '#23d1ff'
    },
    loginOutText: {
        color: '#fff',
        fontSize: 16,
    },
    gridView: {
        marginTop: 0,
        flex: 0,
        padding: 0
    },
    itemContainer: {
        justifyContent: 'flex-end',
        padding: 20,
        alignItems: 'center',
        textAlign: 'center',
        borderRightWidth: 1,
        borderBottomWidth: 1,
        borderColor: '#eaeaea'
    },
    iconFont: {
        color: '#5eafe4',
        fontFamily: 'iconfont',
        fontSize: 30,
        textAlign: 'center',
        marginBottom: 5
    },
    sizeFont: {
        color: 'black',
        fontFamily: 'iconfont',
        fontSize: 12,
        textAlign: 'center',
        marginBottom: 5
    },
})

export default DesktopHome;