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

import {connect} from 'react-redux';
import {Button, Checkbox, Toast, Provider, List} from '@ant-design/react-native';
import ComponentsStyles from '../../components/ComponentsStyles';
const CheckboxItem = Checkbox.CheckboxItem;

@connect(customer => ({...customer}))
class SearchProject extends Component {
    // 多选项目
    constructor(props) {
        super(props);
        const checked_names = this.props.navigation.state.params.checked_names;
        this.state = {
            callback: this.props.navigation.state.params.callback,
            ids: this.props.navigation.state.params.checked_ids ?? [], // 加载已选择的项目
            names: checked_names && checked_names !== '请选择' ? checked_names.split(',') : [],
            // 客户添加项目
            disabled_ids: this.props.navigation.state.params.disabled_ids ?? [], // 加载已添加的项目
        };
    }

    componentDidMount() {
        this._fetchData();
    }

    _fetchData = () => {
        this.props.dispatch({
            type: 'customer/fetchReportDict',
        });
    };
    onChange = (checked, item) => {
        let {ids, names} = this.state;
        if (checked) {
            ids.push(item.id);
            names.push(item.name);
        } else {
            ids.splice(ids.indexOf(item.id), 1);
            names.splice(names.indexOf(item.name), 1);
        }
        this.setState({names, ids});
    };

    onSave = () => {
        if (!this.state.ids.length) {
            Toast.info('请选择项目', 1);
            return false;
        }
        const name = this.state.names.join(',');
        this.state.callback(this.state.ids, name ? name : '请选择');
        this.props.navigation.goBack();
    };

    render() {
        const {projectDict} = this.props.customer;
        return (
            <View style={{flex: 1, backgroundColor: '#fff'}}>
                <Provider>
                    <ScrollView>
                        <List style={{flex: 1}}>
                            {projectDict.map((item, index) => {
                                // 判断是否选择过了
                                const checked = this.state.ids.indexOf(item.id) > -1 ? true : false;
                                const disabled = this.state.disabled_ids.indexOf(item.id) > -1 ? true : false;
                                return (<CheckboxItem
                                        key={index}
                                        checked={checked}
                                        disabled={disabled}
                                        onChange={event => {
                                            this.onChange(event.target.checked, item);
                                        }}
                                    >
                                        {item.name}
                                    </CheckboxItem>
                                );
                            })}
                        </List>
                    </ScrollView>
                    <Button
                        type="primary"
                        onPress={() => this.onSave()}
                        style={ComponentsStyles.button}><Text
                        style={{color: '#fff'}}>确定</Text>
                    </Button>
                </Provider>
            </View>
        );
    }
}

export default SearchProject;