import React, { Component, useState, useEffect } from 'react';
import { Card, Typography, Alert, Row, Col, Button } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import request from '../utils/request';
import bgImg from '../assets/picture.png';
import itemsImg from '../assets/items.png';
import consultantImg from '../assets/consultantKPI.png';
import projectImg from '../assets/project.png';
import reportImg from '../assets/report.png';
import customerImg from '../assets/customer.png';
import statisticsImg from '../assets/statistics.png';
import borderImg from '../assets/border.png';

const index = (props) => {
    const { currentUser: user } = props

    const [data, setData] = useState([])
    const [headerHeight, setHeaderHeight] = useState(0)

    const list = [
        {
            title: '项目列表',
            img: itemsImg,
            path: '/building/list',
            value: '1',
        },
        {
            title: '客户列表',
            img: customerImg,
            path: '/customer/customerlist/list',
            value: '2',
        },
        {
            title: '数据报表',
            img: reportImg,
            path: '/statistical/monitor',
            value: '3',
        },

        {
            title: '项目统计',
            img: projectImg,
            path: '/statistical/building',
            value: '4',
        },
        {
            title: '活动统计',
            img: statisticsImg,
            path: '/statistical/activity',
            value: '5',
        },
        {
            title: '置业顾问KPI',
            img: consultantImg,
            path: '/statistical/consultant',
            value: '6',
        },

    ]
    const goNow = (path) => {
        router.push({
            pathname: path,
        });
    }

    const bg = user.bossDisplay || 'https://estateagents.oss-accelerate.aliyuncs.com/yunzhi/admin/4a38034593bac9cbaa3a5caa61491f5.png' 

    useEffect(() => {
        const header = document.querySelector('header.ant-layout-header')
        setHeaderHeight(header.offsetHeight)
    }, [])

    return (
        <>
            <div id="indexBg"
                style={{
                    width: '100%',
                    maxHeight: `calc(100vh - 48px - ${headerHeight}px)`,
                    // height: '0',
                    // paddingBottom: '38%',
                    // position: 'relative',
                    top: '-24px',
                    // // left: '-24px',
                    // backgroundImage: `url(${bg})`,
                    // backgroundRepeat: 'no-repeat',
                    // backgroundSize: '100% 100%',
                    overflow: 'hidden'
                }}
            >
                <img width="100%" src={bg} alt=""/>
            </div>
            {/* <div style={{
                backgroundColor: '#fff',
                paddingBottom: '16px'
                // margin: '-24px -24px 0 -24px',
                // height: `calc(100vh - ${partAHeight}px)`
            }} >
                <div style={{
                    position: 'absolute',
                    width: '100%',
                    left: 0,
                    bottom: 0,
                    backgroundColor: '#fff',
                    paddingBottom: '48px'
                }}>
                    <h2 style={{
                        fontSize: '0.11rem',
                        padding: '0.2rem 0 16px 24px'
                    }}>快捷入口</h2>
                    <Row style={{ textAlign: 'center' }}>
                        {list.map(item => (
                            <Col span={4} key={item.value} onClick={() => goNow(item.path)}>
                                <div style={{
                                    width: '1.2rem',
                                    height: '0px',
                                    margin: '0 auto',
                                    paddingBottom: '0.66rem',
                                    position: 'relative',
                                    backgroundImage: 'url(https://njcj.oss-cn-shanghai.aliyuncs.com/images/border.png)',
                                    backgroundRepeat: 'no-repeat',
                                    backgroundSize: '100% 100%',
                                    paddingTop: '0.12rem'
                                }}>
                                    <p style={{ color: '#FF7F49', fontSize: '0.11rem', letterSpacing: '0.026rem', fontWeight: '600', }}>{item.title}</p>
                                    <img style={{ position: 'absolute', left: '0.08rem', bottom: '0.1rem', width: '0.3rem' }} src={item.img} alt="" />
                                </div>
                            </Col>
                        ))}
                    </Row>
                </div>
            </div> */}


        </>
    )

}
export default connect(s => s.user)(index);

