/**
 * cretate by wangzhiyong
 * date:2017-08-20
 * desc 对应bootstrap中风格布局中的容器
 */
import React from 'react';
import propsTran from "../libs/propsTran";
import func from "../libs/func"
import PropTypes from "prop-types";
import "../Sass/Layout/Layout.css"
class Container extends React.PureComponent {
    constructor(props) {
        super(props);
        this.inputs = [];//ref
        this.validate = this.validate.bind(this);
        this.getData = this.getData.bind(this);
        this.setData = this.setData.bind(this);
        this.clearData = this.clearData.bind(this);
        this.getRefs = this.getRefs.bind(this);
    }
    static propTypes = {
        size:PropTypes.oneOf(["","fluid","xxl","xl","lg","md","sm"]),
        style: PropTypes.object,
        className: PropTypes.string,
    }
    static defaultProps = {
        size:"",//
        style: {},
        className: ""
    }

    /**
      * 合并两种refs引用方式
      * @returns 
      */
    getRefs() {
        let combinxRefs = [];//合并新旧语法
        for (let i = 0; i < this.inputs.length; i++) {
            let cref = this.inputs[i].current;
            if (cref) {
                combinxRefs.push(cref);
            }
        }
        for (let r in this.refs) {
            combinxRefs.push(this.refs[r]);
        }
        return combinxRefs;
    }
    /**
     * 验证
     * @returns 
     */
    validate() {
        let isva = true;
        let combinxRefs = this.getRefs();
        for (let i = 0; i < combinxRefs.length; i++) {
            let cref = combinxRefs[i];
            if (isva) {//如果验证是正确的，继续获取值
                isva = cref && cref.validate ? cref.validate() : isva;
            }
            else {//如果前一个验证失败，则验证不拿值
                cref && cref.validate ? cref.validate() : void (0);
            }

        }
        return isva;
    }
    /**
     * 获取值
     * @returns 
     */
    getData() {
        var data = {}
        let combinxRefs = this.getRefs();
        for (let i = 0; i < combinxRefs.length; i++) {
            let cref = combinxRefs[i];
            if (cref && cref.props.name && cref.getValue) {//说明是表单控件
                if (cref.props.name.indexOf(",") > -1) {//含有多个字段
                    var nameSplit = cref.props.name.split(",");
                    if (cref.getValue()) {
                        var valueSplit = cref.getValue().split(",");
                        for (let index = 0; index < nameSplit.length; index++) {
                            if (index < valueSplit.length) {
                                data[nameSplit[index]] = valueSplit[index];
                            }
                        }

                    }
                    else {
                        for (let index = 0; index < nameSplit.length; index++) {
                            data[nameSplit[index]] = "";
                        }
                    }
                }
                else {
                    data[cref.props.name] = cref.getValue();
                }
            }
            else if (cref.getData) {//布局组件或者表单组件
                data = Object.assign({}, data, cref.getData())
            }


        }
        return data;
    }
    /**
     * 设置值
     * @param {*} data 
     * @returns 
     */
    setData(data) {//设置值,data是对象

        if (!data) {
            return;
        }
        let combinxRefs = this.getRefs();
        for (let i = 0; i < combinxRefs.length; i++) {
            let cref = combinxRefs[i];
            if (cref && cref.props.name && data[cref.props.name] !==null && data[cref.props.name] !==undefined) {
                cref.setValue && cref.setValue(data[cref.props.name]);
            }
            else if (cref && cref.setData) {//表单或者布局组件
                cref.setData(data);
            }
        }
    }
    clearData() {
        let combinxRefs = this.getRefs();
        for (let i = 0; i < combinxRefs.length; i++) {
            let cref = combinxRefs[i];
            cref && cref.setValue && cref.setValue("");
            cref && cref.clearData && cref.clearData();
        }
    }
    /**
   * 得到表单中标签的最大宽度，方便对齐
   */
    computerLabelWidth() {
        let maxWidth = 0;//得到最大宽度

        React.Children.map(this.props.children, (child, index) => {

            if (child && child.props && child.props.label) {
                let labelStyle = func.clone(child.labelStyle) || {};
                if (labelStyle && labelStyle.width) {
                    //如果设置宽度，则不参与计算
                } else {
                    let width = func.charWidth(child.props.label);//大概计算宽度 todo
                    maxWidth = maxWidth < width ? width : maxWidth;
                    maxWidth = maxWidth > 160 ? 160 : maxWidth;//超过160就不管了，否则很难看
                }

            }
        })
        return maxWidth;
    }
    render() {
        this.inputs = [];//先清空
        let maxWidth = this.computerLabelWidth();
        return <div className={" wasabi-container container-"+(this.props.size??"")+" " + this.props.className} style={this.props.style}>{
            React.Children.map(this.props.children, (child, index) => {
                if (typeof child.type !== "function") {//非react组件
                    return child;
                } else {
                    //统一处理标签样式问题，方便对齐
                    let labelStyle = propsTran.handlerLabelStyle(child.labelStyle, maxWidth);
                    let ref = child.ref ? child.ref : React.createRef();
                    typeof ref === "object" ? this.inputs.push(ref) : void (0);//如果对象型添加，字符型（旧语法）事后通过refs来获取
                    return React.cloneElement(child,
                        {
                            labelStyle: labelStyle,
                            readOnly: this.props.disabled ? this.props.disabled : child.props.readOnly,
                            key: index, ref: ref
                        })
                }

            })
        }</div>;
    }

}

export default Container;