/* eslint react/no-multi-comp:0, no-console:0, no-alert: 0 */

import BaseMixin from '../../_util/BaseMixin'
import '../assets/index.less'
import '../../vc-dialog/assets/index.less'
import TreeSelect, { TreeNode } from '../src/index'
import './demo.less'

export default {
  mixins: [BaseMixin],
  data: () => ({
    treeExpandedKeys: [],
  }),
  methods: {
    onTreeExpand (treeExpandedKeys) {
      this.setState({
        treeExpandedKeys,
      })
    },

    setTreeExpandedKeys () {
      this.setState({
        treeExpandedKeys: ['000', '0-1-0'],
      })
    },

  },

  render () {
    const { treeExpandedKeys } = this

    return (
      <div>
        <h2>Conrolled treeExpandedKeys</h2>
        <TreeSelect
          style={{ width: '200px' }}
          dropdownStyle={{ maxHeight: '200px', overflow: 'auto' }}
          treeExpandedKeys={treeExpandedKeys}
          onTreeExpand={this.onTreeExpand}
          __propsSymbol__={Symbol()}
        >
          <TreeNode value='' title='parent 1' key='000'>
            <TreeNode value='parent 1-0' title='parent 1-0' key='0-1-0'>
              <TreeNode value='leaf1' title='my leaf' key='random' />
              <TreeNode value='leaf2' title='your leaf' key='random1' disabled />
            </TreeNode>
            <TreeNode value='parent 1-1' title='parent 1-1' key='0-1-1'>
              <TreeNode value='sss'
                title={<span style={{ color: 'red' }}>sss</span>} key='random3'
              />
              <TreeNode value='same value1' title='same txtle' key='0-1-1-1'>
                <TreeNode value='same value10' title='same titlexd' key='0-1-1-1-0' style={{ color: 'red', background: 'green' }} />
              </TreeNode>
            </TreeNode>
          </TreeNode>
          <TreeNode value='same value2' title='same title' key='0-2'>
            <TreeNode value='2same value' title='2same title' key='0-2-0' />
          </TreeNode>
          <TreeNode value='same value3' title='same title' key='0-3' />
        </TreeSelect>
        <button onClick={this.setTreeExpandedKeys}>
          Set treeExpandedKeys
        </button>
      </div>
    )
  },
}