import React, { Component } from "react";
import {
	observer,
	inject
} from 'mobx-react'
import { WeaTree, WeaTreeTest, WeaLocaleProvider, WeaInputSearch } from "ecCom";
import { toJS } from 'mobx'
import random from "lodash/random";
import { getJobTree } from '../../apis/post.js'
const getLabel = WeaLocaleProvider.getLabel;

const getTrees = (
	props,
	style = {
		position: 'absolute',
		height: '100%',
		width: '100%',
		overflow: 'auto',
		overflowX: 'hidden'
	}
) => (
		<div>
			<div style={style}>
				<div className={'wea-asynctree-top'}>
					<b style={{ display: 'inline-block' }}>{getLabel('82664', "岗位体系")}</b>
					<WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@gi9o4g`}
						value={props.searchvalue}
						style={{ display: 'inline-block', width: '150px' }}
						onSearchChange={props.SearchValueChange}
						onSearch={props.onSearch}
					/>
				</div>
				<WeaTree ecId={`${this && this.props && this.props.ecId || ''}_WeaTree@ukwkzl`} style={{ height: '800px', width: '300px' }} {...props} />
			</div>
		</div>
	);
@inject('hrmNewPost')
@observer
export default class Main extends Component {
	constructor(props) {
		super(props);
		this.state = {
			expandedKeys: ['0'] // 默认展开父节点
		};
	}

	componentDidMount () {
		const { asyncTreeInit } = this.props.hrmNewPost;
		asyncTreeInit()
	}
	loadDataHandle = (item) => {
		let asyncTreeSubData = {}
		const { handleOrgTreeNodeClick, orgTree } = this.props.hrmNewPost
		handleOrgTreeNodeClick(item.id, item)
		return (
			// 模拟异步加载
			getJobTree(orgTree).then(data => {
				asyncTreeSubData = {}
				asyncTreeSubData = data.datas;
				return data = {
					datas: asyncTreeSubData
				};
			}))

	}
	onSelectHandle = (event, ids, nodeids, nodes) => {
		const { handleOrgTreeNodeClick } = this.props.hrmNewPost;
		if (!nodeids[0].isParent) {
			handleOrgTreeNodeClick(nodeids[0].id, nodeids[0])
		} else {
			this.loadDataHandle(nodeids[0])
		}

	}
	onSearchHandle = (value) => {
		const { onSearchHandleMobx } = this.props.hrmNewPost;
		onSearchHandleMobx(value)
	}
	SearchValueChange = (value) => {
		const { onSearchHandleMobx } = this.props.hrmNewPost;
		onSearchHandleMobx(value)
	}

	render = () => {
		const { expandedKeys } = this.state;
		const { asyncTreeData, handleOrgTreeNodeClick, searchData, searchFlag, searchvalue } = this.props.hrmNewPost;
		const Datasource = (searchFlag == 0 ? toJS(asyncTreeData) : toJS(searchData));
		return getTrees({
			searchvalue: searchvalue,
			checkStrictly: false,
			datas: Datasource,
			expandedKeys,
			loadData: this.loadDataHandle,
			onSelect: this.onSelectHandle,
			onSearch: this.onSearchHandle,
			SearchValueChange: this.SearchValueChange,
		});
	};
}