/* eslint react/no-multi-comp:0, no-console:0 */
import BaseMixin from '../../_util/BaseMixin';
import '../assets/index.less';
import TreeSelect from '../src/index';

const SHOW_PARENT = TreeSelect.SHOW_PARENT;

const treeData = [
  {
    label: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        label: 'Child Node1',
        value: '0-0-0',
        key: '0-0-0',
      },
    ],
  },
  {
    label: 'Node2',
    value: '0-1',
    key: '0-1',
    children: [
      {
        label: 'Child Node3',
        value: '0-1-0',
        key: '0-1-0',
      },
      {
        label: 'Child Node4',
        value: '0-1-1',
        key: '0-1-1',
      },
      {
        label: 'Child Node5',
        value: '0-1-2',
        key: '0-1-2',
      },
    ],
  },
];

export default {
  mixins: [BaseMixin],
  data: () => ({
    value: ['0-0-0'],
    disabled: false,
  }),
  methods: {
    onChange(value) {
      console.log('onChange ', value, arguments);
      this.setState({ value });
    },
    switch(checked) {
      this.setState({ disabled: checked });
    },
  },

  render() {
    const tProps = {
      props: {
        treeData,
        disabled: this.disabled,
        value: this.value,
        multiple: true,
        allowClear: true,
        treeCheckable: true,
        showCheckedStrategy: SHOW_PARENT,
        searchPlaceholder: 'Please select',
        __propsSymbol__: Symbol(),
      },
      on: {
        change: this.onChange,
      },
      style: {
        width: '300px',
      },
    };
    return (
      <div>
        <TreeSelect {...tProps} />
        <input type="checkbox" onChange={e => this.switch(e.target.checked)} /> 禁用
      </div>
    );
  },
};