import React, { Component } from 'react';
import { WeaTop, WeaLocaleProvider,WeaTab, WeaPopoverHrm,  } from "ecCom";
import { WeaTableNew } from "comsMobx";
import { Spin } from 'antd';
import {
	observer,
	inject,
} from 'mobx-react';
import '../../style/suggestDetail.less';
import {addContentPath} from '../../util/index.js'
const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;


@inject("suggestDetailStore")
@observer
export default class SuggestDetail extends Component {
	componentWillMount() {
		const {
			location,
			suggestDetailStore
		} = this.props, {
			query
		} = location, {
			setQuery
		} = suggestDetailStore;

		setQuery(query);
	}

	componentDidMount() {
		this.props.suggestDetailStore.getSuggestList();
	}
	

	render() {
		const {
			suggestDetailStore
		} = this.props, {
			selectedKey,
			setSelectedKey,
			tableStore,
			isTable,
			suggestDetail,
			btns,
			createDialog,
			isHandle,
			loading,
		} = suggestDetailStore;

		const datas = [{
			key: "0",
			title: getLabel('16349', "待处理")
		}, {
			key: '1',
			title: getLabel('1454', "已处理")
		}];

		const template = [{
			key: "0",
			name: getLabel(229, "标题"),
			datas: ["suggesttitlespan", "suggesttypespan"]
		}, {
			key: "1",
			name: getLabel(616, "提交人"),
			datas: ["createrspan"]
		}, {
			key: "2",
			name: getLabel('518817', '提交时间'),
			datas: ["createdatespan"]
		}, {
			key: "3",
			name: getLabel('518818', '相关公共组'),
			datas: ["namespan"]
		}, {
			key: "4",
			name: getLabel(15821, "调整类型"),
			datas: ["suggesttypespan"]
		}, {
			key: "5",
			name: getLabel(505586, "详情"),
			datas: ["contentspan"]
		}];

		let content;
		if (loading) {
			content = <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@8ltzb8`} />;
		}else{
			if (isHandle) { //已处理
				content = (
					<div className="suggest-finish-outter">
						<div className="suggest-finish-inner">
							<img src={addContentPath('/hrm/hrm_e9/image/finish.png')} />
							<div>{ getLabel('1454', "已处理")}</div>
						</div>
					</div>
				)
			} else {
				if (isTable) { //以table的形式展现
					content = (
						<React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@69qolq`}>
					    	<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@n1hff4`} datas={datas} keyParam="key" selectedKey={selectedKey} onChange={setSelectedKey}/>
					    	<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@bphcnw`}
					          comsWeaTableStore={tableStore}
					        />
			    		</React.Fragment>
					)
				} else { //以list的形式展现
					content = (
						<div className="hrm-suggest-list">
							{ template.map(t => {
								const {key, name, datas} = t;
								const {creater,createrspan,content,contentspan} = suggestDetail;

								return (
									<div key={key} className="list-item">
					    				<div className="list-item-label">{name}</div>
					    				<div className="list-item-value">{ datas.map( (data,index) => {
					    					const val = suggestDetail[data];
					    					const title = (key === "1") ? createrspan : contentspan;

					    					//一行多值，使用 - 进行拼接
					    					if (datas.length > 1 && index > 0) {
					    						return `-${val}`;
					    					}
					    					//添加小卡片
					    					if (key === "1" || key === "5") {
					    						return (
					    							 <a
											          href={`javaScript:openhrm(${(key === "1") ? creater : content });`}
											          onClick={e => window.pointerXY(e)}
											          title={title}
											        >
											          {title}
											        </a>
					    						)
					    					}
					    					//添加常用组链接
					    					if (key === "3") {
					    						return (
					    							<a onClick={createDialog}>{val}</a>
					    						)
					    					}
					    					return val;
					    					
					    				}) }</div>
					    			</div>
								)
							}) }
						</div>
					)
				}
			}
		}
		
		return (
			<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@0wntxo`}
		      title={getLabel('518816','公共组调整建议单')}
		      icon={<i className='icon-coms-hrm' />}
              iconBgcolor='#217346'
              buttons={btns}
		    >	
		    	{content}
		    	<WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@zm7jkn`} />
		    </WeaTop>
		);
	}
}