<template>
    <div class="app-content">
        <div class="iframe-content">
            <sample-app-viewer
                :props="options"
                :bimFile="bimFile"
                :bEditable="isEditable"
                @onInitFinished="onInitFinisheds"
            ></sample-app-viewer>
        </div>
        <div class="detail-content">
            <div class="detail-content-title">模型</div>
            <div class="detail-content-button">
                <button @click="initializeIModel">初始化</button>
                <button @click="setWholeTransparency">设置模型透明</button>
                <button @click="clearTransparencyAll">恢复模型透明</button>
                <button @click="setModelColor">设置模型颜色</button>
                <button @click="resetModelColor">恢复模型颜色</button>
                <button @click="clipXAxis">X轴面剖切</button>
                <button @click="clipYAxis">Y轴面剖切</button>
                <button @click="clipZAxis">Z轴面剖切</button>
                <button @click="showClip">显示剖切</button>
                <button @click="hideClip">隐藏剖切</button>
                <button @click="clearClip">删除剖切</button>
                <button @click="projectLocationShow">开启包围盒</button>
                <button @click="projectLocationHide">关闭包围盒</button>
            </div>
            <hr />
            <div class="detail-content-title">构件</div>
            <div class="detail-content-button">
                <button @click="selectElement">
                    点选构件
                </button>
                <button @click="showAllCategories">
                    显示构件
                </button>
                <button @click="hideAllCategories">
                    隐藏构件
                </button>
                <button @click="closeElementsDisplay">
                    关闭构件显示
                </button>
                <button @click="hideSpecificElements">
                    仅隐藏指定构件
                </button>
                <button @click="showSpecificElements">
                    仅显示指定构件
                </button>
                <button @click="restoreModel">
                    恢复模型
                </button>
                <button @click="setElementColor">
                    设置构件颜色
                </button>
                <button @click="restoreElementColor">
                    恢复构件颜色
                </button>
                <button @click="setElementTransparency">
                    设置构件透明
                </button>
                <button @click="restoreElementTransparency">
                    恢复构件透明
                </button>
                <button @click="restoreElementTransparencyAll">
                    恢复构件透明
                </button>
                <button @click="findAndZoomToElements">
                    查找构件
                </button>
                <button @click="zoomToSpecificElement">
                    定位构件
                </button>
                <button @click="highlightElement">
                    高亮显示构件
                </button>
                <button @click="toggleElementRotation">
                    开启、关闭构件旋转
                </button>
                <button @click="toggleElementOffset">
                    开启、关闭构件偏移
                </button>
            </div>
            <hr />
            <div class="detail-content-title">模型展示视角</div>
            <div class="detail-content-button">
                <button @click="viewRotationFront">
                    前视图
                </button>
                <button @click="viewRotationBack">
                    后视图
                </button>
                <button @click="viewRotationLeft">
                    左视图
                </button>
                <button @click="viewRotationRight">
                    右视图
                </button>
                <button @click="viewRotationTop">
                    顶视图
                </button>
                <button @click="viewRotationBottom">
                    底视图
                </button>
            </div>

            <div class="detail-content-title">视角设置</div>
            <div class="detail-content-button">
                <button @click="saveOrUpdateView">
                    设置默认视点（保存缩略图）
                </button>
                <button @click="reloadView">
                    恢复默认视图
                </button>
            </div>

            <div class="detail-content-title">自定义标签</div>
            <div class="detail-content-button">
                
                <input id="file-input0" type="file" @change="loadPictureMarker" style="display: none;" />
                <button @click="triggerFileInput0">
                    加载图片标签
                </button>
                <button @click="loadTextMarker">
                    加载文字标签
                </button>
                <button @click="deleteAllMarkers">
                    删除全部
                </button>
                <button @click="showMarkers">
                    显示标签
                </button>
                <button @click="zoomToMarkerByName">
                    调整相机位置（定位到标签）
                </button>
            </div>

            <div class="detail-content-title">自定义视点漫游</div>
            <div class="detail-content-button">
                <button @click="addKeyframeTrack">
                    添加关键帧路径
                </button>
                <button @click="addKeyframe">
                    添加关键帧
                </button>
                <button @click="createPathRoaming">
                    创建轨迹漫游
                </button>
                <button @click="getPathRoamingSpeed">
                    轨迹漫游移动速度
                </button>
                <button @click="getRoamingTimeForPath">
                    漫游总时间
                </button>
                <button @click="getRoamingTimeForKeyframes">
                    关键帧运动时间
                </button>
                <button @click="startKeyframeRoaming">
                    开始关键帧漫游
                </button>
                <button @click="startPathRoaming">
                    开始轨迹漫游
                </button>
                <button @click="flyRoaming">
                    飞行漫游
                </button>
            </div>

            <div class="detail-content-title">测量相关</div>
            <div class="detail-content-button">
                <button @click="measureDistance">
                    测量距离
                </button>
                <button @click="measureLocation">
                    位置测量
                </button>
                <button @click="measureArea">
                    面积测量
                </button>
                <button @click="measureLength">
                    长度测量
                </button>
                <button @click="measureVolume">
                    体积测量
                </button>
            </div>
            <div class="detail-content-title">模型及构件效果</div>
            <div class="detail-content-button">
                <button @click="dropAllEffects">
                    取消所有效果
                </button>
                <button @click="openSaturation">
                    打开饱和度
                </button>
                <button @click="setSaturation">
                    设置饱和度
                </button>
                <button @click="closeSaturation">
                    关闭饱和度
                </button>
                <button @click="openLensDistortion">
                    打开透镜畸变
                </button>
                <button @click="setLensAngle">
                    设置透视角度
                </button>
                <button @click="closeLensDistortion">
                    关闭透镜畸变
                </button>
                <button @click="openVignette">
                    打开小插图
                </button>
                <button @click="closeVignette">
                    关闭小插图
                </button>
                <button @click="setStrength">
                    设置强度
                </button>
                <button @click="setCylindricalRatio">
                    设置圆柱比例
                </button>
                <button @click="setSize">
                    设置大小
                </button>
                <button @click="setSmoothness">
                    设置光滑度
                </button>
                <button @click="setRoundness">
                    设置圆度
                </button>
                <button @click="spaceFloorIframe">
                    二三维坐标转换
                </button>
                <button @click="elementMove">
                    构件按自定义路径移动（物体漫游）
                </button>
            </div>
            <hr />
            <div class="detail-content-title">GIS</div>
            <div class="detail-content-button">
                <button @click="setGeographicCRS">
                    设置地理坐标系
                </button>
                <input id="file-input1" type="file" accept=".prj" @change="importPrjFile" style="display: none;" />
                <button @click="triggerFileInput1">
                    导入PRJ文件
                </button>
                <input id="file-input2" type="file" accept=".kml" @change="importKmlFile" style="display: none;" />
                <button @click="triggerFileInput2">
                    导入Kml数据
                </button>
            </div>

        </div>
    </div>
</template>

<script>
import {
    SampleAppViewer,
    KSJModelControlApi,
    KSJElementApi,
    KSJSceneViewApi,
    KSJMarkerApi,
    KSJKeyframeRoamingApi,
    KSJPathRoamingApi,
    KSJMeasureTool,
    KSJViewportEffectApi,
    KSJGeographicCRSSettingApi,
} from "bjksj-sdk";


export default {
    name: "App",
    components: {
        "sample-app-viewer": SampleAppViewer
    },
    data() {
        return {
            // 配置
            options: {
                uriPrefix: "http://localhost:3001", // 模型后台服务地址
                bingMapsKey: "",
                mapBoxKey: "",
                cesiumIonKey: "",
            },
            // 模型文件路径
            bimFile: "e:/模型/教学楼.bim",
            // 模型文件是否可编辑
            isEditable: true,
        };
    },
    methods: {
        // 模型加载完成回调函数
        onInitFinisheds() {
            console.log("初始化完成");
        },
        async initializeIModel() {
            try {
                const info = await KSJModelControlApi.initializeIModel();
                console.log(info);
            } catch (error) {
                console.error("初始化模型失败", error);
            }
        },
        async setWholeTransparency() {
            try {
                const info = await KSJModelControlApi.setWholeTransparency({
                    opacity: 0.5,
                });
                console.log(info);
            } catch (error) {
                console.error("设置模型透明度失败", error);
            }
        },
        async clearTransparencyAll() {
            try {
                const info = await KSJModelControlApi.clearTransparencyAll();
                console.log(info);
            } catch (error) {
                console.error("恢复模型透明度失败", error);
            }
        },
        async setModelColor() {
            try {
                const info = await KSJModelControlApi.setModelColor({
                    r: 0,
                    g: 0,
                    b: 255,
                });
                console.log(info);
            } catch (error) {
                console.error("设置模型颜色失败", error);
            }
        },
        async resetModelColor() {
            try {
                const info = await KSJModelControlApi.resetModelColor();
                console.log(info);
            } catch (error) {
                console.error("恢复模型颜色失败", error);
            }
        },
        async clipXAxis() {
            try {
                const info = await KSJModelControlApi.ClipXAxis({
                    pointx: 2.13,
                    pointy: 3.19,
                    pointz: 4.34,
                    clearExistingPlanes: true,
                });
                console.log(info);
            } catch (error) {
                console.error("X轴面剖切失败", error);
            }
        },
        async clipYAxis() {
            try {
                const info = await KSJModelControlApi.ClipYAxis({
                    pointx: 2.13,
                    pointy: 3.19,
                    pointz: 4.34,
                    clearExistingPlanes: true,
                });
                console.log(info);
            } catch (error) {
                console.error("Y轴面剖切失败", error);
            }
        },
        async clipZAxis() {
            try {
                const info = await KSJModelControlApi.ClipZAxis({
                    pointx: 2.13,
                    pointy: 3.19,
                    pointz: 4.34,
                    clearExistingPlanes: true,
                });
                console.log(info);
            } catch (error) {
                console.error("Z轴面剖切失败", error);
            }
        },
        async showClip() {
            try {
                const info = await KSJModelControlApi.showClip();
                console.log(info);
            } catch (error) {
                console.error("显示剖切失败", error);
            }
        },
        async hideClip() {
            try {
                const info = await KSJModelControlApi.hideClip();
                console.log(info);
            } catch (error) {
                console.error("隐藏剖切失败", error);
            }
        },
        async clearClip() {
            try {
                const info = await KSJModelControlApi.clearClip();
                console.log(info);
            } catch (error) {
                console.error("删除剖切失败", error);
            }
        },
        async projectLocationShow() {
            try {
                const info = await KSJModelControlApi.ProjectLocationShow();
                console.log(info);
            } catch (error) {
                console.error("开启包围盒失败", error);
            }
        },
        async projectLocationHide() {
            try {
                const info = await KSJModelControlApi.ProjectLocationHide();
                console.log(info);
            } catch (error) {
                console.error("关闭包围盒失败", error);
            }
        },

        async selectElement() {
            try {
                const info = await KSJElementApi.selectElement();
                console.log(info);
            } catch (error) {
                console.error("点选构件失败", error);
            }
        },
        async showAllCategories() {
            try {
                const info = await KSJElementApi.showAllCategories();
                console.log(info);
            } catch (error) {
                console.error("显示构件失败", error);
            }
        },
        async hideAllCategories() {
            try {
                const info = await KSJElementApi.hideAllCategories();
                console.log(info);
            } catch (error) {
                console.error("隐藏构件失败", error);
            }
        },
        async closeElementsDisplay() {
            try {
                const info = await KSJElementApi.hideAllCategories();
                console.log(info);
            } catch (error) {
                console.error("关闭构件显示失败", error);
            }
        },
        async hideSpecificElements() {
            try {
                const info = await KSJElementApi.hideElements({
                    Ids: ["0x215", "0x21f"],
                });
                console.log(info);
            } catch (error) {
                console.error("仅隐藏指定构件失败", error);
            }
        },
        async showSpecificElements() {
            try {
                const info = await KSJElementApi.clearHiddenElements({
                    Ids: ["0x215", "0x21f"],
                });
                console.log(info);
            } catch (error) {
                console.error("仅显示指定构件失败", error);
            }
        },
        async restoreModel() {
            try {
                const info = await KSJElementApi.clearHidden();
                console.log(info);
            } catch (error) {
                console.error("恢复模型失败", error);
            }
        },
        async setElementColor() {
            try {
                const info = await KSJElementApi.setElementColor({
                    Ids: ["0x215", "0x21f"],
                    red: 0,
                    green: 0,
                    blue: 255,
                });
                console.log(info);
            } catch (error) {
                console.error("设置构件颜色失败", error);
            }
        },
        async restoreElementColor() {
            try {
                const info = await KSJElementApi.clearElementColor();
                console.log(info);
            } catch (error) {
                console.error("恢复构件颜色失败", error);
            }
        },
        async setElementTransparency() {
            try {
                const info = await KSJElementApi.setElementTransparency({
                    Ids: ["0x215", "0x21f"],
                    transparency: 0.8,
                });
                console.log(info);
            } catch (error) {
                console.error("设置构件透明失败", error);
            }
        },
        async restoreElementTransparency() {
            try {
                const info = await KSJElementApi.clearElementTransparency({
                    Ids: ["0x215", "0x21f"],
                });
                console.log(info);
            } catch (error) {
                console.error("恢复指定构件透明失败", error);
            }
        },
        async restoreElementTransparencyAll() {
            try {
                const info = await KSJElementApi.clearElementTransparency();
                console.log(info);
            } catch (error) {
                console.error("恢复所有构件透明失败", error);
            }
        },
        async findAndZoomToElements() {
            try {
                const ids = await KSJElementApi.findElementIds({
                    userLabel: "装饰墙 2",
                });
                const zoomInfo = await KSJElementApi.zoomToElements({ Ids: ids });
                console.log(ids, zoomInfo);
            } catch (error) {
                console.error("查找并定位构件失败", error);
            }
        },
        async zoomToSpecificElement() {
            try {
                const info = await KSJElementApi.zoomToElements({ Ids: ["0x21f"] });
                console.log(info);
            } catch (error) {
                console.error("定位构件失败", error);
            }
        },
        async highlightElement() {
            try {
                const info = await KSJElementApi.highLight({ Ids: ["0x21f"] });
                console.log(info);
            } catch (error) {
                console.error("高亮显示构件失败", error);
            }
        },
        async toggleElementRotation() {
            try {
                const info = await KSJElementApi.RotateElements();
                console.log(info);
            } catch (error) {
                console.error("开启、关闭构件旋转失败", error);
            }
        },
        async toggleElementOffset() {
            try {
                const info = await KSJElementApi.MoveElements();
                console.log(info);
            } catch (error) {
                console.error("开启、关闭构件偏移失败", error);
            }
        },

        viewRotationFront() {
            KSJSceneViewApi.viewRotationFront();
        },
        viewRotationBack() {
            KSJSceneViewApi.viewRotationBack();
        },
        viewRotationLeft() {
            KSJSceneViewApi.viewRotationLeft();
        },
        viewRotationRight() {
            KSJSceneViewApi.viewRotationRight();
        },
        viewRotationTop() {
            KSJSceneViewApi.viewRotationTop();
        },
        viewRotationBottom() {
            KSJSceneViewApi.viewRotationBottom();
        },

        saveOrUpdateView() {
            KSJSceneViewApi.SaveOrUpdateView({ viewName: "viewname" });
        },
        reloadView() {
            KSJSceneViewApi.reloadView({ viewName: "viewname" });
        },
        triggerFileInput0() {
            document.getElementById("file-input0").click();
        },
        async loadPictureMarker(event) {
            try {
                const files = event.target.files;
                if (files && files.length > 0) {
                    const file = files[0];
                    // 将图片File转为Base64
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = () => {
                        // 添加图片标签
                        KSJMarkerApi.createPrctureMarkObj({
                            view: 1,
                            markType: "位置",
                            markName: "图片标签",
                            markNote: "",
                            picture: reader.result,
                            pointx: 17.59,
                            pointy: -5.42,
                            pointz: 4.5,
                        });
                    };
                }
            } catch (error) {
                console.error('加载图片标签失败', error);
            }
        },
        async loadTextMarker() {
            try {
                const info = await KSJMarkerApi.createTextMarkObj({
                    view: 1,
                    markType: "位置",
                    markName: "文字标签222",
                    markNote: "文字标签",
                    text: "文字标签",
                    pointx: 17.59,
                    pointy: -5.42,
                    pointz: 4.5,
                });
                console.log(info);
            } catch (error) {
                console.error('加载文字标签失败', error);
            }
        },
        async deleteAllMarkers() {
            try {
                const info = await KSJMarkerApi.deleteAllMarkObj();
                console.log(info);
            } catch (error) {
                console.error('删除全部标签失败', error);
            }
        },
        async showMarkers() {
            try {
                const info = await KSJMarkerApi.showMarksObjs();
                console.log(info);
            } catch (error) {
                console.error('显示标签失败', error);
            }
        },
        async zoomToMarkerByName() {
            try {
                const info = await KSJMarkerApi.zoomToByName({
                    name: "图片标签",
                });
                console.log(info);
            } catch (error) {
                console.error('调整相机位置失败', error);
            }
        },

        async addKeyframeTrack() {
            try {
                const info = await KSJKeyframeRoamingApi.createTrack({ roadName: "关键帧漫游" });
                console.log(info);
            } catch (error) {
                console.error('添加关键帧路径失败', error);
            }
        },
        async addKeyframe() {
            try {
                const info = await KSJKeyframeRoamingApi.AddKeyFrame({
                    roadName: "关键帧漫游",
                    tim: 10,
                });
                console.log(info);
            } catch (error) {
                console.error('添加关键帧失败', error);
            }
        },
        async createPathRoaming() {
            try {
                const info = await KSJPathRoamingApi.createTrackFromPts({
                    roadName: "轨迹漫游",
                    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 },
                    ],
                });
                console.log(info);
            } catch (error) {
                console.error('创建轨迹漫游失败', error);
            }
        },
        async getPathRoamingSpeed() {
            try {
                const info = await KSJPathRoamingApi.GetSpeed({ roadName: "轨迹漫游" });
                console.log(info);
            } catch (error) {
                console.error('获取轨迹漫游速度失败', error);
            }
        },
        async getRoamingTimeForPath() {
            try {
                const info = await KSJPathRoamingApi.getRoamingTime({ roadName: "轨迹漫游" });
                console.log(info);
            } catch (error) {
                console.error('获取漫游总时间失败', error);
            }
        },
        async getRoamingTimeForKeyframes() {
            try {
                const info = await KSJKeyframeRoamingApi.getRoamingTime({ roadName: "关键帧漫游" });
                console.log(info);
            } catch (error) {
                console.error('获取关键帧运动时间失败', error);
            }
        },
        async startKeyframeRoaming() {
            try {
                const info = await KSJKeyframeRoamingApi.StartKeyframeRoaming({ roadName: "关键帧漫游" });
                console.log(info);
            } catch (error) {
                console.error('开始关键帧漫游失败', error);
            }
        },
        startPathRoaming() {
            KSJPathRoamingApi.StartRoaming({ roadName: "轨迹漫游" });
        },
        flyRoaming() {
            KSJSceneViewApi.FlyRoaming();
        },

        measureDistance() {
            KSJMeasureTool.measureDistance();
        },
        measureLocation() {
            KSJMeasureTool.measureLocation();
        },
        measureArea() {
            KSJMeasureTool.measureArea();
        },
        measureLength() {
            KSJMeasureTool.measureLength();
        },
        measureVolume() {
            KSJMeasureTool.measureVolume();
        },
        dropAllEffects() {
            KSJViewportEffectApi.dropAllEffect();
        },
        openSaturation() {
            KSJViewportEffectApi.openSaturation();
        },
        setSaturation() {
            KSJViewportEffectApi.setSaturation({ saturation: 4 });
        },
        closeSaturation() {
            KSJViewportEffectApi.closeSaturation();
        },
        openLensDistortion() {
            KSJViewportEffectApi.openLensDistortion();
        },
        setLensAngle() {
            KSJViewportEffectApi.setLensAngle({ lensAngle: 100 });
        },
        closeLensDistortion() {
            KSJViewportEffectApi.closeLensDistortion();
        },
        openVignette() {
            KSJViewportEffectApi.openVignette();
        },
        closeVignette() {
            KSJViewportEffectApi.closeVignette();
        },
        setStrength() {
            KSJViewportEffectApi.setStrength({ strength: 0.5 });
        },
        setCylindricalRatio() {
            KSJViewportEffectApi.setCylindricalRatio({ cylindricalRatio: 0.5 });
        },
        setSize() {
            KSJViewportEffectApi.setSize({ size: 0.5 });
        },
        setSmoothness() {
            KSJViewportEffectApi.setSmoothness({ smoothness: 0.5 });
        },
        setRoundness() {
            KSJViewportEffectApi.setRoundness({ roundness: 0.5 });
        },
        async spaceFloorIframe() {
            try {
                await KSJSceneViewApi.SpaceFloorIframe();
            } catch (error) {
                console.error('二三维坐标转换失败', error);
            }
        },
        async elementMove() {
            try {
                KSJElementApi.ElementMove();
            } catch (error) {
                console.error('构件按自定义路径移动（物体漫游）失败', error);
            }
        },
        async setGeographicCRS() {
            try {
                const info = await KSJGeographicCRSSettingApi.setGeographicCRS({
                    type: "CGCS2000",
                    projectionType: "高斯投影",
                    utmRegion: "1N",
                    scaleFactor: "1",
                    centerLon: "117",
                    falseEasting: "104",
                    falseNorthing: "0",
                    orginLon: "104",
                    orginLat: "0",
                    orginHeight: "0",
                });
                console.log(info);
            } catch (error) {
                console.error('设置地理坐标系失败', error);
            }
        },
        async importPrjFile(event) {
            try {
                const files = event.target.files;
                if (files && files.length > 0) {
                    const file = files[0];
                    const info = await KSJGeographicCRSSettingApi.ImportGeographicCRS({ file });
                    console.log(info);
                }
            } catch (error) {
                console.error('导入PRJ文件失败', error);
            }
        },
        triggerFileInput1() {
            document.getElementById("file-input1").click();
        },
        async importKmlFile(event) {
            try {
                const files = event.target.files;
                if (files && files.length > 0) {
                    const file = files[0];
                    const info = await KSJGeographicCRSSettingApi.createDecoratorFromKml({ file });
                    console.log(info);
                }
            } catch (error) {
                console.error('导入Kml数据失败', error);
            }
        },
        triggerFileInput2() {
            document.getElementById("file-input2").click();
        }
    },
};
</script>

<style lang="less" scoped>
.app-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;

    .iframe-content {
        height: 100%;
        flex: 1;
        > div {
            width: 100%;
            height: 100%;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
            box-sizing: border-box;
        }
    }

    .detail-content {
        width: 400px;
        border-top: 1px solid #ccc;
        padding: 4px 5px;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
    }

    .detail-content .detail-content-title {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        font-weight: bold;
        color: black;
    }

    .detail-content .detail-content-button {
        display: flex;
        align-items: center;
        /* 换行 */
        flex-wrap: wrap;
        gap: 10px;
    }
}
</style>
