import {
    KSJSceneViewApi,
    KSJMeasureTool,
    KSJViewportEffectApi,
    KSJMarkerApi,
    KSJPathRoamingApi,
    KSJKeyframeRoamingApi,
    KSJModelControlApi,
    KSJElementApi,
} from "bjksj-sdk";
import "./App.css";
function SceneView() {
    return (
        <div className="detail-content">
            <div className="detail-content-title">模型展示视角</div>
            <div className="detail-content-button">
                <button
                    onClick={() => {
                        KSJSceneViewApi.viewRotationFront();
                    }}
                >
                    前视图
                </button>
                <button
                    onClick={() => {
                        KSJSceneViewApi.viewRotationBack();
                    }}
                >
                    后视图
                </button>
                <button
                    onClick={() => {
                        KSJSceneViewApi.viewRotationLeft();
                    }}
                >
                    左视图
                </button>
                <button
                    onClick={() => {
                        KSJSceneViewApi.viewRotationRight();
                    }}
                >
                    右视图
                </button>
                <button
                    onClick={() => {
                        KSJSceneViewApi.viewRotationTop();
                    }}
                >
                    顶视图
                </button>
                <button
                    onClick={() => {
                        KSJSceneViewApi.viewRotationBottom();
                    }}
                >
                    底视图
                </button>
            </div>
            <div className="detail-content-title">模型视图</div>
            <div className="detail-content-button">
                <button
                    onClick={() => {
                        KSJSceneViewApi.setActiveView(KSJSceneViewApi.getDefault3DView());
                    }}
                >
                    3D视图
                </button>
            </div>
            <div className="detail-content-title">视角设置</div>
            <div className="detail-content-button">
                <button
                    onClick={() => {
                        KSJSceneViewApi.SaveOrUpdateView({ viewName: "viewname" });
                    }}
                >
                    设置默认视点（保存缩略图）
                </button>
                <button
                    onClick={() => {
                        KSJSceneViewApi.reloadView({ viewName: "viewname" });
                    }}
                >
                    恢复默认视图
                </button>
            </div>
            <div className="detail-content-title">自定义标签</div>
            <div className="detail-content-button">
                {/* 图片标签文件选择 */}
                <input
                    id="file-input3"
                    type="file"
                    onChange={async (e) => {
                        const files = e.target.files;
                        if (files && files.length > 0) {
                            const file = files[0];
                            // 将图片File转为Base64
                            const reader = new FileReader();
                            reader.readAsDataURL(file);
                            reader.onload = async () => {
                                await KSJModelControlApi.setWorkingIModel();
                                // 添加图片标签
                                KSJMarkerApi.createPrctureMarkObj({
                                    view: 1,
                                    markType: "位置",
                                    markName: "图片标签",
                                    markNote: "",
                                    picture: reader.result,
                                    pointx: 17.59,
                                    pointy: -5.42,
                                    pointz: 4.5,
                                });
                            };
                        }
                    }}
                    style={{ display: "none" }}
                />
                <button
                    onClick={() => {
                        document.getElementById("file-input3").click();
                    }}
                >
                    加载图片标签
                </button>
                <button
                    onClick={async () => {
                        await KSJModelControlApi.setWorkingIModel();
                        await KSJMarkerApi.createTextMarkObj({
                            view: 1,
                            markType: "位置",
                            markName: "文字标签222",
                            markNote: "文字标签",
                            text: "文字标签",
                            pointx: 17.59,
                            pointy: -5.42,
                            pointz: 4.5,
                        });
                    }}
                >
                    加载文字标签
                </button>
                <button
                    onClick={async () => {
                        await KSJModelControlApi.setWorkingIModel();
                        await KSJMarkerApi.deleteAllMarkObj();
                    }}
                >
                    删除全部
                </button>
                <button
                    onClick={async () => {
                        await KSJModelControlApi.setWorkingIModel();
                        await KSJMarkerApi.showMarksObjs();
                    }}
                >
                    显示标签
                </button>
                <button
                    onClick={async () => {
                        await KSJMarkerApi.zoomToByName({ name: "图片标签" });
                    }}
                >
                    调整相机位置（定位到标签）
                </button>
            </div>
            <div className="detail-content-title">自定义视点漫游</div>
            <div className="detail-content-button">
                <button
                    onClick={async () => {
                        await KSJModelControlApi.setWorkingIModel();
                        KSJKeyframeRoamingApi.createTrack({ roadName: "关键帧漫游" });
                    }}
                >
                    添加关键帧路径
                </button>
                <button
                    onClick={async () => {
                        KSJKeyframeRoamingApi.AddKeyFrame({
                            roadName: "关键帧漫游",
                            tim: 10,
                        });
                    }}
                >
                    添加关键帧
                </button>
                <button
                    onClick={async () => {
                        await KSJModelControlApi.setWorkingIModel();
                        let points = [
                            { pointx: 31.64, pointy: -8.9, pointz: 0 },
                            { pointx: 0, pointy: 0, pointz: 0 },
                            { pointx: -25.25, pointy: -8.9, pointz: 0 },
                            { pointx: -100, pointy: -8.9, pointz: 0 },
                        ];
                        KSJPathRoamingApi.createTrackFromPts({
                            roadName: "轨迹漫游",
                            points: points,
                        });
                    }}
                >
                    创建轨迹漫游
                </button>
                <button
                    onClick={async () => {
                        await KSJPathRoamingApi.GetSpeed({ roadName: "轨迹漫游" });
                    }}
                >
                    轨迹漫游移动速度
                </button>
                <button
                    onClick={async () => {
                        await KSJPathRoamingApi.getRoamingTime({ roadName: "轨迹漫游" });
                    }}
                >
                    漫游总时间
                </button>
                <button
                    onClick={async () => {
                        await KSJKeyframeRoamingApi.getRoamingTime({
                            roadName: "关键帧漫游",
                        });
                    }}
                >
                    关键帧运动时间
                </button>
                <button
                    onClick={async () => {
                        await KSJKeyframeRoamingApi.StartKeyframeRoamingWithUI({
                            roadName: "关键帧漫游",
                        });
                    }}
                >
                    开始关键帧漫游(带进度条)
                </button>
                <button
                    onClick={async () => {
                        await KSJKeyframeRoamingApi.StartKeyframeRoaming({
                            roadName: "关键帧漫游",
                        });
                    }}
                >
                    开始关键帧漫游
                </button>
                <button
                    onClick={async () => {
                        await KSJKeyframeRoamingApi.PauseRoaming();
                    }}
                >
                    暂停关键帧漫游
                </button>
                <button
                    onClick={async () => {
                        await KSJKeyframeRoamingApi.ContinueRoaming();
                    }}
                >
                    恢复关键帧漫游
                </button>
                <button
                    onClick={async () => {
                        await KSJKeyframeRoamingApi.StopRoaming();
                    }}
                >
                    停止关键帧漫游
                </button>
                <button
                    onClick={() => {
                        KSJPathRoamingApi.StartPathRoamingWithUI({ roadName: "轨迹漫游" });
                    }}
                >
                    开始轨迹漫游(带进度条)
                </button>
                <button
                    onClick={() => {
                        KSJPathRoamingApi.StartPathRoaming({ roadName: "轨迹漫游" });
                    }}
                >
                    开始轨迹漫游
                </button>
                <button
                    onClick={() => {
                        KSJPathRoamingApi.PauseRoaming();
                    }}
                >
                    暂停轨迹漫游
                </button>
                <button
                    onClick={() => {
                        KSJPathRoamingApi.ContinueRoaming();
                    }}
                >
                    恢复轨迹漫游
                </button>
                <button
                    onClick={() => {
                        KSJPathRoamingApi.StopRoaming();
                    }}
                >
                    停止轨迹漫游
                </button>
                <button
                    onClick={() => {
                        KSJSceneViewApi.SaveOrUpdateView({ viewName: "viewname" });
                    }}
                >
                    设置默认视点（保存缩略图）
                </button>
                <button
                    onClick={() => {
                        KSJSceneViewApi.reloadView({ viewName: "viewname" });
                    }}
                >
                    恢复默认视图
                </button>
                <button
                    onClick={() => {
                        KSJSceneViewApi.FlyRoaming();
                    }}
                >
                    飞行漫游
                </button>
            </div>
            <div className="detail-content-title">测量相关</div>
            <div className="detail-content-button">
                <button
                    onClick={() => {
                        KSJMeasureTool.measureDistance();
                    }}
                >
                    测量距离
                </button>
                <button
                    onClick={() => {
                        KSJMeasureTool.measureLocation();
                    }}
                >
                    位置测量
                </button>
                <button
                    onClick={() => {
                        KSJMeasureTool.measureArea();
                    }}
                >
                    面积测量
                </button>
                <button
                    onClick={() => {
                        KSJMeasureTool.measureLength();
                    }}
                >
                    长度测量
                </button>
                <button
                    onClick={() => {
                        KSJMeasureTool.measureVolume();
                    }}
                >
                    体积测量
                </button>
            </div>
            <div className="detail-content-title">模型及构件效果</div>
            <div className="detail-content-button">
                <button
                    onClick={() => {
                        KSJViewportEffectApi.dropAllEffect();
                    }}
                >
                    取消效果
                </button>
                <button
                    onClick={() => {
                        KSJViewportEffectApi.setSaturation({ saturation: 4 });
                    }}
                >
                    设置饱和度
                </button>
                <button
                    onClick={() => {
                        KSJViewportEffectApi.closeSaturation();
                    }}
                >
                    关闭饱和度
                </button>
                <button
                    onClick={() => {
                        KSJViewportEffectApi.openSaturation();
                    }}
                >
                    打开饱和度
                </button>
                <button
                    onClick={() => {
                        KSJViewportEffectApi.closeLensDistortion();
                    }}
                >
                    关闭透镜畸变
                </button>
                <button
                    onClick={() => {
                        KSJViewportEffectApi.openLensDistortion();
                    }}
                >
                    打开透镜畸变
                </button>
                <button
                    onClick={() => {
                        KSJViewportEffectApi.setLensAngle({ lensAngle: 100 });
                    }}
                >
                    设置透视角度
                </button>
                <button
                    onClick={() => {
                        KSJViewportEffectApi.setStrength({ strength: 0.5 });
                    }}
                >
                    设置强度
                </button>
                <button
                    onClick={() => {
                        KSJViewportEffectApi.setCylindricalRatio({ cylindricalRatio: 0.5 });
                    }}
                >
                    设置圆柱比例
                </button>
                <button
                    onClick={() => {
                        KSJViewportEffectApi.closeVignette();
                    }}
                >
                    关闭小插图
                </button>
                <button
                    onClick={() => {
                        KSJViewportEffectApi.openVignette();
                    }}
                >
                    打开小插图
                </button>
                <button
                    onClick={() => {
                        KSJViewportEffectApi.setSize({ size: 0.5 });
                    }}
                >
                    设置大小
                </button>
                <button
                    onClick={() => {
                        KSJViewportEffectApi.setSmoothness({ smoothness: 0.5 });
                    }}
                >
                    设置光滑度
                </button>
                <button
                    onClick={() => {
                        KSJViewportEffectApi.setRoundness({ roundness: 0.5 });
                    }}
                >
                    设置圆度
                </button>
                <button
                    onClick={async () => {
                        await KSJModelControlApi.setWorkingIModel();
                        await KSJSceneViewApi.SpaceFloorIframe();
                    }}
                >
                    二三维坐标转换
                </button>
                <button
                    onClick={async () => {
                        KSJElementApi.ElementMove();
                    }}
                >
                    构件按自定义路径移动（物体漫游）
                </button>
            </div>
        </div>
    );
}

export default SceneView;
