import React, { PureComponent } from 'react';
import { View } from 'react-native';
import { WhiteSpace, List, Picker } from 'antd-mobile';
import { createAction } from '../utils/index';

class PickerComponent extends PureComponent {
  onClick = () => {
    this.props.dispatch(createAction('domain/fetch')());
  };
  onPickerChange = (val) => {
    let colNum = 1;
    const d = [...this.props.data];
    const asyncValue = [...val];
    if (val[0] !== undefined) {
      d.forEach((i) => {
        if (i.value === 'zj') {
          colNum = 2;
          if (!i.children) {
            i.children = [{
              value: 'zj-nb',
              label: '宁波',
            }, {
              value: 'zj-hz',
              label: '杭州',
            }];
            asyncValue.push('zj-nb');
          } else if (val[1] === 'zj-hz') {
            i.children.forEach((j) => {
              if (j.value === 'zj-hz') {
                j.children = [{
                  value: 'zj-hz-xh',
                  label: '西湖区',
                }];
                asyncValue.push('zj-hz-xh');
              }
            });
            colNum = 3;
          }
        }
      });
    } else {
      colNum = 1;
    }
  };
  render() {
    return (
      <View>
        <WhiteSpace size="lg" />
        <List style={{ backgroundColor: 'white' }} className="picker-list">
          <Picker
            data={this.props.data}
            cols={this.props.cols}
            value={this.props.asyncValue}
            onPickerChange={this.onPickerChange}
          >
            <List.Item arrow="horizontal" onClick={this.onClick}>当前基地</List.Item>
          </Picker>
        </List>
      </View>
    );
  }
}
export default PickerComponent;
