import React from 'react';
import PropTypes from 'prop-types';

import { Cascader } from 'antd';
import { config, networkUtils } from '@utils';

const { api } = config;
const { tree } = api.common;

class CascaderItem extends React.Component {
  public componentDidMount = () => {
    this.fetchData();
  };
  private fetchData = () => {
    // const { labelKey, valueKey } = this.props;

    networkUtils.request({ method: 'get', url: tree['cccCode'] }).then((data) => {
      if (data.success) {
        if (data.data.length) {
          this.setState({
            dataSource: data.data,
          });
        }
      } else {
        throw data;;
      }
    });
  };

  // shouldComponentUpdate(nextProps) {
  // return isObjectEqual(this.props, nextProps);
  // }
  private handleChange = (value, selectedOptions) => {
    this.props.onChange(value);
    this.setState({
      value,
    });
  };

  private clear = () => {
    this.setState({
      value: '',
    });
  };

  constructor(props) {
    super(props);
    const { value, onChange } = this.props;

    this.state = {
      value: value || '',
      dataSource: [],
    };
  }

  render() {
    const { dataSource, fetching, value } = this.state;
    const { ...otherProps } = this.props;

    return (
      <Cascader
        getPopupContainer={() => document.getElementById('main')}
        allowClear
        options={dataSource}
        onChange={this.handleChange}
        // changeOnSelect={true}
        value={value}
        {...otherProps}
      />
    );
  }
}

CascaderItem.propTypes = {
  apiName: PropTypes.string,
  dataSource: PropTypes.array,
};

export default CascaderItem;
