import React from 'react'
import BasicLayout, { useLayouts } from '@uiw-admin/basic-layouts'
import { HashRouter } from 'react-router-dom';
import LayoutTabs from "@uiw-admin/layout-tabs"

function BasicLayoutScreen() {
  window.SEARCH_MENU = true
  const routerArrs =[
    {
      path: "/basic-layouts",
      name: "查询表格",
      element: <div>测试</div>,
    },
    {
      path: "/layout-tabs",
      name: "查询表格2",
      element: <div>测试2</div>,
    }
  ]
  const basicLayoutProps = {
    headerLayout: 'top',
    headerBackground: '#343a40',
    headerFontColor: '#fff',
  }
  return (
    <HashRouter window={window}>
      <BasicLayout {...basicLayoutProps}  isDefaultContentStyle={false} routes={routerArrs}  >
        <LayoutTabs routes={routerArrs} /> 
      </BasicLayout>
    </HashRouter>
  )
}
export default BasicLayoutScreen

window.SEARCH_MENU = true
import React from 'react'
import BasicLayout, {
  useLayouts,
} from '@uiw-admin/basic-layouts'
import { HashRouter ,useRoutes ,Outlet} from 'react-router-dom';
import LayoutTabs from "@uiw-admin/layout-tabs"

const routerArrs =[
  {
    path: "/basic-layouts",
    name: "查询表格",
    element: <div>测试</div>,
  },
  {
    path: "/layout-tabs",
    name: "查询表格2",
    element: <div>测试2</div>,
  }
]

function BasicLayoutScreen() {
  const layouts = useLayouts()
  const basicLayoutProps = {
    // 右侧下拉菜单内容
    menus: [
      {
        title: '欢迎来到uiw',
        icon: 'smile',
        // 调用关闭菜单事件
        onClick: () => layouts.closeMenu(),
      },
      {
        title: '修改密码',
        icon: 'setting',
      },
    ],
    profile: {
      // 头像地址
      avatar: '',
      // 下拉菜单左侧内容
      menuLeft:<div style={{ marginRight: 15 }}>可做自定义dom</div>
    },
    // 调用刷新接口
    onReloadAuth: () => {},
    layouts,
  }

  return <HashRouter window={window}>
      <BasicLayout {...basicLayoutProps} isDefaultContentStyle={false} routes={routerArrs}  >
        <LayoutTabs routes={routerArrs} /> 
      </BasicLayout>
    </HashRouter>
}

export default BasicLayoutScreen

window.SEARCH_MENU = true
import React from 'react'
import BasicLayout from '@uiw-admin/basic-layouts'
import { HashRouter } from 'react-router-dom';
import LayoutTabs from "@uiw-admin/layout-tabs"

const routerArrs =[
  {
    path: "/basic-layouts",
    name: "查询表格",
    element: <div>测试</div>,
  },
  {
    path: "/layout-tabs",
    name: "查询表格2",
    element: <div>测试2</div>,
  }
]


function BasicLayoutScreen() {
  return <HashRouter window={window}>

    <div>不设置 isDefaultContentStyle 使用默认值(true)</div>
    
      <BasicLayout routes={routerArrs}  >
        <div style={{background:"#fff"}} >测试 isDefaultContentStyle 值不设置的情况下渲染样式</div>
      </BasicLayout>
      <br/>
      <div>设置 isDefaultContentStyle = false </div>
       <BasicLayout routes={routerArrs} isDefaultContentStyle={false}  >
        <div style={{background:"#fff"}} >测试 isDefaultContentStyle 值不设置的情况下渲染样式</div>
      </BasicLayout>
    </HashRouter>
}
export default BasicLayoutScreen

window.SEARCH_MENU = true
import React from 'react'
import BasicLayout, {
  useLayouts,
} from '@uiw-admin/basic-layouts'
import { HashRouter ,useRoutes ,Outlet,useLocation } from 'react-router-dom';
import LayoutTabs from "@uiw-admin/layout-tabs"

const routerArrs =[
  {
    path: "/basic-layouts",
    name: "查询表格",
    element: <div>测试</div>,
  },
  {
    path: "/layout-tabs",
    name: "查询表格2",
    element: <div>测试2</div>,
  }
]


const Com = (props)=>{
  const { routes } = props
  const location = useLocation()
  return (<BasicLayout {...props} menuHide={location.pathname==="/layout-tabs"} >
    <LayoutTabs routes={routes} /> 
  </BasicLayout>)
}

function BasicLayoutScreen() {
  const layouts = useLayouts()
  const basicLayoutProps = {
    // 右侧下拉菜单内容
    menus: [
      {
        title: '欢迎来到uiw',
        icon: 'smile',
        // 调用关闭菜单事件
        onClick: () => layouts.closeMenu(),
      },
      {
        title: '修改密码',
        icon: 'setting',
      },
    ],
    profile: {
      // 头像地址
      avatar: '',
      // 下拉菜单左侧内容
      menuLeft:<div style={{ marginRight: 15 }}>可做自定义dom</div>
    },
    // 调用刷新接口
    onReloadAuth: () => {},
    layouts,
  }


  return <HashRouter window={window}>
      <Com  {...basicLayoutProps}  routes={routerArrs}  />
    </HashRouter>
}

export default BasicLayoutScreen