import React from 'react';
import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import { useModel } from '@/store';
import { Loading, Notify, Dialog } from '@antmjs/vantui';
import NavLoading from '@/components/NavLoading';
import Auth from '@/components/Auth';
import TabBar from './TabBar';
import laySty from './layout.module.less';

export default (props) => {
  const { className, style, roles, tabBar = false, loading } = props;

  const { person, user, duty } = useModel('user');
  const containerClass = `${laySty['page-conatiner']} ${tabBar ? laySty['with-tabbar'] : ''} ${className}`;

  React.useEffect(() => {
    if (person && !user) {
      const currentPage = Taro.getCurrentPages().slice().pop();
      if ('pages/login/index' !== currentPage.route) {
        Taro.navigateTo({
          url: '/pages/login/index',
        })
      }
    }
  }, [person, user]);

  Taro.useShareAppMessage(() => {
    return {
      title: '文明霍山'
    };
  });

  return (
      <View className={laySty['page-wrapper']}>
        <Notify id="vanNotify" />
        <Dialog id="vanDialog" />
        <NavLoading loading={loading} />
        <View className={containerClass} style={style}>
          {
            !person && (
              <View className={laySty.loading}>
                <Loading size="32px" vertical>
                  加载中...
                </Loading>
              </View>
            )
          }
          <Auth roles={roles}>
            {props.children}
          </Auth>

          {
            !tabBar && (
              <View className={laySty['pdm-space']}></View>
            )
          }
        </View>
        {
          tabBar && <TabBar className={laySty['page-tabbar']} active={tabBar} duty={duty} />
        }
      </View>
  )
}
