import Drawer from '../src/index'
import Menu from '../../menu/index'
import Icon from '../../icon/index'
import Button from '../../button/index'
import '../assets/index.less'
import '../../menu/style/index'
import '../../icon/style/index'
import '../../button/style/index'

const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup

export default {
  data () {
    return {
      open: false,
      openChild: false,
      openChildren: false,
    }
  },
  methods: {
    onClick () {
      this.open = !this.open
    },
    onChildClick () {
      this.openChild = !this.openChild
    },
    onChildrenClick () {
      this.openChildren = !this.openChildren
    },
    getLevelMove (e) {
      const target = e.target
      if (target.className === 'drawer1') {
        return [200, 100]
      }
      return 100
    },
  },
  render () {
    return (
      <div >
        <div
          style={{
            width: '100%', height: 667, background: '#fff000',
            color: '#fff', textAlign: 'center', lineHeight: '667px',
          }}
        >
          <Button onClick={this.onClick}>打开抽屉</Button>
        </div>
        <Drawer
          width='20vw'
          handler={false}
          open={this.open}
          onMaskClick={this.onClick}
          wrapperClassName='drawer1'
          placement='right'
        >
          <div>
            <Button onClick={this.onChildClick}>打开子级</Button>
            <Drawer
              handler={false}
              open={this.openChild}
              onMaskClick={this.onChildClick}
              wrapperClassName='drawer2'
              level='.drawer1'
              placement='right'
              levelMove={100}
            >
              <div style={{ width: 200 }}>
                二级抽屉
                <Button onClick={this.onChildrenClick}>打开子级</Button>
                <Drawer
                  handler={false}
                  open={this.openChildren}
                  onMaskClick={this.onChildrenClick}
                  level={['.drawer1', '.drawer2']}
                  placement='right'
                  levelMove={this.getLevelMove}
                >
                  <div style={{ width: 200 }}>
                    三级抽屉
                  </div>
                </Drawer>
              </div>
            </Drawer>
          </div>
        </Drawer>
      </div>
    )
  },
}