import "./App.css";
import {
    KSJElementApi,
    KSJElementFlickerApi,
    KSJElementPathMovementApi,
    KSJModelControlApi,
} from "bjksj-sdk";
function Element() {
    return (
        <div className="detail-content">
            <div className="detail-content-title">构件</div>
            <div className="detail-content-button">
                <button
                    onClick={() => {
                        KSJElementApi.selectElement();
                    }}
                >
                    点选构件
                </button>
                <button
                    onClick={async () => {
                        await KSJElementApi.showAllCategories();
                    }}
                >
                    显示构件
                </button>
                <button
                    onClick={async () => {
                        await KSJElementApi.hideAllCategories();
                    }}
                >
                    隐藏构件
                </button>
                <button
                    onClick={async () => {
                        await KSJElementApi.hideAllCategories();
                    }}
                >
                    关闭构件显示
                </button>
                <button
                    onClick={() => {
                        KSJElementApi.hideElements({ Ids: ["0x215", "0x21f"] });
                    }}
                >
                    仅隐藏指定构件
                </button>
                <button
                    onClick={async () => {
                        await KSJElementApi.clearHiddenElements({
                            Ids: ["0x215"],
                        });
                    }}
                >
                    仅显示指定构件
                </button>
                <button
                    onClick={() => {
                        KSJElementApi.clearHidden();
                    }}
                >
                    恢复模型
                </button>
                <button
                    onClick={() => {
                        KSJElementApi.setElementColor({
                            Ids: ["0x215", "0x21f"],
                            red: 0,
                            green: 0,
                            blue: 255,
                        });
                    }}
                >
                    设置构件颜色
                </button>
                <button
                    onClick={() => {
                        KSJElementApi.clearElementColor();
                    }}
                >
                    恢复构件颜色
                </button>
                <button
                    onClick={() => {
                        KSJElementApi.setElementTransparency({
                            Ids: ["0x215", "0x21f"],
                            transparency: 0.8,
                        });
                    }}
                >
                    设置构件透明
                </button>
                <button
                    onClick={async () => {
                        await KSJElementApi.clearElementTransparency({
                            Ids: ["0x215", "0x21f"],
                        });
                    }}
                >
                    恢复构件透明
                </button>
                <button
                    onClick={async () => {
                        await KSJElementApi.isolateElements({
                            ids: ["0x215", "0x21f"],
                        });
                    }}
                >
                    隔离构件
                </button>
                <button
                    onClick={async () => {
                        await KSJElementApi.clearIsolatedElements();
                    }}
                >
                    清除隔离构件
                </button>
                <button
                    onClick={async () => {
                        await KSJElementApi.emphasizeElements({
                            ids: ["0x215", "0x21f"],
                        });
                    }}
                >
                    突显构件
                </button>
                <button
                    onClick={async () => {
                        await KSJElementApi.clearEmphasizedElements();
                    }}
                >
                    清除突显构件
                </button>
                <button
                    onClick={async () => {
                        await KSJElementApi.clearIsolatedEmphasizedHiddenElements();
                    }}
                >
                    清除隔离、突显、隐藏构件
                </button>
                <button
                    onClick={async () => {
                        let ids = await KSJElementApi.findElementIds({
                            userLabel: "装饰墙 2",
                        });
                        KSJElementApi.zoomToElements({ Ids: ids });
                    }}
                >
                    查找构件
                </button>
                <button
                    onClick={() => {
                        KSJElementApi.zoomToElements({ Ids: ["0x21f"] });
                    }}
                >
                    定位构件
                </button>
                <button
                    onClick={() => {
                        KSJElementApi.highLight({ Ids: ["0x21f"] });
                    }}
                >
                    高亮显示构件
                </button>
                <button
                    onClick={async () => {
                        KSJElementApi.RotateElements();
                    }}
                >
                    开启、关闭构件旋转
                </button>
                <button
                    onClick={async () => {
                        KSJElementApi.MoveElements();
                    }}
                >
                    开启、关闭构件偏移
                </button>
                <button
                    onClick={async () => {
                        KSJElementFlickerApi.startElementFlicker({
                            ids: ["0x72b"],
                            interval: 0.01,
                        });
                    }}
                >
                    开始构件闪烁
                </button>
                <button
                    onClick={async () => {
                        await KSJElementFlickerApi.stopElementFlicker();
                    }}
                >
                    停止构件闪烁
                </button>
                <button
                    onClick={async () => {
                        await KSJModelControlApi.initializeIModel();
                        let points = [
                            { pointx: 18.9, pointy: -4.13, pointz: 0 },
                            { pointx: 26, pointy: -0.19, pointz: 0 },
                            { pointx: 28.73, pointy: 11.88, pointz: 0 },
                            { pointx: -2.03, pointy: 38.1, pointz: 0 },
                            { pointx: -18.07, pointy: 48.67, pointz: 0 },
                        ];
                        await KSJElementPathMovementApi.CreateOrUpdataPathMovement({
                            ids: ["0x72b"],
                            points: points,
                            speed: 5,
                        });
                    }}
                >
                    添加构件移动路径
                </button>
                <button
                    onClick={async () => {
                        await KSJModelControlApi.initializeIModel();
                        await KSJElementPathMovementApi.StartPathMovement({
                            ids: ["0x72b"],
                        });
                    }}
                >
                    开始构件移动
                </button>
                <button
                    onClick={async () => {
                        await KSJElementPathMovementApi.PauseMove();
                    }}
                >
                    暂停构件移动
                </button>
                <button
                    onClick={async () => {
                        await KSJElementPathMovementApi.ContinueMove();
                    }}
                >
                    恢复构件移动
                </button>
                <button
                    onClick={async () => {
                        await KSJElementPathMovementApi.StopMove();
                    }}
                >
                    停止构件移动
                </button>
                <button
                    onClick={async () => {
                        await KSJElementPathMovementApi.ReStartMove();
                    }}
                >
                    重新开始自定义路径移动
                </button>
                <button
                    onClick={async () => {
                        let ids = await KSJElementApi.getSelectedElementIds();
                        console.log(ids);
                    }}
                >
                    获取选中构件id
                </button>
                <button
                    onClick={async () => {
                        let ids = await KSJElementApi.getSelectedElementIds();
                        if (ids && ids.length > 0) {
                            let result = await KSJElementApi.getElementProperty({
                                id: ids[0],
                            });
                            console.log(result);
                        }
                    }}
                >
                    获取选中构件属性
                </button>
            </div>
        </div>
    );
}

export default Element;
