import React from 'react'
import * as mobx from 'mobx'
import {
    inject,
    observer
} from 'mobx-react'
import {
    WeaTop,
    WeaTab,
    WeaFormItem,
    WeaRightMenu,
    WeaAlertPage,
    WeaNewScrollPagination
} from 'ecCom'
import {
    Row,
    Col,
    Spin,
    Modal,
    Button,
    message,
    Switch,
    Menu, Dropdown,Icon,Anchor
} from 'antd';

import {
    WeaSwitch,
    WeaTableNew
} from 'comsMobx';
import {
    i18n
} from '../../public/i18n';

import '../../style/card.less';
import FormItem from './FormItem';
import IframeItem from './IframeItem';
import AnchorDetect from './AnchorDetect';
import { renderNoright } from '../../util'; // 从util文件引入公共的方法

const toJS = mobx.toJS;
const confirm = Modal.confirm;

@inject('resourceCard')
@observer
export default class ResourceCard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activity:0,//激活的锚点
            detectElements: [], // 受监控元素,可能存在空项
        }
        this.flag = false; // 点击Anchor菜单项,不执行监听滚动事件
    }

    componentWillMount() {
    }

    componentDidMount() {
        this.init();
    }

    // componentDidUpdate(prevProps) {
    //     // 判断items是否更新
    //     if (prevProps.items !== this.props.items
    //         && this.isDiff(prevProps.items, this.props.items)) {
    //         // 重新生成受监控元素
    //         this.buildDetectElements(this.props.items);
    //     }
    // }

    // // 判断两数组是否一摸一样
    // isDiff = (before, after) => {
    //     if (before.length !== after.length) return false;
    //     // 先对数组进行排序
    //     const beforeTemp = [...before].sort(), afterTemp = [...after].sort();
    //     for (let i = 0; i < beforeTemp.length; i++) {
    //         if (beforeTemp[i] !== afterTemp[i]) {
    //             return false;
    //         }
    //     }
    //     return true;
    // };

    componentWillUnmount() {
    }


    componentWillReceiveProps(nextProps) {
        if (this.props.location.key !== nextProps.location.key) {
            this.init();
        }
    }

    init() {
        const {
            resourceCard
        } = this.props;
        resourceCard.init();
        this.buildDetectElements(); //生成受监控元素
    }

    buildDetectElements = () => {
        const {
            resourceCard
        } = this.props,{
            data
        } = resourceCard;
        
        data.anchorList.map((item,index) => {
            item.activity = index;
            item.offset = document.getElementById(item.id).offsetTop + document.getElementById(item.id).clientHeight;
        })

        this.setState({
            detectElements:data.anchorList
        })

    }
    

    onScrollEnd = () => {
        const {
            resourceCard
        } = this.props;
        resourceCard.scrollLoading = true;
        resourceCard.iframeList.push({
            id:"job",
            title:"岗位管理",
            url:'/spa/organization/static/index.html#/main/organization/companyExtend/7'
        })
        setTimeout(() => {
            resourceCard.scrollLoading = false;
        }, 2000);
    };

    handleMenuClick = (e) => {
        console.log('click', e);
    }

    onScroll = (event) => {
        const postion = event.target.scrollTop;
        let getActivityCurrent = this.state.activity;
        this.state.detectElements.map((item,index) => {
            if(postion >=  document.getElementById(item.id).offsetTop &&postion <= item.offset){
                return getActivityCurrent = item.activity;
            }
        })
        this.setState({
            activity: getActivityCurrent
        })
    }

    scrollToAnchor = (anchorName,index) => {
        if (anchorName) {
            // 找到锚点
            let anchorElement = document.getElementById(anchorName);
            // 如果对应id的锚点存在，就跳转到锚点
            if (anchorElement) { anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); }
        }
    }

    render() {
        const {
            resourceCard
        } = this.props, {
            height,
            scrollLoading,
            offset,
            overtime,
            intervalTime,
            data,
            iframeList,
        } = resourceCard;

        const menu = (
            <Menu onClick={this.handleMenuClick}>
                <Menu.Item key="1">第一个菜单项</Menu.Item>
                <Menu.Item key="2">第二个菜单项</Menu.Item>
                <Menu.Item key="3">第三个菜单项</Menu.Item>
            </Menu>
        );

        return (
            <WeaNewScrollPagination
                height='100%'
                onScrollEnd={this.onScrollEnd}
                onScroll = {this.onScroll}
            >
            <div className="gutter-resource-card">
                <div className="gutter-row">
                    <div className='top'>
                        <img src={require('../../images/resource.png')} />
                        <div className='user'>
                            <div className='name'>{data.user.name}
                                <span>{data.user.sex == 0 ? <i className="icon-coms-men" /> : <i className="icon-coms-women" />}</span>
                            </div>
                            <div className='icon-info'>
                                <i className="icon-coms-Send-message" />
                                <i className="icon-coms-message-o" />
                                <i className="icon-coms-Send-emails" />
                                <i className="icon-coms-New-schedule-o" />
                            </div>
                            <div className='content'>
                                <div>
                                    <span className='label'><i className="icon-portal-email-o" /></span>
                                    <span className='value'>{data.user.email}</span>
                                    <span className='label'><i className="icon-coms-contact" /></span>
                                    <span className='value'>{data.user.phone}</span>
                                </div>
                                <div style={{ marginTop: '10px' }}>
                                    <span className='label'>账号类型:</span>
                                    <span className='value'>{data.user.belongTo}</span>
                                    <span className='label'>状态:</span>
                                    <span className='value'>{data.user.status}</span>
                                </div>
                            </div>
                        </div>
                        <div className='right-button'>
                            <Button className='item'>编辑人员</Button>
                            <Button className='item'>调动</Button>
                            <Button className='item'>离职</Button>
                            <Dropdown overlay={menu}>
                                <Button  style={{ marginLeft: 8 }}  className='item'>
                                    更多操作 <Icon type="down" />
                                </Button>
                            </Dropdown>
                        </div>

                    </div>
                    <div className='data'>
                        <Row type="flex" justify="space-between" style={{height:'100%'}}>
                            <Col className='ant-col' span={4}>
                                <img src="/hrm/hrm_e9/image/workflow.png" alt="" />
                                <div>
                                    <p>流程总数</p>
                                    <p>{data.statistical.workflowCount}</p>
                                </div>
                            </Col>
                            <Col className='ant-col' span={4}>
                                <img src="/hrm/hrm_e9/image/doc.png" alt="" />
                                <div>
                                    <p>文档总数</p>
                                    <p>{data.statistical.docCount}</p>
                                </div>
                            </Col>
                            <Col className='ant-col' span={4}>
                                <img src="/hrm/hrm_e9/image/custom.png" alt="" />
                                <div>
                                    <p>我的客户</p>
                                    <p>{data.statistical.cusCount}</p>
                                </div>
                            </Col>
                            <Col className='ant-col' span={4}>
                                <img src="/hrm/hrm_e9/image/cowork.png" alt="" />
                                <div>
                                    <p>我的协作</p>
                                    <p>{data.statistical.collaborationCount}</p>
                                </div>
                            </Col>
                            <Col className='ant-col' span={4}>
                                <img src="/hrm/hrm_e9/image/weibo.png" alt="" />
                                <div>
                                    <p>微博总数</p>
                                    <p>{data.statistical.weiboCount}</p>
                                </div>
                            </Col>
                        </Row>
                    </div>
                    {
                        data.formItems.map((item,index)=>{
                            return(
                                <FormItem groupInfo={item}/>
                            )
                        })
                    }
                    {
                        iframeList.map((item,index) => {
                            return(
                                <IframeItem iframeInfo={item}/>
                            )
                        })
                    }
                </div>
                <div className="gutter-row">
                       <AnchorDetect  
                         anchorList={data.anchorList}
                         container={window}
                         activity={this.state.activity}
                         onChange={this.scrollToAnchor}
                        />
                </div>
            </div>
            <Spin size="large" tip="" className='scroll-spin' spinning={scrollLoading} />

                
        </WeaNewScrollPagination>

        )
    }

}