import React, { useCallback, useEffect, useState } from 'react';
// import { Row, Col } from 'antd'
import { connect } from 'dva'
import Link from 'umi/link'
import IconText from './components/IconText'
import styles from './style.less';

const Welcome = (props) => {
  const { user } = props
  const { bossDisplay } = user
  const [containerStyle, setContainerStyle] = useState({})

  const computeStyle = useCallback(() => {
    const body = document.body
    const header = document.getElementsByClassName('ant-pro-global-header')[0]

    const style = {
      background: `url(${bossDisplay}) no-repeat`,
      backgroundSize: '100% 100%',
      width: header.offsetWidth,
      height: body.offsetHeight - header.offsetHeight,
    }

    setContainerStyle(style)
  }, [setContainerStyle, bossDisplay])

  useEffect(() => {
    computeStyle()

    window.addEventListener('resize', computeStyle)
    return () => window.removeEventListener('resize', computeStyle)
  }, [computeStyle])
  
  return (
    <div className={styles.welcome} style={containerStyle}>
      {/* <div className={styles['action-list']}>
        <div>
          <Link to="/building/list">
            <IconText name='building'>项目列表</IconText>
          </Link>
        </div>

        <div>
          <Link to="/statistical/consultant">
            <IconText name='kpi'>置业顾问KPI</IconText>
          </Link>
        </div>
        
        <div>
          <Link to="/statistical/activity">
            <IconText name='activity'>活动统计</IconText>
          </Link>
        </div>
        
        <div>
          <Link to="/customer/customer/list">
            <IconText name='customer'>客户列表</IconText>
          </Link>
        </div>
        
        <div>
          <Link to="/customer/customer/list">
            <IconText name='report'>数据报表</IconText>
          </Link>
        </div>
        
        <div>
          <Link to="/customer/customer/list">
            <IconText name='channel'>渠道统计</IconText>
          </Link>
        </div>
      </div> */}
    </div>
  )
};

export default connect(s => ({ user: s.user.currentUser }))(Welcome);
