import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    DeviceEventEmitter, TextInput,
} from 'react-native';

import {SearchBar, List,} from '@ant-design/react-native';

import ReadUHF from "../../utils/ReadUHF";
import {connect} from 'react-redux'
import {Button} from "../../components";

@connect(home => ({...home}))
class SearchHome extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            no: '',
            searchData: {},
            searchState: 0,
        };
    }

    componentDidMount() {
        ReadUHF.changeFlag(0)
        DeviceEventEmitter.addListener('MsgFromAndroid', this._onSearch);
    }

    componentWillUnmount() {
        ReadUHF.stopRead()
    }

    componentWillUnmount() {
        this.props.dispatch({
            type: 'home/clear'
        });
    }

    _onSearch = (value) => {
        this.props.dispatch({
            type: 'home/search',
            payload: {
                cross_code: value,
            },
            callback: (data) => {
                if (data.searchState === 1) {
                    this.setState({searchData: data.searchData, searchState: data.searchState, value: value, no: '',})
                } else {
                    this.setState({
                        searchData: data.searchData,
                        searchState: data.searchState,
                        value: value,
                        no: value,
                    })
                }
            }
        })
        this.setState({no: value,})
    }
    _cancel = () => {
        this.props.dispatch({
            type: 'home/clear'
        });
        this.setState({value: ''});
    };
    _start = () => {
        ReadUHF.doRead()
    }

    render() {
        const {searchData, searchState,} = this.state;

        return (
            <View style={{flex: 1}}>
                {/*搜索*/}
                <View style={{borderBottomWidth: 5, borderBottomColor: '#eee'}}>
                    <TextInput placeholder="请输入防窜货号" style={styles.input}
                               value={this.state.no}
                               autoFocus={true}
                               onChangeText={value => this._onSearch(value)}>
                    </TextInput>
                </View>
                <View style={searchState == 2 ? {padding: 10} : styles.hide}>
                    <Text>未查询到该编码 {this.state.value} </Text>
                </View>
                <View style={searchState == 1 ? {} : styles.hide}>
                    <List>
                        <List.Item extra={this.state.value}>编码</List.Item>
                        <List.Item extra={searchData.product_name}>产品</List.Item>
                        <List.Item extra={searchData.distributor_name}>分销商</List.Item>
                        <List.Item extra={searchData.create_time}>出库时间</List.Item>
                        <List.Item extra={searchData.create_user_text}>出库人</List.Item>
                        <List.Item extra={searchData.check_time}>审核时间</List.Item>
                        <List.Item extra={searchData.check_user_text}>审核人</List.Item>
                    </List>
                </View>
                <Button onPress={() => this._start()}
                        textStyle={{color: 'white'}}
                        style={{
                            marginTop: 30,
                            borderRadius: 0,
                            borderWidth: 0,
                            backgroundColor: '#0099FF',
                            color: '#fff'
                        }} title="开始识别"/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    hide: {
        display: 'none',
    },
})

export default SearchHome;