//vw vh单位 w3c的官方解释 vw：1% of viewport’s width vh：1% of viewport’s height
//例如，设计稿的宽度为1920px，则1vw=19.2px，为了方便计算，我们将html元素的font-size大小设置为100px，也就是5.208vw=100px。
body,html {
     font-size:5.208vw
}

//监听窗口的oversize事件，来动态计算根节点字体大小，再配合rem做适配
(function(doc, win) {
    const docEl = doc.documentElement
    const resizeEvt = "orientationchange" in window ? "orientationchange" : "resize"
    const recalc = function() {
      let clientWidth = docEl.clientWidth
      if (!clientWidth) return
      docEl.style.fontSize = 100 * (clientWidth / 1920) + "px"
    }
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener("DOMContentLoaded", recalc, false)
})(document, window)

// 基于设置的设计稿尺寸 换算对应的宽高比
useEffect(() => {
    const wR = boxSize.width / viewWidth;
    const hR = boxSize.height / viewHeight;
 
    setBgScaleRatio(wR);
    setBgHeightScaleRatio(hR);
}, [boxSize, viewWidth, viewHeight]);
 
//根据等宽、等高、全屏等不同的缩放比例 计算scale值
const getScale = (proportion, x, y) => {
    if (proportion === "radioWidth") {
        return `scaleX(${x})`
    }
    if (proportion === "radioHeight") {
        return `scaleY(${y})`
    }
    return `scale(${x}, ${y})`
}

// initialization echarts
const renderNewEcharts = () => {
    // 1. new echarts instance
    const echartObj = updateEChartsOption();
    // 2. bind events
    bindEvents(echartObj, onEvents || {});
    // 3. on chart ready
    if (typeof onChartReady === "function") onChartReady(echartObj);
    // 4. on resize
    echartObj.resize();
};
 
// bind the events
const bindEvents = (instance, events) => {
    const _bindEvent = (eventName, func) => {
       instance.on(eventName, (param) => {
           func(param, instance);
       });
    };
 
    // loop and bind
    for (const eventName in events) {
        if (Object.prototype.hasOwnProperty.call(events, eventName)) {
            _bindEvent(eventName, events[eventName]);
        }
    }
};
 
// dispose echarts and clear size-sensor
const dispose = () => {
    if ($chartEl.current) {
       clear($chartEl.current);
       // dispose echarts instance
       (echartsLib || echarts).dispose($chartEl.current);
    }
};

const DataV: React.FC<DataVProps> = (props) => {
    const { config } = props;
    const [renderCounter, setRenderCounter] = useState(0);
    const $dataVWarpEl = useRef(null);
    const $componentEl = useRef(null);
 
    useEffect(() => {
        // 绑定容器size监听
        const resizefunc = debounce(() => {
            $componentEl.resize();
        }, 500)
       // fixme
       addResizeListener($dataVWarpEl.current, resizefunc);
       return () => {
           // 清除订阅
           removeResizeListener($dataVWarpEl.current, resizefunc);
       };
    }, []);
 
    return (
        <DataVWarp ref={$dataVWarpEl}>
            <CompRender config={config} ref={$componentEl} />
        </DataVWarp>
    );
};

{
    headerGroupName: "公共配置",                         //配置所属类型
    headerGroupKey: "widget",                           //配置所属类型key值 相同的key值都归属一类
    name: "标题名称",                                    //属性名称
    valueType: ["string"],                              //属性值类型
    optionLabels: [],                                   //服务下拉列表、多选框等控件的标签名
    optionValues: [],                                   //服务下拉列表、多选框等控件的标签值
    tip: false,                                         //配置项的 Tooltip 注解
    ui: ["input"],                                      //使用的控件类型
    class: false,                                       //控件类名，定制控件样式
    css: { width: "50%"},                               //修改控件样式
    dependencies: ["widget,title.show,true"],           //属性之间的联动，规则["配置所属类型, 属性key, 属性值"]
    depContext: DepCommonShowState,                     //属性之间的校验回调方法
    compShow: ["line"],                                 //哪些组件可配置
    dataV: { key: "title.text", value: "" },            //配置的key值和默认value值
},

// CSS Transforms support (default)
if (useCSSTransforms) {
    if (activeResize) {
        const { width, height, handle } = activeResize;
        const clonePos = { ...pos };
        if (["w", "nw", "sw"].includes(handle)) {
            clonePos.left -= clonePos.width - width;
        }
        if (["n", "nw", "ne"].includes(handle)) {
            clonePos.top -= clonePos.height - height;
        }
        style = setTransform(clonePos, this.props.angle);
    } else {
        style = setTransform(pos, this.props.angle);
    }
}

// 每次拖拽时zIndex要在当前最大zIndex基础上 + 1，并返回给组件使用
const getAfterMaxZIndex = useCallback(i => {
    if (i === curDragItemI) {
        return;
    }
    setCurDragItemI(i);
    setMaxZIndex(maxZIndex => maxZIndex + 1);
    return maxZIndex;
}, []);