import React, {Component} from 'react';
import {StyleSheet, View, Text, DeviceEventEmitter, TouchableOpacity, ToastAndroid, Dimensions} from 'react-native';
import {Button} from '@ant-design/react-native';
import ReadUHF from "../../utils/ReadUHF";
import {ComponentsStyles} from "../../components"
import Barcode from "react-native-barcode-builder";

let screenW = Dimensions.get('window').width;

class DesktopHome extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            userData: [],
            isStart: true,
        };
    }

    componentDidMount() {
        ReadUHF.changeFlag(1)
        DeviceEventEmitter.addListener('MsgFromAndroid', this._addCode);
        DeviceEventEmitter.addListener('onKeyDown', this.onKeyDown);
    }

    componentWillUnmount() {
        ReadUHF.stopRead()
    }

    _addCode = (item) => {
        const str = JSON.parse(item)
        // 防止重复扫描
        let {data, userData} = this.state;
        const product_index = userData.indexOf(str['userData'])
        if (product_index < 0) {
            userData.push(str['userData'])
            data.push(str)
            this.setState({data, userData})
        }
    }
    _start = () => {
        let {isStart} = this.state;
        ReadUHF.doRead()
        this.setState({isStart: !isStart})
    }
    onKeyDown = () => {
        let {isStart} = this.state;
        this.setState({isStart: !isStart})
    }

    dianYaRender = (item, index) => {
        const assetID = item.assetID.slice(7, 21)
        const districtText = item.districtText.split('-')[0]
        return (
            <View
                key={index}
                style={styles.mainView}
            >
                <Text style={styles.textColor}>计量{item.kind}</Text>
                <View style={styles.betweenView}>
                    <Text style={styles.textColor3}>型号：{item.model}</Text>
                    <View style={styles.centerWidth}>
                        <Text style={styles.textColor3}>电压等级：{item.voltageLevel}</Text>
                    </View>
                    <Text style={styles.textColor3}>绕组数量：{item.secondWindingCount}</Text>
                </View>
                <View style={styles.betweenView}>
                    <Text style={styles.textColor3}>二次电压</Text>
                    <View style={styles.centerWidth}>
                        <Text style={styles.textColor3}>准确等级</Text>
                    </View>
                    <Text style={styles.textColor3}>生产日期</Text>
                </View>
                <View style={styles.betweenView}>
                    <Text style={styles.textColor3}>{item.secondVoltage}</Text>
                    <View style={styles.centerWidth}>
                        <Text style={styles.textColor3}>{item.accuracy}</Text>
                    </View>
                    <Text style={styles.textColor3}>{item.releaseDate}</Text>
                </View>
                <View style={styles.betweenView}>
                    <Text style={styles.textColor3}>安装场所：{item.place}</Text>
                    <View style={styles.centerWidth}>
                        <Text style={styles.textColor3}>额定负荷：{item.ratedLoad}</Text>
                    </View>
                    <Text style={styles.textColor3}>电压因数：{item.voltageFactor}</Text>
                </View>
                <View style={styles.betweenView}>
                    <Text style={styles.textColor3}>{item.manufacturer}</Text>
                    <View style={{
                        width: (screenW - 10) / 3 * 2,
                        borderLeftWidth: 0.5,
                        borderLeftColor: '#7b7b7b',
                    }}>
                        <View style={{
                            flexDirection: 'row',
                            marginHorizontal: 3,
                        }}>
                            <View style={{
                                flex: 1,
                            }}>
                                <Text style={[styles.textColor, {textAlign: 'left'}]}>国网{districtText}电力</Text>
                            </View>
                            <Text style={[styles.textColor, {textAlign: 'right'}]}>NO.{assetID}</Text>
                        </View>
                        <View style={{
                            marginHorizontal: 5,
                        }}>
                            <Barcode value={item.assetID} format="CODE128" height={35} width={1.1}/>
                            <Text style={[styles.textColor]}>{item.assetID}</Text>
                        </View>
                    </View>
                </View>

            </View>
        )
    }

    dianLiuRender = (item, index) => {
        return (
            <Text>电流</Text>
        )
    }

    errorRender = (item, index) => {
         return (
            <View
                key={index}
                style={[styles.mainView,{padding:10}]}
            >
                <Text style={{color:'red'}}>{item.error_msg}</Text>
            </View>
        )
    }

    render() {
        let {isStart} = this.state;
        const start_text = isStart ? '开始识别' : '停止识别'
        return (
            <View style={styles.container}>
                <View style={styles.container}>
                    {
                        this.state.data.map((item, index) => {
                            if (item.error) {
                                return this.errorRender(item, index)
                            }
                            else if (item.kind.indexOf('电流') > -1) {
                                return this.dianYaRender(item, index)
                            }
                            else if (item.kind.indexOf('电流') > -1) {
                                return this.dianLiuRender(item, index)
                            }

                        })
                    }
                </View>
                <Button onPress={() => this._start()}
                        type="primary"
                        style={[ComponentsStyles.button, {backgroundColor: isStart ? '#0099FF' : 'red',}]}
                >
                    <Text style={{color: '#fff'}}>
                        {start_text}
                    </Text>
                </Button>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    textColor: {
        color: '#333',
        textAlign: 'center',
    },
    textColor3: {
        color: '#333',
        textAlign: 'center',
        width: (screenW - 9) / 3,

    },
    textColor2: {
        color: '#333',
        textAlign: 'center',
        width: (screenW - 10) / 2,
    },
    mainView: {
        margin: 5,
        borderWidth: 0.5,
        borderColor: '#7b7b7b',
    },
    betweenView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        borderTopWidth: 0.5,
        borderTopColor: '#7b7b7b',
        alignItems: 'center',
    },
    centerWidth: {
        borderLeftWidth: 0.5,
        borderRightWidth: 0.5,
        borderLeftColor: '#7b7b7b',
        borderRightColor: '#7b7b7b',
    },
})

export default DesktopHome;