// 全局事件派發器
var G = {}
window.G = G;
G.event = new ht.Notifier();

handleInteractive(e) {
    const {kind, data} = e;
    if(kind === 'clickData') {
        // 判斷點擊節點是否帶有標籤，沒有標籤則 return
        let tag = data.getTag();
        if(!tag) return;
        // 判斷標籤名為攝影機
        if(tag.indexOf('camera') >= 0) {
            // 設置指定上一個點擊的攝影機和當前點擊的攝影機
            this.lastClickCamera = this.nowClickCamera;
            this.nowClickCamera = data;
            // 如果之前有點擊攝影機，則初始化攝影機錐體的大小
            if (this.lastClickCamera !== null) {
                let clickRangeNode = this.lastClickCamera.getChildren()._as[0];
                clickRangeNode.s3(300, 150, 500);
            }
            // 如果有點擊攝影機，則設定所點擊攝影機錐體的大小
            if (this.nowClickCamera !== null) {
                let clickRangeNode = this.nowClickCamera.getChildren()._as[0];
                clickRangeNode.s3(5, 5, 500);
            }
            // 獲取點擊攝影機的位置資訊
            var cameraP3 = nowClickCamera.p3();
            // 獲取點擊攝影機的旋轉資訊
            var cameraR3 = nowClickCamera.r3();
            // 獲取點擊攝影機的大小資訊
            var cameraS3 = nowClickCamera.s3();
            // 當前錐體起始位置
            var realP3 = [cameraP3[0], cameraP3[1] + cameraS3[1] / 2, cameraP3[2] + cameraS3[2] / 2]; 
            // 將當前眼睛位置繞著攝影機起始位置旋轉得到正確眼睛位置
            var realEye = getCenter(cameraP3, realP3, cameraR3); 
            // 全局事件派發至攝影機場景改變視角的眼睛 eye 和中心點 center
            G.event.fire({
                type: 'videoCreated',
                eye: realEye,
                center: getCenter(realEye, [realEye[0], realEye[1] ,realEye[2] + 5], cameraR3)
            });

            // 影片彈窗顯示派發
            event.fire(SHOW_VIDEO, {g3dDm: this.g3dDm, cameraName:tag});
        }
    }
    // 雙擊背景隱藏攝影機場景窗口，並初始化攝影機錐體的大小
    if(kind === 'doubleClickBackground') {
        // 影片彈窗隱藏派發
        event.fire(HIDE_VIDEO);
        // 如果之前有點擊攝影機，則初始化攝影機錐體的大小
        if (this.nowClickCamera !== null) {
            let clickRangeNode = this.nowClickCamera.getChildren()._as[0];
            clickRangeNode.s3(300, 150, 500)
        }
        // 設置當前點擊攝影機為空
        this.nowClickCamera = null;
    }
}

// pointA 為 pointB 圍繞的旋轉點
// pointB 為需要旋轉的點
// r3 為旋轉的角度數組 [xAngle, yAngle, zAngle] 為繞著 x, y, z 軸分別旋轉的角度 
const getCenter = function(pointA, pointB, r3) {
    const mtrx = new ht.Math.Matrix4();
    const euler = new ht.Math.Euler();
    const v1 = new ht.Math.Vector3();
    const v2 = new ht.Math.Vector3();

    mtrx.makeRotationFromEuler(euler.set(r3[0], r3[1], r3[2]));

    v1.fromArray(pointB).sub(v2.fromArray(pointA));
    v2.copy(v1).applyMatrix4(mtrx);
    v2.sub(v1);

    return [pointB[0] + v2.x, pointB[1] + v2.y, pointB[2] + v2.z];
};

// 引入 video.js 插件
<script src="./js/video.js"></script>

// 通過全局事件派發到渲染元素 renderHTML 去渲染影片到場景圖紙中
G.event.add(function(e){
    if(e.type==='videoCreated'){
        var div=e.div;
        div.innerHTML='<video id="video" class="video-js vjs-default-skin"><source src="rtmp://10.10.70.57/live/test" type="rtmp/flv"></video>';
        window.player = videojs('video');
    }
});

addTableRow() {
    // 獲取表格節點
    let table = this.table;
    // 通過 axios 的 promise 請求介面數據
    axios.get('getEvent').then(res => {
        // 獲取表格節點滾動資訊的數據綁定
        let tableData = table.a('dataSource');
        // 通過向 unshift() 方法可向滾動資訊數組的開頭添加一個或更多元素
        tableData.unshift(res);
        // 初始化表格的縱向偏移
        table.a('ty', -54);
        // 開啟表格滾動動畫
        ht.Default.startAnim({
            duration: 600,
            // 動畫執行函數 action
            action: (v, t) => {
                table.a({
                    // 通過添加數據後，橫向滾動 100
                    'firstRowTx': 100 * (1 - v),
                    // 第一行行高出現的透明度漸變效果
                    'firstRowOpacity': v,
                    // 縱向偏移 54 的高度
                    'ty': (v - 1) * 54
                });
            }
        });
    });
}