import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaRichText,
	WeaLocaleProvider,
} from 'ecCom'
import {
	Icon,
} from 'antd'
import {addContentPath} from '../../util/index.js'
const getLabel = WeaLocaleProvider.getLabel;

@inject('hrmContractMaintain')
@observer
export default class RichText extends React.Component {
	constructor(props) {
		super(props);
	}

	componentWillUnmount() {
		this.props.hrmContractMaintain.refreshRichText();
	}

	handleToolsChange = (name, ids, list, type) => {
		return this.transfStr(name, ids, list, type);
	}

	transfStr = (name = '', ids = '', list = [], type = '') => {
		let str = '';
		list.forEach(item => {
			if (name === 'Upload' && type === 'image') {
				str += `<img src='${addContentPath(item.loadlink || item.filelink) }' />`;
			}
			if (name === 'Upload' && type === 'file') {
				str += `<a href='${addContentPath(item.filelink) }' unselectable='off' contenteditable='false' style='cursor:pointer;text-decoration:underline !important;margin-right:8px'>${item.filename}</a>${item.showLoad ? "&nbsp;<a href='javascript:void(0)' unselectable='off' contenteditable='false' href='${item.loadlink}' style='cursor:pointer;text-decoration:underline;margin-right:8px'>下载(" + item.filesize + ")</a>" : ""}<br>`;
			}
			if (name === 'Browser') {
				str += `<a onclick='ecCom.WeaRichText.openAppLink(this,${item.id},"${type}")' href='javascript:void(0);' unselectable='off' contenteditable='false' style='cursor:pointer;text-decoration:underline;margin-right:8px'>${item.name || item.showname}</a>&nbsp;&nbsp;&nbsp;`;
			}
		});
		return str;
	};

	render() {
		const {
			hrmContractMaintain
		} = this.props, {
			richText,
			handleRichTextChange,
			setRichTextStatus,
			exportAttachId,
		} = hrmContractMaintain, {
			value
		} = richText;

		const extentsConfig = [{
			name: 'Upload', // 上传组件
			type: 'image', // 上传组件类型
			show: <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@ye01bj`} type="picture" title='图像'/>, // 使用 antd 图标
			uploadUrl: '/api/doc/upload/uploadFile', // 上传地址
			category: 'string' // 文档目录
		}, ];

		const bottomBarConfig = [{
			name: 'Upload', // 上传组件
			type: 'list', // 上传组件类型
			show: <span style={{ fontSize: 12 }}>
      <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@hb3co4`} type='paper-clip' title='上传附件' /> {getLabel('156',"附件")}</span>, // 使用 antd 图标
			uploadUrl: '/api/doc/upload/uploadFile?model=reply', // 上传地址
			category: '/api/doc/upload/uploadFile?model=reply', // 文档目录
			onListChange: (ids, list) => exportAttachId(ids, list)

		}];

		const basicToolBar = {
			toolbar: [
				['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates',
					'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo',
					'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt',
					'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea',
					'Select', 'Button', 'ImageButton', 'HiddenField',
					'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript',
					'-', 'CopyFormatting', 'RemoveFormat',
					'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',
					'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock',
					'-', 'BidiLtr', 'BidiRtl', 'Language',
					'Link', 'Unlink', 'Anchor',
					'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe',
					'Styles', 'Format', 'Font', 'FontSize',
					'TextColor', 'BGColor', 'Maximize', 'ShowBlocks'
				],
			],
		};

		return <WeaRichText ecId={`${this && this.props && this.props.ecId || ''}_WeaRichText@q76w4q`} 
					value={value} 
					ckConfig={basicToolBar}
					extentsConfig={extentsConfig}
					bottomBarConfig={bottomBarConfig}
					onChange={val => handleRichTextChange(val)} 
					onStatusChange={status => setRichTextStatus(status)}
					onToolsChange={(name, ids, list, type) => this.handleToolsChange(name, ids, list, type)}
				/>
	}
}