/**
 *
 * 一站式请勿使用此组件
 * 2020年5月9日 拖拽组件
 * 钟是志
 * 黔南的 录取通知书打印 位置设置
 * */

import React, { Fragment, Component } from 'react';
import styles from './index.less';
import ButtonDiy from '@/baseComponent/ButtonDiy';
import Shell from '@/baseComponent/Shell';
import { ModalConfirm } from '@/baseComponent/Modal';

export default class FormatSetting extends Component {
	dragEventList = () => {
		const { updateFormatSettingObject } = this.props;
		let draggedRef = null;
		document.addEventListener(
			'dragstart',
			function(event) {
				// 保存拖动元素的引用(ref.)
				draggedRef = event.target;
				// 使其半透明
				event.target.style.opacity = 0.5;
			},
			false,
		);
		document.addEventListener(
			'dragend',
			function(event) {
				// 重置透明度
				event.target.style.opacity = '';
			},
			false,
		);

		/* 放下目标节点时触发事件 */
		document.addEventListener(
			'dragover',
			function(event) {
				// 阻止默认动作
				event.preventDefault();
			},
			false,
		);
		document.addEventListener(
			'drop',
			function(event) {
				// 阻止默认动作（如打开一些元素的链接）
				event.preventDefault();
				// 将拖动的元素到所选择的放置目标节点中
				if (event.target.id === 'dropZone') {
					const left = event.offsetX;
					if (left > event.target.width - draggedRef.offsetWidth - 10) {
						console.log('拖拽到了图片区域外部,不能进行拖拽');
						return false;
					}
					const top = event.offsetY;
					updateFormatSettingObject(draggedRef.id, left, top);
					draggedRef.style.left = left; // `${left}px`;
					draggedRef.style.top = top; // `${top}px`;
				}
			},
			false,
		);
	};

	componentDidMount() {
		this.dragEventList();
	}

	initConfig = () => {
		ModalConfirm('您确定初始化打印录取通知书格式吗?', {
			onOk: () => {
				this.props.initConfig();
			},
		});
	};

	render() {
		const { bgImage, formatSettingObject, saveConfig } = this.props;

		return (
			<Fragment>
				<Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
					<div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
						<ButtonDiy name="保存" className="primary" handleClick={saveConfig} />
						<ButtonDiy name={'初始化格式'} handleClick={this.initConfig} />
					</div>
				</Shell>
				<div className={styles.outSideDiv}>
					<div>
						<img
							src={bgImage}
							id={'dropZone'}
							draggable={false}
							className={styles.bgimage}
							alt={'背景图'}
						/>
						{formatSettingObject.map((x, index) => {
							return (
								<div
									draggable={true}
									className={styles.inSideItem}
									key={index}
									id={x.name}
									style={x.style}>
									{x.name}
								</div>
							);
						})}
					</div>
				</div>
			</Fragment>
		);
	}
}
/***
 * formatSettingObject: {
 *   content_set:  {
 *     font: "宋体"
       isNeedConfig: true
       key: "JjqCiRYamxs"
       name: "content_set"
       size: "12"
       style: {top: 300, left: 50}
       title: "--详细内容--"
 *   }
 * }
 *
 * */