//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;
}, []);