import React from 'react'
import {WeaTop, WeaTab, WeaTree, WeaDropMenu, WeaLocaleProvider} from 'ecCom';
import {Row, Col, Menu, Dropdown, Icon, Button} from 'antd';
import docxInfo from '../../util/docxInfo.js';

const SubMenu = Menu.SubMenu;
const getLabel = WeaLocaleProvider.getLabel;

export default class Docx extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            version: '',
            key: '',
            selectedKey: '',
            hash: '',
            docxHeight: 0,
            scrollWidth: 0,
        }
        this.resize.bind(this);
    }

    componentDidMount() {
        this.init();
        this.screenChange();

        try{
            let docxHeight = Number(document.body.clientHeight) + Number(window.screenTop);
            let docxWidth = Number(document.body.clientWidth) + Number(window.screenLeft);
            document.getElementById('docx').style.height = docxHeight + 'px';
            document.getElementById('docx').style.width = window.screen.width + 'px';
            let topHeight = document.getElementsByClassName('wea-new-top')[0].clientHeight;
            document.getElementById('leftPart').style.height = Number(document.body.clientHeight) - Number(topHeight) + 'px';
            let menuWidth = document.getElementsByClassName('wea-drop-menu')[0].clientWidth;
            document.getElementById('rightPart').style.height = Number(docxHeight) - Number(topHeight)  + 'px';
            let tabHeight = document.getElementsByClassName('wea-tab')[0].clientHeight + 2;
            let scrollWidth = (Number(document.body.clientWidth) - Number(menuWidth)) * 0.98 + 'px';
            document.getElementById('srcIframe').style.height = Number(document.body.clientHeight) - Number(topHeight) - Number(tabHeight) + 'px';
            let height = Number(document.getElementsByClassName('wea-tree')[0].clientHeight) + 35 + 'px';
            document.getElementById('treePart').style.height = height + 'px';
            this.setState({
                docxHeight: docxHeight,
                docxWidth: docxWidth,
                scrollWidth: scrollWidth
            })
        }catch(err) {

        }
    }

    componentWillUnmount() {       
        window.removeEventListener('resize',this.resize);
    }    

     screenChange() {
        window.addEventListener('resize', this.resize);
     }

    resize = () => {
        try{
            document.getElementById('docx').style.height = this.state.docxHeight + 'px';
            document.getElementById('docx').style.width = window.screen.width + 'px';
            let topHeight = document.getElementsByClassName('wea-new-top')[0].clientHeight;
            let menuWidth = document.getElementsByClassName('wea-drop-menu')[0].clientWidth;
            document.getElementById('leftPart').style.height = Number(document.body.clientHeight) - Number(topHeight) + 'px';
            document.getElementById('rightPart').style.height = Number(this.state.docxHeight) - Number(topHeight)  + 'px';  
            let tabHeight = document.getElementsByClassName('wea-tab')[0].clientHeight + 2;
            let scrollWidth = (Number(document.body.clientWidth) - Number(menuWidth)) * 0.98 + 'px';
            this.setState({
                scrollWidth: scrollWidth
            })
            let height = Number(document.getElementsByClassName('wea-tree')[0].clientHeight) + 35 + 'px';
            document.getElementById('treePart').style.height = height + 'px';
            document.getElementById('srcIframe').style.height = Number(document.body.clientHeight) - Number(topHeight) - Number(tabHeight) + 'px';
        }catch(err) {}
    }
        
    scrollToAnchor = (anchorName) => {
        if (anchorName) {
            let anchorElement = document.getElementById(anchorName);
            if(anchorElement) { anchorElement.scrollIntoView(); }
        }
    }
    
    init = () => {
        this.setState({
            version: 'e8',
            showVersion: 'e-cology8.0',
            key: 'datasource',
            selectedKey: '1',
            hash:'',
        })
    }

    getMenu = (children) => {
        return children.map(child => (
            child.children.length 
              ? <SubMenu 
                  ecId={`${this && this.props && this.props.ecId || ''}_SubMenu@rtor8e@integrationDocxButton${child.key}`} 
                  title={child.title} 
                  key={child.key} 
                  onTitleClick={(item) => this.handleClick(item)}
                >{this.getMenu(child.children)}</SubMenu> 
              : <Menu.Item 
                  ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@nmirrf@integrationDocxButton${child.key}`} 
                  key={child.key}
                >{child.title}</Menu.Item>
        ))
    }

    handleClick = (item) => {
        item && item.key && this.setState({
            hash: `#${item.key}`
        })
    }

    getTopDatas = () => {
        let topDatas = [];

        docxInfo[this.state.version] && docxInfo[this.state.version].topTitle && docxInfo[this.state.version].topTitle.map(data => {
            if(data && data[this.state.key]) {
                data[this.state.key].length && data[this.state.key].map((ds, index) => {
                    let children = this.getMenu(ds.children)
                    let menu = (<Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@ttou1z@integrationDocxTopDatas${index}`} onClick={(key) => this.handleClick(key)}></Menu>);
                    menu.props.children = children;
      
                    topDatas.push({
                        title: this.state.selectedKey == ds.key 
                                ? <Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@1bg24m@integrationDocxTopDatas${index}`} overlay={ds.children.length ? menu : <div></div>} trigger={['click']}>
                                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ejptyt@integrationDocxTopDatas${index}`} type="primary" className="ant-dropdown-link" onClick={() => this.scrollToAnchor(ds.key)}>
                                     {ds.title}{ds.children.length ? <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@vpfsyx@integrationDocxTopDatas${index}`} type={"down"} /> : ''}
                                    </Button>
                                </Dropdown> : ds.title,
                        viewcondition: ds.key
                    })
                })
            }
        })
        return topDatas;
    }

    getDatas = () => {
        let datas = [];

        docxInfo[this.state.version] && docxInfo[this.state.version].leftTitle && docxInfo[this.state.version].leftTitle.map(title => {
            title && datas.push({
                "canClick": true, // 标识节点是否可以点击 （单选 多选模式下生效）
                "icon": "", // 图标展示
                "id": title.key,  // 节点唯一标识，作为key值。
                "nodeid": title.key, // 节点唯一标识，作为key值(没设置的情况下取id)。 注意： 在单多选模式下，节点的id或者nodeid必须唯一（选中受控）
                "isParent": false,  // 父节点标识
                "name": title.showName, // 名称
                "dragDisabled": true, // 禁止节点拖拽
            })
        })
        return datas;
    }

    handleSelect = (item) => {
        item && this.setState({
            version: item.key,
            showVersion: item.item.props.children
        })
    }

    render() {
        const dropMenuDatas = [{
            companyid: 'e8',
            name: 'ecology8.0'
        }, {
            companyid: 'e9',
            name: 'ecology9.0'
        }]

        return (<div id="docx">
            <div id="topPart">
            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@hdofz3`}
                title={getLabel('32269',"集成中心") + getLabel('275',"帮助") + getLabel('30041',"文档")}
                icon={<i className="icon-coms-integration" />}
                iconBgcolor="#1a57a0"
                buttons={[]}
                showDropIcon={true}
                dropMenuDatas={[]}
                dropMenuProps={{
                    collectParams: {
                        favname: getLabel('32269',"集成中心") + getLabel('275',"帮助") + getLabel('30041',"文档"),
                        favouritetype: 1,
                        objid: 0,
                        link: (window.ecologyContentPath || "") + "/spa/integration/static4engine/engine.html#/main/integration/docx",
                        importantlevel: 1
                    }
                }}
            /></div>
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@d6r5bd`}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xi1nx3`} span={3}>
                <div className="leftContent" id="leftPart" >
                    <div id="menuPart">
                        <WeaDropMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaDropMenu@och5yp`} 
                            dropMenu={dropMenuDatas}
                            defaultMenu={this.state.showVersion}
                            onSelect={(item) => this.handleSelect(item)} />
                    </div>
                    <div id="treePart">
                        <WeaTree ecId={`${this && this.props && this.props.ecId || ''}_WeaTree@8r02ww`}
                            className='content'
                            datas={this.getDatas()}
                            selectedKeys={this.state.key}
                            onSelect={(key) => this.setState({key, selectedKey: '1'})}
                        />
                        <div className="download" id="downloadPart" style={{height: 20, paddingTop: 15, margin: 'auto'}}>
                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@69csiv`} className="downloadIcon" type="arrow-down" onClick={() =>this.setState({key: 'download'})}/><a className="downHelpTip" onClick={() =>this.setState({key: 'download'})}>{getLabel('389462',"下载文档")}</a>
                        </div>
                    </div>
                </div>
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@eehykl`} span={21}>
                  <div id="rightPart" style={{overflow: 'auto'}}>
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@m3vk88`} 
                        datas={this.getTopDatas()}
                        keyParam="viewcondition"  //主键
                        onChange={v => this.setState({selectedKey: v})}
                    />
                    <div style={{width: '100%', position: 'fixed'}} id="srcIframe">
                        <iframe src={this.state.key == 'download' ? `${window.ecologyContentPath || ""}/integration/info/${this.state.key}_${this.state.version}.jsp` : `${window.ecologyContentPath || ""}/integration/info/${this.state.key}_${this.state.version}_${this.state.selectedKey}.html${this.state.hash}`} width='98%' height="100%" scrolling="yes" frameBorder="0" align="top" left="0px" top="0px"></iframe>
                    </div>
                  </div>
                </Col> 
            </Row>
        </div>)
    }
}