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 CascaderEL extends React.Component {
  componentDidMount = () => {
    this.fetchData();
  };
  fetchData = () => {
    const { labelKey, valueKey } = this.props;

    networkUtils.request({ method: 'get', url: tree.orgCcs }).then((data) => {
      if (data.success) {
        if (data.data.length) {
          const options = data.data.map((d) => {
            return {
              value: d[valueKey],
              label: d[labelKey],
              children: d['children'].map((c) => {
                return {
                  value: c[valueKey],
                  label: c[labelKey],
                };
              }),
            };
          });

          console.log(options);
          this.setState({
            dataSource: options,
          });
        }
      } else {
        throw data;;
      }
    });
  };

  // shouldComponentUpdate(nextProps) {
  // return isObjectEqual(this.props, nextProps);
  // }
  handleChange = (value, selectedOptions) => {
    this.props.onChange(value);
    this.setState({
      value,
    });
  };
  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 { disabled, size } = this.props;
    // if (disabled) {
    //   return <span className="ant-form-text">{value}</span>
    // }
    return <Cascader {...this.props} options={dataSource} onChange={this.handleChange} />;
  }
}

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

export default CascaderEL;
