import React, { useState, useEffect } from 'react';
import { Outlet, history, useLocation, useAppData } from '@umijs/max';
import { NavBar, TabBar, List } from 'antd-mobile';
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
  PayCircleOutline,
  SetOutline,
} from 'antd-mobile-icons';
import './index.less';
import { useMemo } from 'react';
import {
  MenuOutlined,
  ArrowLeftOutlined,
  EditOutlined,
  UsergroupAddOutlined,
  HomeOutlined,
  LogoutOutlined,
  LockOutlined
} from '@ant-design/icons';
import { Drawer, Avatar, Button, Divider } from 'antd';
import { UserOutlined } from '@ant-design/icons';
/* 
menulist 中的表示主路由菜单上左上角是打开 drawer 否则为返回上一页


*/

const menulist = ['/home'];

function BasicLayout() {
  const setRouteActive = (value) => {
    history.push(value);
  };
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/todo',
      title: '待办',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/message',
      title: '消息',
      icon: <MessageOutline />,
    },
    {
      key: '/me',
      title: '我的',
      icon: <UserOutline />,
    },
  ];
  const location = useLocation();
  const { pathname } = location;

  const { routes } = useAppData();

  const currouter = useMemo(() => {
    let allroutes = Object.values(routes).filter((it, i) => {
      return it.path === pathname;
    })?.[0];
    return allroutes;
  }, [pathname]);

  const [drawer, setdrawer] = useState({ open: false });

  const [startX, setStartX] = useState(null);
  const [startY, setStartY] = useState(null);

  function handleTouchStart(event) {
    setStartX(event.touches[0].clientX);
    setStartY(event.touches[0].clientY);
  }

  function handleTouchMove(event) {
    const { clientX, clientY } = event.touches[0];
    const distance = clientX - startX;
    const distancey = clientY - startY;
    if (distancey > 10 || distancey < -10) {
      return;
    }
    if (distance > 20) {
      // 执行左滑操作
      setdrawer((s) => ({
        ...s,
        open: true,
      }));
    }
  }

  return (
    <div className="container">
      <Drawer
        onClose={() => {
          setdrawer((s) => ({
            ...s,
            open: false,
          }));
        }}
        closable={false}
        {...drawer}
        width={'80%'}
        placement="left"
      >
        <div className="userinfo" style={{position:"relative",height:"100%"}}>
          <Avatar size={56} icon={<UserOutlined />}></Avatar>
          <div className="spread" style={{ alignItems: 'flex-end',paddingBottom:8 }}>
            <div>
              <h2>UserName</h2>
              <p style={{ margin: 0 }}>13512555441</p>
            </div>
            <Button
              style={{ color: '#fff', borderColor: '#fff' }}
              ghost
              type="primary"
              icon={<EditOutlined />}
            ></Button>
          </div>
          <Divider></Divider>
          <List header="个人信息" style={{marginLeft:-12}}>
            <List.Item prefix={<UserOutline />} extra="李翰林">用户名</List.Item>
            <List.Item prefix={<UsergroupAddOutlined />} extra="维修部">组织</List.Item>
            <List.Item prefix={<HomeOutlined style={{fontSize:14,paddingLeft:3}}/>} extra="天华院">公司</List.Item>
            <List.Item prefix={<LockOutlined/>} onClick={()=>{}} style={{backgroundColor:"rgba(0,0,0,0.2)",borderRadius:8}}>修改密码</List.Item>

          </List>
          <Button icon={<LogoutOutlined/>} size='large' style={{width:"100%",marginTop:12,position:"absolute",bottom:0,left:0,right:0,backgroundColor:"rgba(0,0,0,0.2)"}} type="ghost">退出</Button>
        </div>
      </Drawer>
      <div className="top">
        <NavBar
          backArrow={
            menulist.includes(pathname) ? (
              <MenuOutlined />
            ) : (
              <ArrowLeftOutlined />
            )
          }
          onBack={() => {
            if (menulist.includes(pathname)) {
              setdrawer((s) => ({
                ...s,
                open: true,
              }));
            } else {
              history.go(-1);
            }
          }}
        >
          {currouter?.name}
        </NavBar>
      </div>
      <div style={{ height: 45 }}></div>
      <div onTouchStart={handleTouchStart} onTouchMove={handleTouchMove}>
        <Outlet></Outlet>
      </div>

      <div style={{ height: 66 }}></div>
      <div className="bottom">
        <TabBar
          activeKey={pathname}
          onChange={(value) => setRouteActive(value)}
        >
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
}

export default BasicLayout;