import { Button, Radio, Slider, message, Modal } from 'antd';
import * as React from 'react';
import { WeaLocaleProvider, WeaInputSearch, WeaBrowser } from 'ecCom';
import D3Tree from './RectTree';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import './index.less';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class MindMap extends React.Component {
    searchedNode = []
    constructor(props) {
        super(props);
        this.state = {
           layout : '0',
           scale : 10
        }
     
    }

    render() {
        const { store } = this.props;
        const { nodeForm, topButtons, hasChildren,path,canEdit } =  this.props;
        const dataParams = path?{pathid:path.id,nodeid:nodeForm.id}:{};
        return (
            <div className="wea-edc-path-designer">
                <div className="tree-layout-toggle d3-tree-toggle">
                    {topButtons.length > 0 && <Button.Group ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@j3i2ly`}>
                        {
                            topButtons
                        }
                    </Button.Group>}
                    <Radio.Group ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@u16jis`} value={this.state.layout} onChange={this.changeLayout}>
                        <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@c6o7ni`} value="0">{getLabel(22986, '左')}</Radio.Button>
                        <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@w1ejve`} value="2">{getLabel(22988, '右')}</Radio.Button>
                        <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@2wzfrk`} value="1">{getLabel(31276, '上')}</Radio.Button>
                        <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@kxn5bw`} value="3">{getLabel(23010, '下')}</Radio.Button>
                    </Radio.Group>
                    <div className="edc-zoom-line">
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@q2h78q`}
                            onClick={this.zoomOut}
                        >
                            <i className="anticon">
                                <svg viewBox="64 64 896 896" class="" data-icon="zoom-out" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"></path></svg></i>
                        </Button>
                        <Slider ecId={`${this && this.props && this.props.ecId || ''}_Slider@reu4gh`}
                            value={this.state.scale}
                            marks={{ 1: '10%', 20: '200%', [this.state.scale]: `${this.state.scale * 10}%` }}
                            min={1} max={20}
                            tipFormatter={value => `${value * 10}%`}
                            onChange={this.changeScale}
                        >
                        </Slider>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1rejrr`}
                            onClick={this.zoomIn}
                        >
                            <i className="anticon">
                                <svg viewBox="64 64 896 896" class="" data-icon="zoom-in" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"></path></svg>
                            </i>
                        </Button>
                    </div>
                    <Button.Group ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@0qilil`}>
                        <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@5ddxps`}
                            placeholder={getLabel('502644', '搜索节点')}
                            onSearch={this.searchNode}
                            onChange={this.changeSearchValue}
                        />
                    </Button.Group>
                </div >
                {
                    this.props.pathType === 1 &&
                        <D3Tree ecId={`${this && this.props && this.props.ecId || ''}_D3Tree@jgt9oh`}
                            data={toJS(this.props.data)}
                            onClick={this.props.onClick}
                            showRight={this.props.showRight}
                            showDialog={this.props.showDialog}
                            renderRight={this.props.renderRight}
                            renderRightTitle={this.props.renderRightTitle}
                            layout={this.state.layout}
                            style={{ height: 'calc(100% - 32px)', top: 50 }}
                            scale={this.state.scale}
                            zoom={this.zoom}
                            ref={ref => store.d3Tree  = ref}
                            showMenu={true}
                            menus={this.props.rightMenus}
                            closeRight={(bool)=>{this.props.closeRight(bool)}}
                            closeDialog={(bool)=>{this.props.closeDialog(bool)}}
                            // onDelete={(readonly || !nodeForm.parentid) || this.deleteNode}
                            // onAddChild={readonly || this.addChildren}
                            // onDeleteChild={(readonly) || (hasChildren && this.deleteChildren)}
                            // onSynchro={readonly || this.synchronize}
                            showname={this.getShowname}
                            desc="hrmNames"
                            desc2="description"
                            desc3="overstr"
                        ></D3Tree> 
                }
              
            </div >
        )
    }

  
    getShowname = (d) => {
        return `${d.name}`;
    }
    changeSearchValue = () => {
        this.searchedNode = [];
    }
    searchNode = (value) => {
        const { store, params } = this.props;
        if (!value) {
            this.searchedNode = [];
            return;
        }
        if (store.d3Tree ) {
            if (this.searchedNode.length === 0) {
                this.timer = 0;
                this.searchedNode = store.d3Tree .searchNode(value.toLowerCase());
            }
            const length = this.searchedNode.length;
            if (length > 0) {
                store.d3Tree .centerNode(this.searchedNode[this.timer % length]);
                this.timer++;
            }
        }
    }
    zoom = (scale) => {
        // this.props.changeScale(parseInt(scale * 10));
        this.setState({
            scale : parseInt(scale * 10)
        });
    }
    zoomIn = () => {
        // this.props.changeScale(Math.min(this.props.scale + 1, 30));
        this.setState({
            scale : Math.min(this.state.scale + 1, 30)
        });
    }
    zoomOut = () => {
        // this.props.changeScale(Math.max(this.props.scale - 1, 1));
        this.setState({
            scale : Math.max(this.state.scale - 1, 1)
        });
    }
    changeScale = (scale) => {
        this.setState({
            scale : scale
        });
	}
    importPath = () => {
        this.props.openPathTemplateDialog();
    }
    setCombine = () => {
        const { edcPathDesignerStore: store, params } = this.props;
        this.props.combineSetDialogStore.open({ appid: params.appid });
    }
    changeLayout = (e) => {
        // const { edcPathDesignerStore: store } = this.props;
        this.searchedNode = [];
        // this.props.changeLayout(e.target.value);
        this.setState({
            layout : e.target.value
        });
    }

    saveNode = () => {
        this.props.saveNode();
    }
    saveAsTemplate = () => {
        const { edcPathDesignerStore: store } = this.props;
        if (this.props.d3Tree) {
            const { edcPathDesignerStore: store } = this.props;
            const svg = this.props.d3Tree .baseSvg;
            const g = this.props.d3Tree .svgGroup;
            const serializer = new XMLSerializer();
            let source = serializer.serializeToString(svg.node());
            source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
            const url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
            const canvas = document.createElement("canvas");
            const { width, height } = svg.node().getBoundingClientRect();
            canvas.width = width;
            canvas.height = height;
            const context = canvas.getContext("2d");
            const image = new Image;
            image.src = url;
            image.onload = () => {
                context.drawImage(image, 50, 25);
                const img = canvas.toDataURL("image/png");
                this.props.saveAsTemplate(img);
            }
        }
    }
    addChildren = () => {
        const { edcPathDesignerStore: store } = this.props;
        const { nodeForm } = store;
        this.props.setChildOpreator([]);
        this.props.allChildOpreator(nodeForm.id).then((childOpreator) => {
            this.props.setChildOpreator(childOpreator);
            if (this.browser) {
                this.browser.openModal();
                const selectPerson = (ids, names, objs) => {
                    if (objs.length > 99) {
                        message.warn(getLabel('502645', '下级节点不能超过99个'));
                        this.browser.openModal();
                        return;
                    }
                    const { edcPathDesignerStore: store } = this.props;
                    const oldids = childOpreator.map(d => d.id);
                    const newids = objs.filter(d => oldids.indexOf(d.id) === -1).map(d => d.id);
                    if (newids.length === 0) {
                        message.warn(getLabel('502646', '请选择需要添加的人员'));
                        return;
                    }
                    this.props.addNodes(nodeForm.id, newids.join(','));
                }
                this.selectPerson = selectPerson;
            }
        });
    }
    addNodes = (ids, names, objs) => {
        this.selectPerson(ids, names, objs);
    }

    deleteNode = () => {
        Modal.confirm({
            title: getLabel('505951','删除节点') ,
            content: getLabel('505952','确认要删除选中的节点？') ,
            onOk: () => {
                const { edcPathDesignerStore: store } = this.props;
                const { nodeForm } = store;
                this.props.deleteNode(nodeForm.id);
            }
        });
    }

    deleteChildren = () => {
        Modal.confirm({
            title: getLabel('505953','删除节点') ,
            content: getLabel('505954','确认要删除所有下级节点？') ,
            onOk: () => {
                const { edcPathDesignerStore: store } = this.props;
                const { nodeForm } = store;
                this.props.deleteChildren(nodeForm.id);
            }
        });
    }

    synchronize = () => {
        if (this.nodeBrowser) {
            this.nodeBrowser.openModal();
        }
    }

}