/**
 * 编辑模式组件
 */
import React, {Component} from "react";
import styles from './index.css';
import store from '../../store/index';
export default class Edit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pId: "",
            msgHref: store
                .getState()
                .superiorHref
                .href || "", //与父窗口交互地址
        };
    }
    componentDidMount() {
        store.subscribe(() => {
            let {
                superiorHref: {
                    href = ''
                }
            } = store.getState();
            this.setState({msgHref: href});
        });
    }
    componentWillReceiveProps(props) {
        const {data: {
                    pId
                }} = props, {pId: _pId} = this.state;
        _pId != pId && this.setState({pId});
    }
    msgEvent = () => {
        //针对每个组件进行消息数据监听 只监听当前编辑的
        window.onmessage = e => {
            const {data, data: {
                    type
                }} = e;
            if (["edit"].includes(type)) {
                const {config, config: {
                        pId
                    }} = data;
                if (this.state.pId === pId) {
                    //恢复缓存函数 
                    this.funH(config,this.funArr); 
                    //同步数据到父组件
                    typeof this.props.upData == 'function' && this
                        .props
                        .upData(config);
                }
            } else if (['reload', 'reset'].includes(type)) {
                location.reload();
            } else {
                //console.log("其他消息reset");
            }
        };
    }
    //函数缓存
    funArr = {}
    //对函数编辑处理
    fun = (o, fo = {}) => {
        if (typeof o == "object") {
            for (let x in o) {
                if (typeof o[x] == "function") {
                    fo[x] = o[x];
                    o[x] = '';
                } else {
                    fo[x] = {};
                    this.fun(o[x], fo[x]);
                }
            }
        }
        return fo;
    }
    //恢复函数
    funH = (o, fo = {}) => {
        if (typeof o == "object") {
            for (let x in o) {
                if (typeof fo[x] == "function") {
                    o[x] = fo[x];
                } else {
                    this.funH(o[x], fo[x]);
                }
            }
        }
        return fo;
    }
    onMsg = (type, position) => {
        this.msgEvent();
        const {data,data:{edit}} = this.props;
        this.funArr = this.fun(data);
        const dataObj = {
            type, //编辑指令
            config: data, //数据
            editName:edit,
            position
        };
        top.postMessage(dataObj, this.state.msgHref);
    }
    resetMsg = () => {
        this.onMsg('reset');
    }
    editMsg = e => {
        this.onMsg('edit', e.clientX / window.innerWidth * 100);
    }
    showMsg = () => {
        this.onMsg('release');
    }
    render() {
        const {msgHref} = this.state, {
                port,
                style = {},
                data: _data,
                data: {
                    data = {}
                }
            } = this.props;
        //存在编辑模板及存在消息地址 --  是否启用编辑模板 用数据控制
        if (_data.edit && msgHref) {
            return (
                <div className={styles.editBox} style={style}>
                    <span>{port}</span>
                    <div className={styles.editBoxItem + " " + styles.edit} onClick={this.editMsg}>
                        编辑
                    </div>
                    <div
                        className={styles.editBoxItem + " " + styles.reset}
                        onClick={this.resetMsg}>
                        重置
                    </div>
                    <div className={styles.editBoxItem + " " + styles.show} onClick={this.showMsg}>
                        预览
                    </div>
                </div>
            );
        } else {
            return '';
        }
    }
}
export {
    Edit
}