import React, { useState, useEffect, useRef } from 'react';
import { useModel, useLocation, useIntl } from 'umi';
import styles from './index.less';
import { MenuFoldOutlined, SmileOutlined } from '@ant-design/icons';
import Icon from '@/tenants-ui/SgIcon';

import { Drawer, notification } from 'antd';
import NavMenu from '@/sagacare_components/navMenu';

export default (props) => {
  const { menuVisible, closeMenu, toggleMenu } = useModel('controller');
  const { initialState, setInitialState } = useModel('@@initialState');
  const { changeLastBuildId, changeLastFloorId } = useModel('sagacare_buildFloor');
  const [notifyList] = useState([
    {
      title: '管理员操作指南',
      id: 'notify1',
      content: '具体介绍管理员权限下的管理功能及相关操作说明。',
      name: '行政端操作指南.pdf',
      url: 'http://10.100.28.79/image-service/common/file_get?systemId=dataPlatform&key=%E8%A1%8C%E6%94%BF%E7%AB%AF%E6%93%8D%E4%BD%9C%E6%89%8B%E5%86%8C20220419.pdf',
      iconName: 'book',
    },
    {
      title: 'sagacare介绍',
      id: 'notify2',
      content: '环境健康主动管理服务',
      name: 'saga销售手册.pdf',
      url: 'http://10.100.28.79/image-service/common/file_get?systemId=dataPlatform&key=sagacare%E4%BB%8B%E7%BB%8D.pdf',
      iconName: 'introduce',
    },
  ]);
  const showMenuClick = () => {
    toggleMenu();
  };

  const openNotification = () => {
    //打开通知框
    notifyList.map((item, index) => {
      notification.open({
        key: item.id,
        message: item.title,
        description: item.content,
        duration: 0,
        className: 'custom-class',
        onClick: () => {
          console.log('Notification Clicked!', item);
          // 下载pdf 需产品给出
          //const downLoadUrl = '';
          const a = document.createElement('a');
          a.href = item.url;
          a.target = '_blank';
          a.download = item.name;
          a.click();
        },
        icon: <Icon type={item.iconName} style={{ fontSize: 32, color: '#108ee9' }}></Icon>,
        style: {
          width: 400,
          borderRadius: 30,
          cursor: 'pointer',
        },
        closeIcon: <></>,
      });
    });
  };
  //关闭提醒框
  const closeNotify = () => {
    //console.log('close-notify');
    notifyList.map((item, index) => {
      notification.close(item.id);
    });
  };

  useEffect(async () => {
    // debugger;
    // console.log('enviroment-layout', initialState);
    // const currentUser = await initialState?.fetchUser?.();
    // debugger;
    // if (currentUser) {
    //   setInitialState((s) => {
    //     return { ...s, currentUser: currentUser };
    //   });
    // }
    //debugger;
    //关闭
    document.querySelector('#root').addEventListener('click', closeNotify, true);
    const { REACT_APP_ENV } = process.env;
    console.log('REACT_APP_ENV', REACT_APP_ENV);

    //读取缓存的 楼层id 建筑id
    var lastBuildId = sessionStorage.getItem('lastBuildId') || '';
    var lastFloorId = sessionStorage.getItem('lastFloorId') || '';
    changeLastBuildId(lastBuildId);
    changeLastFloorId(lastFloorId);
    //console.log('lastBuildId,lastFloorId', lastBuildId, lastFloorId);

    return () => {
      console.log('layout-useEffect-off');
      document.querySelector('#root').removeEventListener('click', closeNotify, true);
    };
  }, []);

  const location = useLocation();
  useEffect(() => {
    //debugger;
    console.log('location', location);
  }, [location]);

  let setTimer = useRef();

  const logOut = () => {
    clearTimeout(setTimer.current);
    setTimer.current = null;
    setTimer.current = setTimeout(() => {
      console.log('----没有点击，退出');
      window.parent.postMessage('loginOut', '*');
    }, 1000 * 60 * 30);
  };
  logOut();
  useEffect(() => {
    clearTimeout(setTimer.current);
    setTimer.current = null;
  }, []);
  return (
    <div
      className={styles.layout}
      onClick={(event) => {
        console.log('----已点击等待超时，退出');
        logOut();
      }}
    >
      <div className={styles.header}>
        <div className={styles.title}>之江项目</div>
        <div className={styles.right}>
          <div className={styles.picture}>
            <Icon type="person" style={{ fontSize: 28 }}></Icon>
          </div>
          <div
            className={styles.notify}
            onClick={(event) => {
              event.stopPropagation();
              openNotification();
            }}
          >
            <Icon className={styles.notify} type="notify" style={{ fontSize: 21 }}></Icon>
          </div>
          <MenuFoldOutlined style={{ fontSize: 24, display: 'none' }} onClick={showMenuClick} />
        </div>
      </div>

      {props.children}
      <Drawer
        title=""
        placement="right"
        closable={false}
        onClose={closeMenu}
        visible={menuVisible}
        drawerStyle={
          {
            //   height: 340,
            //   width: 380,
            //   background: 'transparent',
            //   transform: 'translate(-50px,20px)',
            // top: 100,
            //right: 20,
          }
        }
        maskStyle={{ background: 'transparent' }}
        contentWrapperStyle={{ boxShadow: 'none' }}
        bodyStyle={{ transform: 'translate(-20px,20px)' }}
      >
        <NavMenu></NavMenu>
      </Drawer>
    </div>
  );
};
