import React, {Component} from 'react';
import {
    View,
    FlatList,
    Text, StyleSheet, StatusBar,
} from 'react-native';

import {connect} from 'react-redux';
import TreeSelect from 'react-native-tree-select';

@connect(customer => ({...customer}))
class SearchProcess extends Component {
    // 搜索进度
    constructor(props) {
        super(props);
        this.state = {
            callback: this.props.navigation.state.params.callback,
            data: [],
            StageCount: [],
            field: '',
            store_id: '',
        };
    }

    componentDidMount() {
        this._fetchData();
        this._fetchStageCount();
    }

    _fetchData = () => {
        this.props.dispatch({
            type: 'customer/fetchEmployeeTree',
            callback: (data) => {
                this.setState({data: data});
            },
        });
    };

    _fetchStageCount = (type, id) => {
        this.props.dispatch({
            type: 'customer/queryStageCount',
            payload: {type, id},
            callback: (data) => {
                this.setState({StageCount: data});
            },
        });
    };

    _onClickLeaf = (item) => {
        this._fetchStageCount(item.item.field, item.item.id);
        this.setState({field: item.item.field, store_id: item.item.id});
    };

    _onStagePress = (stage_id, event) => {
        const {field, store_id} = this.state;
        let param = '';
        if (field && store_id) {
            param = field + '_' + store_id;
        }
        this.state.callback(stage_id, event, param);
        this.props.navigation.goBack();
    };

    renderItem = (data, index) => {
        return (
            <View style={index % 2 === 0 ? styles.tableRowOdd : styles.tableRowEven}>
                <Text
                    onPress={() => this._onStagePress(data.stage_id, 'stage')}
                    style={[styles.tableCell, {width: '30%'}]}>{data.stage}</Text>
                <Text
                    onPress={() => this._onStagePress(data.stage_id, 'total')}
                    style={[styles.tableCell, {width: '20%'}]}>{data.total_count}</Text>
                <Text
                    onPress={() => this._onStagePress(data.stage_id, 'today')}
                    style={[styles.tableCell, {width: '25%'}]}>{data.today_count}</Text>
                <Text
                    onPress={() => this._onStagePress(data.stage_id, 'overdue')}
                    style={[styles.tableCell, {width: '25%'}]}>{data.overdue_count}</Text>
            </View>
        );
    };

    render() {
        return (
            <View style={{flex: 1, backgroundColor: '#fff'}}>
                <StatusBar backgroundColor={'#fff'} barStyle='dark-content'/>
                <TreeSelect
                    data={this.state.data}
                    // isOpen={true}
                    // openIds={[3]}
                    // defaultSelectedId={['B062']}
                    isShowTreeId={false}

                    selectType="single"
                    itemStyle={{
                        marginVertical: 10,
                        // backgroudColor: '#8bb0ee',
                        fontSize: 14,
                        // color: '#2b90ea',
                    }}
                    selectedItemStyle={{
                        backgroudColor: '#f7edca',
                        fontSize: 14,
                        // color: '#171e99'
                    }}
                    leafCanBeSelected={true}
                    // onClickLeaf={this._onClickLeaf}
                    onClick={this._onClickLeaf}
                    treeNodeStyle={{
                        openIcon: <Text style={{fontFamily: 'iconfont'}}>{'\ue617'}</Text>,
                        closeIcon: <Text style={{fontFamily: 'iconfont'}}>{'\ue601'}</Text>,
                    }}
                />
                <View>
                    <View style={styles.tableHeader}>
                        <Text style={[styles.tableHeaderItem, {width: '30%'}]}>阶段</Text>
                        <Text style={[styles.tableHeaderItem, {width: '20%'}]}>总数</Text>
                        <Text style={[styles.tableHeaderItem, {width: '25%'}]}>今日</Text>
                        <Text style={[styles.tableHeaderItem, {width: '25%'}]}>逾期</Text>
                    </View>
                    <FlatList
                        data={this.state.StageCount}
                        renderItem={({item, index}) => this.renderItem(item, index)}
                        keyExtractor={(item, index) => index.toString()}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    icon: {
        fontFamily: 'iconfont',
        fontSize: 14,
        color: '#2b90ea',
        padding: 3,
    },
    tableHeader: {
        backgroundColor: '#03C762',
        flexDirection: 'row',
    },
    tableHeaderItem: {
        color: '#fff',
        paddingVertical: 10,
        textAlign: 'center',
        // flex: 1
    },
    tableRowOdd: {
        flexDirection: 'row',
    },
    tableRowEven: {
        flexDirection: 'row',
        backgroundColor: '#f8f8f8',
    },
    tableCell: {
        color: '#666',
        padding: 10,
        textAlign: 'center',
        // flex: 1
    },
});
export default SearchProcess;